javascript eslint“解析错误：JSX中的意外标记{”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53609457/
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
eslint "parsing error: Unexpected token {" in JSX
提问by YouHoGeon
const title = 'My Minimal React Webpack Babel Setups';
const App = () => (<div><b>{title}</b><img src={img} /></div>)
This code occurs an error "ESLint Parsing Error: Unexpected token {"
此代码发生错误“ESLint Parsing Error: Unexpected token {”
my .eslintrc.jsfile is like that
我的.eslintrc.js文件就是这样
module.exports = {
"extends": "airbnb"
};
and I install the packages like that
我安装了这样的软件包
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
I thought that ESLint can read JSX because the token "<" doesn't occur error. (When I change the extends section in .eslintrc.js file to "airbnb-base", It occurs error "ESLint Parsing Error: Unexpected token <. But now, the token "<" doesn't occur error)
我认为 ESLint 可以读取 JSX 因为令牌“<”不会发生错误。（当我将 .eslintrc.js 文件中的 extends 部分更改为“airbnb-base”时，会出现错误“ESLint Parsing Error: Unexpected token <。但现在，令牌“<”不会出现错误）
However, my ESLint cannot read the JSX syntax line {variable}
但是，我的 ESLint 无法读取 JSX 语法行 {variable}
回答by Brian Le
Eslint on its own is not good enough. First install babel-eslint:
Eslint 本身还不够好。首先安装babel-eslint：
npm install --save-dev babel-eslint
Or with yarn:
或者用纱线：
yarn add -D babel-eslint
Then add to your .eslintrcfile:
然后添加到您的.eslintrc文件中：
"parser": "babel-eslint"
You might want to install eslint-plugin-babelas well, but I believe this is not needed
您可能也想安装eslint-plugin-babel，但我相信这不是必需的
回答by java-man-script
I've got the same error on Next.js.
我在Next.js上遇到了同样的错误。
These steps solved my issue:
这些步骤解决了我的问题：
1) Install babel-eslint:
1) 安装babel-eslint：
npm install --save-dev babel-eslint
2) Add babel-eslintas a parserto eslint config
2) 将babel-eslint作为解析器添加到 eslint 配置
"parser": "babel-eslint"
My eslint config looks like this (.eslintrc):
我的 eslint 配置看起来像这样（.eslintrc）：
{
"env": {
"browser": true,
"es6": true,
"commonjs": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"react/react-in-jsx-scope": 0,
"no-console": 1
}
}
回答by Eponyme Web
My .eslintr has this extra configuration to enable JSX
我的 .eslintr 有这个额外的配置来启用 JSX
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
