[英]ESLint Parsing error: Unexpected token
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? .... .... 有什么问题?
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 当前的解析能力与 JavaScript ES6~7 的持续变化不兼容,导致 ESLint 解析中出现意外的令牌错误。
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.在 ES6 类中,因为 ESLint 目前无法自行解析它。 This particular situation will throw an error of:
这种特殊情况会引发以下错误:
error Parsing error: Unexpected token =
The solution is to have ESLint parsed by a compatible parser, ie @babel/eslint-parser or babel-eslint for babel version below v7.解决方案是让 ESLint 由兼容的解析器解析,即 @babel/eslint-parser 或 babel-eslint 用于 v7 以下的 babel 版本。
just add:只需添加:
"parser": "@babel/eslint-parser"
to your .eslintrc
file and run npm install @babel/eslint-parser --save-dev
or yarn add -D @babel/eslint-parser
.到您的
.eslintrc
文件并运行npm install @babel/eslint-parser --save-dev
或yarn add -D @babel/eslint-parser
。
Please note that as the new Context API starting from React ^16.3
has some important changes, please refer to the official guide .请注意,由于从
React ^16.3
开始的新 Context API有一些重要的变化,请参考官方指南。
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 . ESLint 1.x 本身不支持扩展运算符,解决此问题的一种方法是使用babel-eslint 解析器。 The latest installation and usage instructions are on the project readme.
最新的安装和使用说明在项目自述文件中。
"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"
}
}
}
In my case (im using Firebase Cloud Functions) i opened .eslintrc.json
and changed:在我的情况下(我使用 Firebase Cloud Functions)我打开
.eslintrc.json
并更改:
"parserOptions": {
// Required for certain syntax usages
"ecmaVersion": 2017
},
to:至:
"parserOptions": {
// Required for certain syntax usages
"ecmaVersion": 2020
},
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"
}
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
}
}
I'm using eslint
for cloud-functions (development env: flutter 2.2.3).我将
eslint
用于云功能(开发环境:flutter 2.2.3)。
In my case .eslintrc.json
does not exist so I had to update the .eslintrc.js
file by including parserOptions: { "ecmaVersion": 2020, },
property at the end of file.在我的情况下
.eslintrc.json
不存在,所以我必须通过在文件末尾包含parserOptions: { "ecmaVersion": 2020, },
属性来更新.eslintrc.js
文件。 My updated .eslintrc.js
file looks like this:我更新
.eslintrc.js
文件如下所示:
module.exports = {
root: true,
env: {
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"google",
],
rules: {
quotes: ["error", "double"],
},
// Newly added property
parserOptions: {
"ecmaVersion": 2020,
},
};
Just for the record, if you are using eslint-plugin-vue , the correct place to add 'parser': 'babel-eslint'
is inside parserOptions
param.仅作记录,如果您使用的是eslint-plugin-vue ,则添加
'parser': 'babel-eslint'
的正确位置在parserOptions
参数内。
'parserOptions': {
'parser': 'babel-eslint',
'ecmaVersion': 2018,
'sourceType': 'module'
}
https://eslint.vuejs.org/user-guide/#faq https://eslint.vuejs.org/user-guide/#faq
I solved this problem by setting this in .eslintrc.json file:我通过在.eslintrc.json文件中设置这个解决了这个问题:
"extends": [
...,
"plugin:prettier/recommended"
]
ecmaVersion - set to 3, 5 (default), 6, 7, 8, 9, 10, 11, or 12 to specify the version of ECMAScript syntax you want to use. ecmaVersion - 设置为 3、5(默认)、6、7、8、9、10、11 或 12 以指定您要使用的 ECMAScript 语法的版本。 You can also set to 2015 (same as 6), 2016 (same as 7), 2017 (same as 8), 2018 (same as 9), 2019 (same as 10), 2020 (same as 11), or 2021 (same as 12) to use the year-based naming.
也可以设置为2015(同6)、2016(同7)、2017(同8)、2018(同9)、2019(同10)、2020(同11)或2021(同 12) 使用基于年份的命名。
https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options
For React + Firebase Functions对于React + Firebase 函数
Go to : functions -> .eslintrc.js转到:函数-> .eslintrc.js
Add it - parserOptions: { ecmaVersion: 8, },添加它 - parserOptions: { ecmaVersion: 8, },
module.exports = {
root: true,
env: {
es6: true,
node: true,
},
parserOptions: {
ecmaVersion: 8,
},
extends: ["eslint:recommended", "google"],
rules: {
quotes: ["error", "double"],
},
};
If you have got a pre-commit task with husky running eslint
, please continue reading.如果你有 husky 运行
eslint
的 pre-commit 任务,请继续阅读。 I tried most of the answers about parserOptions
and parser
values where my actual issue was about the node version I was using.我尝试了大多数关于
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 nvm
in my system).我当前的节点版本是 12.0.0,但是 husky 以某种方式使用了我的 nvm 默认版本(即使我的系统中没有
nvm
)。 This seems to be an issue with husky itself.这似乎是哈士奇本身的问题。 So:
所以:
$HOME/.nvm
folder which was not deleted when I removed nvm
earlier.nvm
时没有删除的$HOME/.nvm
文件夹。I was facing the issue despite implementing all the above solutions.尽管实施了上述所有解决方案,我仍然面临着这个问题。 When I downgraded the eslint version, it started working
当我降级 eslint 版本时,它开始工作
I'm using typescript and I solve this error change
parser
我正在使用打字稿,我解决了这个错误更改
parser
....
"prettier/prettier": [
"error",
{
.....
"parser": "typescript",
.....
}
],
....
.
.
{
"parserOptions": {
"ecmaVersion": 2020
},
.
.
Will do the trick.会成功的。
I had to update the ecmaVersion
to "latest"
我必须将
ecmaVersion
更新为"latest"
"parserOptions": {
"parser": "@babel/eslint-parser",
"sourceType": "module",
"ecmaVersion": "latest",
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
},
"requireConfigFile": false
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.