带有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。

我.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文件时，出现以下错误：

 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：

   解析：{扩展名：['.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);

为了解释马丁的答案，目前似乎无法JSX在React Native中使用。 创建PR时由于对碎片的担忧和发生类似事情的未知后果而撤销了PRindex.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'));