Javascript ESLint 解析错误：意外的令牌
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36001552/
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
提问by DongYao
With this code:
使用此代码：
import React from 'react';
import { Link } from 'react-router';
import { View, NavBar } from 'amazeui-touch';
import * as Pages from '../components';
const { Home, ...Components } = Pages;
I get this eslint error:
我收到这个 eslint 错误：
7:16 error Parsing error: Unexpected token .. Why?
Here is my eslint config:
这是我的 eslint 配置：
{
"extends": "airbnb",
"rules": {
/* JSX */
"react/prop-types": [1, {
"ignore": ["className", "children", "location", "params", "location*"]
}],
"no-param-reassign": [0, {
"props": false
}],
"prefer-rest-params": 1,
"arrow-body-style": 0,
"prefer-template": 0,
"react/prefer-stateless-function": 1,
"react/jsx-no-bind": [0, {
"ignoreRefs": false,
"allowArrowFunctions": false,
"allowBind": true
}],
}
}
.... .... What's the problem?
.... .... 有什么问题？
回答by JaysQubeXon
Unexpected token errors in ESLint parsing occur due to incompatibility between your development environment and ESLint's current parsing capabilities with the ongoing changes with JavaScripts ES6~7.
ESLint 解析中出现意外的令牌错误是由于您的开发环境与 ESLint 当前解析功能与 JavaScript ES6~7 的持续变化不兼容。
Adding the "parserOptions" property to your .eslintrc is no longer enough for particular situations, such as using
将“parserOptions”属性添加到您的 .eslintrc 已不再适用于特定情况，例如使用
static contextTypes = { ... } /* react */
in ES6 classes as ESLint is currently unable to parse it on its own. This particular situation will throw an error of:
在 ES6 类中，因为 ESLint 目前无法自行解析它。这种特殊情况会抛出以下错误：
error Parsing error: Unexpected token =
The solution is to have ESLint parsed by a compatible parser. babel-eslint is a package that saved me recently after reading this page and i decided to add this as an alternative solution for anyone coming later.
解决方案是让 ESLint 由兼容的解析器解析。babel-eslint 是最近在阅读此页面后拯救了我的一个包，我决定将其添加为以后任何人的替代解决方案。
just add:
只需添加：
"parser": "babel-eslint"
to your .eslintrcfile and run npm install babel-eslint --save-devor yarn add -D babel-eslint.
到您的.eslintrc文件并运行npm install babel-eslint --save-dev或yarn add -D babel-eslint。
Please note that as the new Context APIstarting from React ^16.3has some important changes, please refer to the official guide.
请注意，作为新的上下文API从开始React ^16.3有一些重要的变化，请参考官方指南。
回答by Kevan Ahlquist
ESLint 2.x experimentally supports ObjectRestSpread syntax, you can enable it by adding the following to your .eslintrc: docs
ESLint 2.x 实验性地支持 ObjectRestSpread 语法，您可以通过将以下内容添加到您的.eslintrc: docs来启用它
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
},
ESLint 1.x doesn't natively support the spread operator, one way to get around this is using the babel-eslint parser. The latest installation and usage instructions are on the project readme.
ESLint 1.x 本身不支持扩展运算符，解决此问题的一种方法是使用babel-eslint 解析器。最新的安装和使用说明在项目自述文件中。
回答by Kevan Ahlquist
"parser": "babel-eslint"helped me to fix the issue
"parser": "babel-eslint"帮我解决了这个问题
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"plugins": [
"react"
],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"rules": {
"comma-dangle": 0,
"react/jsx-uses-vars": 1,
"react/display-name": 1,
"no-unused-vars": "warn",
"no-console": 1,
"no-unexpected-multiline": "warn"
},
"settings": {
"react": {
"pragma": "React",
"version": "15.6.1"
}
}
}
回答by Joee
I solved this issue by First, installing babel-eslint using npm
我首先解决了这个问题，使用 npm 安装 babel-eslint
npm install babel-eslint --save-dev
Secondly, add this configuration in .eslintrc file
其次，在.eslintrc文件中添加这个配置
{
"parser":"babel-eslint"
}
回答by Alvin Konda
In my case (im using Firebase Cloud Functions) i opened .eslintrc.jsonand changed:
在我的情况下（我使用 Firebase Cloud Functions），我打开.eslintrc.json并更改了：
"parserOptions": {
// Required for certain syntax usages
"ecmaVersion": 2017
},
to:
到：
"parserOptions": {
// Required for certain syntax usages
"ecmaVersion": 2018
},
回答by Vojtech Ruzicka
Originally, the solution was to provide the following config as object destructuring used to be an experimental feature and not supported by default:
最初，解决方案是提供以下配置，因为对象解构曾经是一项实验性功能，默认情况下不支持：
{
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
}
Since version 5, this option has been deprecated.
从第 5 版开始，此选项已被弃用。
Now it is enough just to declare a version of ES, which is new enough:
现在只需声明一个 ES 版本就足够了，它足够新：
{
"parserOptions": {
"ecmaVersion": 2018
}
}
回答by Asim K T
If you have got a pre-commit task with husky running eslint, please continue reading. I tried most of the answers about parserOptionsand parservalues where my actual issue was about the node version I was using.
如果您有 husky running 的预提交任务eslint，请继续阅读。我尝试了大部分关于我的实际问题是关于我使用的节点版本的答案parserOptions和parser值。
My current node version was 12.0.0, but husky was using my nvm default version somehow (even though I didn't have nvmin my system). This seems to be an issue with huskyitself. So:
我当前的节点版本是 12.0.0，但 husky 以某种方式使用了我的 nvm 默认版本（即使nvm我的系统中没有）。这似乎是哈士奇本身的问题。所以：
- I deleted
$HOME/.nvmfolderwhich was not deleted when I removednvmearlier. - Verified node is the latest and did proper parser options.
- It started working!
- 我删除了
$HOME/.nvmnvm之前删除时未删除的文件夹。 - 经验证的节点是最新的并且做了适当的解析器选项。
- 它开始工作了！
回答by Cristiano
Just for the record, if you are using eslint-plugin-vue, the correct place to add 'parser': 'babel-eslint'is inside parserOptionsparam.
只是为了记录，如果你使用eslint-plugin-vue，正确的添加位置'parser': 'babel-eslint'是在parserOptionsparam 中。
'parserOptions': {
'parser': 'babel-eslint',
'ecmaVersion': 2018,
'sourceType': 'module'
}
