Javascript 反应ESLint配置；意外的文件扩展名JSX“；

运行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'),
);

但是仍然会得到相同的错误。我还缺什么吗

依赖关系

• “eslint”：“^4.10.0”
• “eslint配置airbnb”：“^16.1.0”
• “eslint插件导入”：“^2.8.0”
• “eslint-plugin-jsx-a11y”：“^6.0.2”
• “eslint插件反应”：“^7.4.0”

---

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

从“/components/App”导入应用程序

这导致无法解决错误。然后，我转到另一个，在我的
webpack.config

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

到目前为止，这是预期的效果，试图确认这是“最佳实践”

更新到.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"]
  }
}

正如下面的回答所指出的，删除了
“react/jsx文件扩展名”：[1，{“extensions”：[“.js”，“.jsx”]}]，

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

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

从“/components/App”导入应用程序

这导致无法解决错误。然后，我转到另一个，在我的
webpack.config

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

到目前为止，这是预期的效果，试图确认这是“最佳实践”

更新到.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"]
  }
}

正如下面的回答所指出的，删除了
“react/jsx文件扩展名”：[1，{“extensions”：[“.js”，“.jsx”]}]，

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

我敢肯定你把责任归咎于错误的规则。实际上，您正在从
eslint插件导入中点击此按钮：

下面是代码中包含错误的一行：

这条规则很好，为什么要一直键入扩展名

关于添加
'.jsx'
来解析扩展，如果您要编写jsx，那么这绝对是一个好办法

另外，您复制的
jsx文件扩展名
配置允许您将jsx保存在扩展名为“.jsx”或“.js”的文件中，这是我避免的。最好将JSX保存在.JSX文件中。
我很确定您将错误的规则归咎于此。实际上，您正在从
eslint插件导入中点击此按钮：

下面是代码中包含错误的一行：

这条规则很好，为什么要一直键入扩展名

关于添加
'.jsx'
来解析扩展，如果您要编写jsx，那么这绝对是一个好办法

另外，您复制的
jsx文件扩展名
配置允许您将jsx保存在扩展名为“.jsx”或“.js”的文件中，这是我避免的。最好将JSX保存在.JSX文件中。
我不想编写与Airbnb样式一致的扩展名，因为Airbnb样式声明忽略它们。这很好，但问题是，如果省略扩展，那么路径将无法解决。这将导致如何修复解析路径错误。事实证明，您可以使用resolve对象配置Webpack来处理
.jsx
。在Airbnb的文档中，我找不到“省略扩展名，这样做时，您还需要执行另一个步骤来解析文件…使用Webpack跟随此链接”。我只是觉得文档不完整。我不想编写符合Airbnb样式的扩展，该样式声明忽略它们。这很好，但问题是，如果省略扩展，那么路径将无法解决。这将导致如何修复解析路径错误。事实证明，您可以使用resolve对象配置Webpack来处理
.jsx
。在Airbnb的文档中，我找不到“省略扩展名，这样做时，您还需要执行另一个步骤来解析文件…使用Webpack跟随此链接”。我只是觉得不完整。