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文件中。