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

Question

使用.jsx扩展程序运行Airbnb的Eslint配置并遇到问题。

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

所以查了一下，发现另一个SO与Restrict文件扩展名一起使用，可能包含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语句的扩展名：

import App from './components/App';

导致无法解决错误。 那然后把我带到另一个SO：Webpack找不到模块，如果文件名为jsx并在我的webpack.config编写一个resolve对象

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,
  }
}

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，那肯定是要走的路。

PS你复制的jsx-filename-extension配置允许你将JSX保存在带有'.jsx'或'.js'扩展名的文件中，我会避​​免这种情况。 最好将JSX保存在.jsx文件中。