当我尝试lint我的Es6类时,ESLint正在抛出Parsing error: Unexpected token =
错误。在eslint中启用胖箭头类方法我缺少什么配置参数?
样本类:
class App extends React.Component{
...
handleClick = (evt) => {
...
}
}
.eslint
{
"ecmaFeatures": {
"jsx": true,
"modules":true,
"arrowFunctions":true,
"classes":true,
"spread":true,
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"strict": 0,
"no-underscore-dangle": 0,
"quotes": [
2,
"single"
],
}
}
如果要使用实验性功能(例如箭头作为类方法),则需要使用babel-eslint
作为解析器。默认解析器(Espree)不支持实验性功能。
从我在错误消息Parsing error: Unexpected token =
中读到的内容看起来更像是一个解析器错误而不是linter一个。
假设您使用Babel作为JavaScript编译器/转换程序并使用babel-eslint
作为ESLint解析器,可能是Babel抱怨语法,而不是ESLint。
问题不在于箭头功能,而是更具实验性的(ES7 ??),我认为它被称为property initializer或class instance field(或两者:))。
如果要使用此新语法/功能,则需要在Babel中启用preset-stage-1
。此预设包括允许该语法的syntax-class-properties
插件。
加起来:
npm install babel-preset-stage-1
es2015
和react
预设),在.babelrc
或babel-loader
查询字段中。
"presets": ["es2015", "stage-1", "react"]
首先安装babel-eslint
:
npm i -D babel-eslint
然后将以下内容添加到.eslintrc.json
文件中:
"parser": "babel-eslint"
我今天遇到了同样的问题
和@dreyescat的回答对我有用。
默认情况下,babel使用3个预设:es2015
,react
,stage-2
Screenshot with "Parsing error: Unexpected token ="
然后,如果您还选择stage-1
preset,则错误消失
您可以自己在bebeljs.io网站上进行测试
首先安装这些插件:
npm i -D babel-eslint eslint-plugin-babel
然后将这些设置添加到您的eslint配置文件中:
.eslintrc.json
{
"plugins": [ "babel" ],
"parser": "babel-eslint",
"rules": {
"no-invalid-this": 0,
"babel/no-invalid-this": 1,
}
}
这样你可以使用胖箭头类方法加上你不会从eslint得到任何no-invalid-this
错误。
快乐的鳕鱼
您的样本无效ES6,因此无法配置eslint以允许它