React ESLint配置「意外的文件擴展名JSX」

運行Airbnb的Eslint配置並使用.jsx擴展名運行時遇到問題。React 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"] 
    } 
}

但仍然收到相同的錯誤。還有什麼我失蹤的？

依賴

「eslint」：「^ 4.10.0」，
「eslint-配置-的Airbnb」：「^ 16.1.0」，
「eslint-plugin-導入「：」^ 2.8.0「，
」eslint-插件-JSX-A11Y「：」^ 6.0.2「，
」eslint-插件反應「：」^ 7.4.0「，

來源

2017-11-03 Full-Hybrid

上import語句刪除擴展：

import App from './components/App';

從而導致無法解決的錯誤。這然後把我帶到另一個SO: Webpack Can't find module if file named jsx續寫resolve對象在我的webpack.config

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

來源

2017-11-03 23:42:37

我很肯定你在指責錯誤的規則。你居然打這一個從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保存在帶有'.jsx'或'.js'擴展名的文件中，我將避免這種擴展。最好將JSX保存在.jsx文件中。

來源

2017-11-03 23:55:16 dubbha

我不想寫出符合Airbnb樣式的擴展名，這些擴展名聲明省略它們。這很好，但問題是，如果我省略了擴展名，那麼路徑將無法解析。然後導致如何解決解析路徑錯誤。原來你可以用一個解析對象來配置Webpack來處理'.jsx'。在Airbnb的文檔中，我無法找到「省略擴展名，並且在這樣做時，您還需要執行其他步驟來解決您的文件...使用Webpack請點擊此鏈接」。感覺就像不完整的文檔imo。 –

React ESLint配置「意外的文件擴展名JSX」

回答

相關問題