Javascript 带有 eslint-config-airbnb 的扩展名为“.js”的文件中不允许使用 JSX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43031126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSX not allowed in files with extension ' .js' with eslint-config-airbnb
提问by Mendes
I've installed eslint-config-airbnbthat is supposed to pre configure ESLINT for React:
我已经安装了eslint-config-airbnb，它应该为 React 预配置 ESLINT：
Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y.
我们的默认导出包含我们所有的 ESLint 规则，包括 ECMAScript 6+ 和 React。它需要 eslint、eslint-plugin-import、eslint-plugin-react 和 eslint-plugin-jsx-a11y。
My .eslintrcextending its configuration:
我.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
}
}
Unfortunatelly I'm getting the following error when linting a .js file with React JSX code inside it:
不幸的是，我在使用 React JSX 代码整理 .js 文件时收到以下错误：
error JSX not allowed in files with extension '.js' react/jsx-filename-extension
Wasn't eslint-config-airbnb configured react to support JSX already, as stated ?
如前所述，eslint-config-airbnb 不是已经配置为支持 JSX 了吗？
What should be done to remove that error ?
应该怎么做才能消除该错误？
回答by Martin Mihaylov
Either change your file extensions to .jsxas mentioned or disable the jsx-filename-extensionrule. You can add the following to your config to allow .jsextensions for JSX.
将您的文件扩展名更改.jsx为如上所述或禁用jsx-filename-extension规则。您可以将以下内容添加到您的配置中以允许.js扩展 JSX。
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
回答by Willard Wong
It's work for me. hope to help you.
这对我有用。希望能帮到你。
disable jsx-filename-extension in
.eslintrc:"rules": { "react/jsx-filename-extension": [0] }
in
webpack.config.js:resolve: { extensions: ['.js', '.jsx'] },
在以下位置禁用 jsx-filename-extension
.eslintrc：“规则”：{“反应/jsx-文件名-扩展名”：[0]}
在
webpack.config.js：解析：{ 扩展名：['.js', '.jsx'] },
回答by M Falanga
If you don't want to change your file extension, you can export a function that returns jsx, and then import and call that function in your js file.
如果不想更改文件扩展名，可以导出返回 jsx 的函数，然后在 js 文件中导入并调用该函数。
// greeter.jsx
import React from 'react';
export default name => (
<div>
{`Hello, ${name}!`}
</div>
);
and then
进而
// index.js
import ReactDOM from 'react-dom';
import greeter from './components/greeter';
const main = document.getElementsByTagName('main')[0];
ReactDOM.render(greeter('World'), main);
回答by droid
Call me a dummy if it does not work for you
如果它不适合你，请叫我傻瓜
"rules": {
"react/jsx-filename-extension": [0],
"import/extensions": "off"
}
回答by fjplaurr
Following React documentation:
以下React 文档：
Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).
每个 JSX 元素只是用于调用 React.createElement(component, props, ...children) 的语法糖。
Following Airbnb's style guide:
遵循Airbnb的风格指南：
Do not use React.createElement unless you're initializing the app from a file that is not JSX.
不要使用 React.createElement ，除非你从一个不是 JSX 的文件初始化应用程序。
You could do this:
你可以这样做：
//index.js
const app = React.createElement(App);
ReactDOM.render(app, document.getElementById('root'));
回答by Adam burdette
To expound on Martin'sanswer, it seems that it is not possible, currently, to use JSXin React Native. A PRwas created but reverted due to concerns about fragmentation and unknown consequences of having things like index.ios.jsx. I'm not sure how AirBnb works around this or if they do, but I have used basically the same rulesblock as Martin.
为了阐述Martin 的回答，目前似乎不可能JSX在 React Native 中使用。 PR已创建，但由于担心碎片化和具有诸如index.ios.jsx. 我不确定 AirBnb 是如何解决这个问题的，或者他们是否这样做，但我使用了与rulesMartin基本相同的块。
