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

Posted 2023-03-07

【中文标题】React ESLint Config“意外的文件扩展名JSX”

【英文标题】：React ESLint Config "Unexpected file extension JSX"

【发布时间】：2018-04-16 17:39:17

【问题描述】：

运行 Airbnb 的 Eslint Config 并使用 .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"]
  

但是仍然遇到同样的错误。我还有什么遗漏的吗？

依赖关系

“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",

【参考方案1】：

删除了导入语句的扩展：

import App from './components/App';

导致无法解决的错误。然后把我带到另一个SO: Webpack Can't find module if file named 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,
  

【参考方案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，绝对是要走的路。

附：您复制的 jsx-filename-extension 配置让您将 JSX 保存在具有“.jsx”或“.js”扩展名的文件中，我会避​​免这种情况。最好将 JSX 保存在 .jsx 文件中。

【讨论】：

我不想编写符合 Airbnb 样式的扩展，该样式声明要省略它们。这很好，但问题是，如果我省略扩展名，那么路径将无法解决。然后导致如何修复解析路径错误。事实证明，您可以使用解析对象配置 Webpack 来处理 .jsx。在 Airbnb 的文档中，我找不到“省略扩展名，这样做您还需要执行其他步骤来解析您的文件……使用 Webpack 遵循此链接”。只是觉得 imo 文档不完整。