[解決済み] eslint-config-airbnbで拡張子が' .js'のファイルではJSXは許可されません。

質問

インストールしたのは eslint-config-airbnb これは、React用にESLINTを事前設定するためのものです。

デフォルトのエクスポートには、以下を含むESLintのすべてのルールが含まれています。 ECMAScript 6+とReactです。eslint、eslint-plugin-importが必要です。 eslint-plugin-react, eslint-plugin-jsx-a11yの3つを使用します。

私の .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-ファイル名-拡張子 ルールがあります。以下をコンフィグに追加して、許可するようにします。 .js の拡張子をJSXに変更しました。

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