[javascript] eslint-config-airbnb가있는 확장자가 ‘.js’인 파일에서는 JSX를 사용할 수 없습니다.

Program / 글쓴이

React에 대해 ESLINT를 미리 구성해야하는 eslint-config-airbnb를 설치 했습니다 .

기본 내보내기에는 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
  }
}

Unfortunatelly 내부에 React JSX 코드가있는 .js 파일을 linting 할 때 다음 오류가 발생합니다.

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

eslint-config-airbnb가 이미 언급했듯이 JSX를 지원하도록 반응하지 않았습니까?

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

답변

.jsx언급 한대로 파일 확장자를 변경 하거나 jsx-filename-extension 규칙을 비활성화하십시오 . 구성에 다음을 추가하여 .jsJSX 확장 을 허용 할 수 있습니다.

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

답변

그것은 나를위한 일입니다. 당신을 도울 수 있기를 바랍니다.

  1. 에서 jsx-filename-extension 비활성화 .eslintrc:

    “rules”: { “react / jsx-filename-extension”: [0]}

  2. 에서 webpack.config.js:

    해결 : {확장자 : [ ‘.js’, ‘.jsx’]},

답변

당신을 위해 작동하지 않으면 나를 더미라고 불러

    "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);

답변

Martin의 답변 을 설명 하기 위해 현재 JSXReact Native에서 사용할 수없는 것 같습니다 . PR 이 생성되었지만 단편화에 대한 우려와 index.ios.jsx. AirBnb가이 문제를 해결하거나 작동하는지 확실하지 않지만 기본적 rules으로 Martin 과 동일한 블록을 사용했습니다.

답변

다음 React 문서 :

각 JSX 요소는 React.createElement (component, props, … children)를 호출하기위한 구문 설탕 일뿐입니다.

Airbnb의 스타일 가이드를 따르십시오 :

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

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

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

답변