확장자가 .js인 파일에서는 JSX가 eslint-config-airbnb에서 허용되지 않습니다.

확장자가 .js인 파일에서는 JSX가 eslint-config-airbnb에서 허용되지 않습니다.

eslint-config-airbnb는 ESLINT for React를 사전 설정하도록 설치했습니다.

기본 내보내기에는 ECMAScript 6+ 및 React를 포함한 모든 ESLint 규칙이 포함됩니다.여기에는 eslint, eslint-plugin-import, eslint-plugin-react 및 eslint-plugin-jsx-a11y가 필요합니다.

나의.eslintrc설정을 확장합니다.

{ "extends": "eslint-config-airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
    "react/no-multi-comp": 0,
    "import/default": 0,
    "import/no-duplicates": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/no-unresolved": 0,
    "import/no-named-as-default": 2,
    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-console": 0,
    "no-alert": 0,
    "linebreak-style": 0
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", "src"]
    }
  },
  "globals": {
    "__DEVELOPMENT__": true,
    "__CLIENT__": true,
    "__SERVER__": true,
    "__DISABLE_SSR__": true,
    "__DEVTOOLS__": true,
    "socket": true,
    "webpackIsomorphicTools": true
  }
}

안타깝게도 리액트 JSX 코드가 포함된 .js 파일을 보풀로 만들면 다음과 같은 오류가 발생합니다.

 error  JSX not allowed in files with extension '.js'              react/jsx-filename-extension

eslint-config-airbnb는 이미 JSX를 지원하도록 설정되어 있지 않습니까?

이 오류를 제거하려면 어떻게 해야 합니까?

파일 확장자를 다음과 같이 변경하십시오..jsx또는 jsx-disable-disable 규칙을 디세블로 합니다.설정에 다음 항목을 추가하여.jsJSX용 확장 기능.

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

나한텐 일인데.도움이 되길 바랍니다.

1. disable jsx-disable-disable in.eslintrc:

   "filename": {"filename/filename-filename": [0] }

2. 에webpack.config.js:

   해결: { 확장자: [.displays', '.displaysx'},

안 되면 날 바보라고 불러

    "rules": {
        "react/jsx-filename-extension": [0],
        "import/extensions": "off"
    }

파일 확장자를 변경하지 않으려면 jsx를 반환하는 함수를 내보낸 다음 js 파일에서 해당 함수를 가져와 호출할 수 있습니다.

// greeter.jsx

import React from 'react';

export default name => (
  <div>
    {`Hello, ${name}!`}
  </div>
);

그리고 나서.

// index.js

import ReactDOM from 'react-dom';
import greeter from './components/greeter';

const main = document.getElementsByTagName('main')[0];

ReactDOM.render(greeter('World'), main);

다음 React 문서:

각 JSX 요소는 React.createElement(컴포넌트, 소품, ...자녀)를 호출하기 위한 구문설탕일 뿐입니다.

Airbnb 스타일 가이드:

JSX가 아닌 파일에서 앱을 초기화하지 않는 한 React.createElement를 사용하지 마십시오.

다음과 같이 할 수 있습니다.

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));

마틴의 답변을 자세히 설명하자면, 현재로선 사용할 수 없는 것 같습니다.JSX[ React Native ](네이티브 리액트)로 설정합니다.PR은 생성되었지만 단편화 및 다음과 같은 결과를 초래할 수 있다는 우려로 인해 복구되었습니다.index.ios.jsxAirBnb가 어떻게 동작하는지, 동작하는지는 모르겠지만 기본적으로는 같은 것을 사용하고 있습니다.rules마틴처럼 막다.

jsx를 쓰고 싶은 미래의 독자를 위해.js파일:

0. 설치하다npm i react react-dom리액션을 쓰고 있지 않다고 생각되더라도요
1. 설치하다npm i -D @babel/preset-react
2. babel 구성:plugins: ['@babel/plugin-transform-react-jsx']
3. 셋업해야 합니다.module.rules위해서/\.jsx?$/파일링babel-loader(이 때문에, 인스톨 할 필요가 있습니다.npm i -D babel-loader~도)

언급URL : https://stackoverflow.com/questions/43031126/jsx-not-allowed-in-files-with-extension-js-with-eslint-config-airbnb