eslint-config-airbnbが付いた拡張子「.js」のファイルではJSXは許可されません

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
  }
}

残念ながら、React JSXコードを含む.jsファイルをlintすると、次のエラーが発生します。

 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：

   "ルール"：{"react / jsx-filename-extension"：[0]}

2. でwebpack.config.js：

   resolve：{extensions：['.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);

マーティンの答えを詳しく説明すると、現在のところ、JSXReact Native では使用できないようです。 PRが作成されましたが、のような断片化や不明な結果に関する懸念のために元に戻されましたindex.ios.jsx。AirBnbがこの問題にどのように対処するのか、またはそれができるかどうかはわかりませんが、基本的にはrulesMartin と同じブロックを使用しています。

以下のReactのドキュメント：

各JSX要素は、React.createElement（component、props、... children）を呼び出すための単なる構文糖です。

Airbnbのスタイルガイドに従う：

JSX以外のファイルからアプリを初期化する場合を除き、 React.createElementは使用しないでください。

あなたはこれを行うことができます：

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