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

Posted 2023-02-22

【中文标题】使用 eslint-config-airbnb 扩展名为“.js”的文件中不允许使用 JSX

【英文标题】：JSX not allowed in files with extension ' .js' with eslint-config-airbnb

【发布时间】：2017-08-19 06:12:30

【问题描述】：

我已经安装了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_s-s-r__": true,
    "__DEVTOOLS__": true,
    "socket": true,
    "webpackIsomorphicTools": true
  

不幸的是，我在 linting 包含 React JSX 代码的 .js 文件时遇到以下错误：

 error  JSX not allowed in files with extension '.js'              react/jsx-filename-extension

如前所述，eslint-config-airbnb 是否已配置为支持 JSX？

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

【参考方案1】：

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

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

【讨论】：

如果您不想更改文件扩展名或禁用规则，请参阅this answer

这个接受的答案不会禁用规则。它只是简单地允许 .js 文件包含 JSX，而您链接的内容似乎在超大型项目中造成了太多混乱。

数组中的第二个“jsx”元素是不必要的。 “js”元素就足够了，因为规则已经引用了“jsx”范围。

配置文件在哪里？

【参考方案2】：

为了解释Martin's 的答案，目前似乎不可能在 React Native 中使用JSX。 A PR 已创建，但由于担心碎片化和拥有 index.ios.jsx 之类的未知后果而被恢复。我不确定 AirBnb 是如何解决这个问题的，或者他们是否这样做，但我使用了与 Martin 基本相同的 rules 块。

【参考方案3】：

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

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

“规则”： “反应/jsx-文件名扩展”：[0]

在webpack.config.js:

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

【讨论】：

投票支持添加webpack.config.js 示例。

【参考方案4】：

如果您不想更改文件扩展名，可以导出一个返回 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 文件的解决方法似乎有点 hacky 和不专业。

我同意这种技术不是惯用的 React。但是，我只在入口点遇到了这个问题。我不建议对所有文件都这样做，因为它会创建笨拙的代码。如果这是您的用例，那么只需按照接受的答案中的建议修改 linter 规则。

【参考方案5】：

如果它不适合你，就叫我笨蛋

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

【参考方案6】：

关注React documentation：

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

关注Airbnb's style guide：

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

你可以这样做：

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