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

IT技术 javascript reactjs eslint eslint-config-airbnb
2021-03-27 11:13:52

我已经安装了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 了吗？

应该怎么做才能消除该错误？

6个回答

将您的文件扩展名更改.jsx为如上所述或禁用jsx-filename-extension规则。您可以将以下内容添加到您的配置中以允许.jsJSX 的扩展。

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
这个接受的答案不会禁用规则。它只是简单地允许 .js 文件包含 JSX，而您所链接的内容似乎在非常大规模的项目中造成了太多混乱。
2021-05-23 11:13:52
配置文件在哪里？
2021-05-26 11:13:52
如果您不想更改文件扩展名或禁用规则，请参阅此答案
2021-06-02 11:13:52
数组中的第二个“jsx”元素是不必要的。“js”元素就足够了，因为规则已经引用了“jsx”范围。
2021-06-06 11:13:52

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

  1. 在以下位置禁用 jsx-filename-extension .eslintrc：

    “规则”：{“react/jsx-文件名-扩展名”：[0]}

  2. 在webpack.config.js：

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

给了您添加webpack.config.js示例的投票。
2021-06-18 11:13:52

如果它不适合你，请叫我傻瓜

    "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);
也许是因为虽然此修复程序“有效”，但充其量只是一种解决方法。在整个项目的多个 JS 文件中包含一个解决方法似乎有点不专业和不专业。
2021-05-22 11:13:52
我同意这种技术不是惯用的 React。但是，我的入口点只遇到了这个问题。我不建议在所有文件中都这样做，因为它会创建笨拙的代码。如果这是您的用例，那么只需按照已接受的答案中的建议修改 linter 规则。
2021-05-31 11:13:52
我不明白反对票。有人可以解释一下，这样我就可以成为更好的贡献者吗？
2021-06-14 11:13:52

以下React 文档：

每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。

遵循Airbnb的风格指南：

不要使用 React.createElement ，除非你从一个不是 JSX 的文件初始化应用程序。

你可以这样做：

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));
其它你可能感兴趣的问题
上一篇当输入为空时如何禁用按钮？ 下一篇将对象作为props传递给 jsx