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

所以看了一下，找到了另一个与SO

结合的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"]
  }
}

然而仍然得到相同的错误。我还缺少其他什么吗？

依赖关系

＆＃34; eslint＆＃34;：＆＃34; ^ 4.10.0＆＃34;，
＆＃34; eslint-config-airbnb＆＃34;：＆＃34; ^ 16.1.0＆＃34;，
＆＃34; eslint-plugin-import＆＃34;：＆＃34; ^ 2.8.0＆＃34;，
＆＃34; eslint-plugin-jsx-a11y＆＃34;：＆＃34; ^ 6.0.2＆＃34;，
＆＃34; eslint-plugin-react＆＃34;：＆＃34; ^ 7.4.0＆＃34;，

Answer 1

在import语句中删除了扩展名：

import App from './components/App';

导致无法解决错误。然后我转到了另一个SO: Webpack Can't find module if file named jsx并在resolve

中写了webpack.config个对象

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

到目前为止，这是按预期工作，试图找到确认这是＆＃34;最佳做法＆＃34;

更新为.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保存在带有＆＃39; .jsx＆＃39;的文件中。或＆＃39; .js＆＃39;扩展，我会避免。最好将JSX保存在.jsx文件中。

React ESLint Config＆＃34;意外的文件扩展名JSX＆＃34;

2 个答案: