带有 eslint-config-airbnb 的扩展名为“.js”的文件中不允许使用 JSX

Question

我已经安装了 eslint-config-airbnb，它应该为 React 预配置 ESLINT：

Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, and 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，如前所述？

应该如何消除该错误？

Answer 1

如前所述将文件扩展名更改为 .jsx 或禁用 [=13=] 规则。您可以将以下内容添加到您的配置中以允许 .js JSX 扩展。

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

Answer 2

阐述 Martin's answer, it seems that it is not possible, currently, to use JSX in React Native. A PR 已创建，但由于担心 index.ios.jsx 之类的碎片化和未知后果而被撤销。我不确定 AirBnb 如何解决这个问题，或者他们是否这样做，但我使用的 rules 块与 Martin 基本相同。

Answer 3

这对我有用。希望能帮到你。

在.eslintrc中禁用jsx-filename-extension:

"rules": { "react/jsx-filename-extension": [0] }
在webpack.config.js:

解决：{ 扩展名：['.js', '.jsx'] },

Answer 4

如果您不想更改文件扩展名，可以导出一个 returns 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);

Answer 5

如果它对你不起作用，请叫我假人

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

Answer 6

正在关注 React documentation：

Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).

正在关注 Airbnb's style guide：

Do not use React.createElement unless you’re initializing the app from a file that is not JSX.

你可以这样做：

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

Answer 7

对于未来想要在 .js 个文件中编写 jsx 的读者：

安装 npm i react react-dom 即使您认为您不是在编写 React。
安装npm i -D @babel/preset-react
在 babel 配置中：plugins: ['@babel/plugin-transform-react-jsx']
您应该使用 babel-loader 为 /\.jsx?$/ 文件设置 module.rules（因此您也需要安装 npm i -D babel-loader）

带有 eslint-config-airbnb 的扩展名为“.js”的文件中不允许使用 JSX

JSX not allowed in files with extension ' .js' with eslint-config-airbnb

javascript

reactjs

eslint

eslint-config-airbnb