React ESLint Config“意外的文件扩展名 JSX”

Question

运行 Airbnb 的 Eslint Config 并在使用扩展时遇到问题.jsx。

索引.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'),
);

所以查了一下，发现了另一个SO，它与Restrict file extensions that might contains 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';

这导致无法解决错误。然后，这让我想到了另一个SO：Webpack Can't find module if file named jsx and write a resolveobject in mywebpack.config

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

到目前为止，这正在按预期工作，试图找到这是“最佳实践”的确认

更新到 .eslintrc

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

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