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”

回答

相关问题