反应 ESLint 配置 "Unexpected file extension JSX"

Question

运行 Airbnb 的 Eslint 配置和运行使用 .jsx 扩展时出现问题。

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.jsx'; <<<<<<<<< Unexpected use of file extension "jsx"...

require('./index.scss');

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
document.getElementById('root'),
);

所以查了一下，发现了另一个 which is in conjunction with Restrict file extensions that may contain JSX

好的，所以更新了我的 .eslintrc 以在我的规则中反映这一点

.eslintrc

{
  "extends": "airbnb",
  "env":{
    "browser": true
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
    "no-tabs": 0,
    "react/prop-types": 0,
    "react/jsx-indent": [2, "tab"],
    "react/jsx-indent-props": [2, "tab"]
  }
}

但是仍然出现同样的错误。还有什么我想念的吗？

依赖关系

"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",

Answer 1

删除了导入语句的扩展名：

import App from './components/App';

导致无法解析的错误。然后把我带到另一个并在我的 webpack.config

中写一个 resolve 对象

resolve: {
    extensions: ['.js', '.jsx'],
},

到目前为止，这是按预期工作的，试图确认这是 "best practice"

更新为 .eslintrc

正如下面的答案所指出的，删除了 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

{
  "extends": "airbnb",
  "env":{
    "browser": true,
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "no-tabs": 0,
  }
}

Answer 2

我敢肯定您是在指责错误的规则。您实际上是从 eslint-plugin-import 击中了这个：https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md

这是代码中出现错误的行： https://github.com/benmosher/eslint-plugin-import/blob/master/src/rules/extensions.js#L152

message: `Unexpected use of file extension "${extension}" for "${importPath}"`,

规则很好，为什么要一直输入扩展名？

关于添加 '.jsx' 来解决扩展问题，如果您要编写 JSX，这绝对是正确的方法。

P.S。您复制的 jsx-filename-extension 配置让您可以将 JSX 保存在扩展名为“.jsx”或“.js”的文件中，我会避免这种情况。最好将 JSX 保留在 .jsx 文件中。

反应 ESLint 配置 "Unexpected file extension JSX"

React ESLint Config "Unexpected file extension JSX"

javascript

eslint