不允许在扩展名为“ . js”的文件中使用 eslint-config-airbnb

我已经安装了 Eslint-config-airbnb，它应该为 React 预先配置 ESLINT:

我们的默认导出包含所有的 ESLint 规则，包括 ECMAScript 6 + 和 React。它需要 eslint，eslint-plugin-import, Eslint-plugin-response 和 eslint-plugin-jsx-a11y。

我的 .eslintrc扩展了它的配置:

{ "extends": "eslint-config-airbnb",
"env": {
"browser": true,
"node": true,
"mocha": true
},
"rules": {
"new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
"react/no-multi-comp": 0,
"import/default": 0,
"import/no-duplicates": 0,
"import/named": 0,
"import/namespace": 0,
"import/no-unresolved": 0,
"import/no-named-as-default": 2,
"comma-dangle": 0,  // not sure why airbnb turned this on. gross!
"indent": [2, 2, {"SwitchCase": 1}],
"no-console": 0,
"no-alert": 0,
"linebreak-style": 0
},
"plugins": [
"react", "import"
],
"settings": {
"import/parser": "babel-eslint",
"import/resolve": {
"moduleDirectory": ["node_modules", "src"]
}
},
"globals": {
"__DEVELOPMENT__": true,
"__CLIENT__": true,
"__SERVER__": true,
"__DISABLE_SSR__": true,
"__DEVTOOLS__": true,
"socket": true,
"webpackIsomorphicTools": true
}
}

不幸的是，当我在.js 文件中添加 React JSX 代码时，我得到了以下错误:

 error  JSX not allowed in files with extension '.js'              react/jsx-filename-extension

如前所述，eslint-config-airbnb 配置的响应不是已经支持了 JSX 吗？

应该做些什么来消除这个错误？

114015 次浏览
小开
最佳答案

要么将文件扩展名更改为上述 .jsx，要么禁用 文件名-扩展名规则。可以将以下内容添加到配置中，以允许对 JSX 进行 .js扩展。

"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
小开

对于 马丁的答案的阐述，似乎是不可能的，目前，使用 JSX的反应原生。公关被创造出来，但是由于担心破碎和像 index.ios.jsx这样的东西的未知后果而恢复了。我不知道 AirBnb 是如何工作的，或者他们是否这样做，但我基本上使用了与马丁相同的 rules块。

小开

这是我的工作，希望能帮到你。

  1. 在 .eslintrc中禁用 jsx-filename-扩展名:

    “规则”: { “ response/jsx-filename-extension”: [0] }

  2. 在 webpack.config.js:

    解决: 扩展名: [’. js’,’. jsx’] } ，

小开

如果不想更改文件扩展名，可以导出一个返回 jsx 的函数，然后在 js 文件中导入并调用该函数。

// greeter.jsx


import React from 'react';


export default name => (
<div>
{`Hello, ${name}!`}
</div>
);

然后

// index.js


import ReactDOM from 'react-dom';
import greeter from './components/greeter';


const main = document.getElementsByTagName('main')[0];


ReactDOM.render(greeter('World'), main);
小开

如果这对你不起作用，就叫我笨蛋

    "rules": {
"react/jsx-filename-extension": [0],
"import/extensions": "off"
}
小开

以下是 反应文件:

每个 JSX 元素只是调用 React.createElement (组件、道具、 ... 子元素)的语法糖。

以下是 Airbnb 的时尚指南:

不要使用 React.createElement 除非你从一个不是 JSX 的文件初始化应用程序。

你可以这样做:

    //index.js
const app = React.createElement(App);
ReactDOM.render(app, document.getElementById('root'));
小开

对于将来想要在 .js文件中编写 jsx 的读者:

  1. 安装 npm i react react-dom，即使你的 好好想想你不写反应。
  2. 安装 npm i -D @babel/preset-react
  3. 在 babel 配置中: plugins: ['@babel/plugin-transform-react-jsx']
  4. 您应该使用 babel-loader为 /\.jsx?$/文件设置 module.rules(因此也需要安装 npm i -D babel-loader)

提交答案