[英]How do I configure ESLint to allow fat arrow class methods
ESLint is throwing a Parsing error: Unexpected token =
error when I try to lint my Es6 classes. ESLint 抛出
Parsing error: Unexpected token =
error when I try to lint Es6 classes。 What configuration parameter am I missing to enable fat arrow class methods in eslint?我缺少什么配置参数来启用 eslint 中的胖箭头类方法?
Sample class:示例类:
class App extends React.Component{
...
handleClick = (evt) => {
...
}
}
.eslint .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"
],
}
}
If you want to use experimental features (such as arrows as class methods) you need to use babel-eslint
as a parser.如果要使用实验性功能(例如箭头作为类方法),则需要使用
babel-eslint
作为解析器。 Default parser (Espree) doesn't support experimental features.默认解析器 (Espree) 不支持实验性功能。
First install babel-eslint
:首先安装
babel-eslint
:
npm i -D babel-eslint
Then add the following to your .eslintrc.json
file:然后将以下内容添加到您的
.eslintrc.json
文件中:
"parser": "babel-eslint"
First install these plugins:首先安装这些插件:
npm i -D babel-eslint eslint-plugin-babel
Then add these settings to your eslint config file:然后将这些设置添加到您的 eslint 配置文件中:
.eslintrc.json .eslintrc.json
{
"plugins": [ "babel" ],
"parser": "babel-eslint",
"rules": {
"no-invalid-this": 0,
"babel/no-invalid-this": 1,
}
}
This way you can use fat arrow class methods plus you will not get any no-invalid-this
errors from eslint.这样你就可以使用粗箭头类方法,而且你不会从 eslint 得到任何
no-invalid-this
错误。
Happy codin'快乐编码
From what I read in the error message Parsing error: Unexpected token =
it looks like more a parser error than linter one.从我在错误消息
Parsing error: Unexpected token =
读到的内容,它看起来更像是解析器错误而不是 linter 错误。
Assuming you are using Babel as your JavaScript compiler/transpiler and babel-eslint
as your ESLint parser, chances are that it is Babel complaining about the syntax, not ESLint.假设你使用Babel作为你的 JavaScript 编译器/转译器和
babel-eslint
作为你的 ESLint 解析器,很可能是 Babel 抱怨语法,而不是 ESLint。
The issue is not about the arrow functions but something more experimental (ES7??) that I think it is called property initializer orclass instance field (or both :) ).问题不在于箭头函数,而是一些更具实验性的(ES7??),我认为它被称为属性初始值设定项或类实例字段(或两者:))。
If you want to use this new syntax/feature you need to enable preset-stage-1
in Babel.如果你想使用这个新的语法/特性,你需要在 Babel 中启用
preset-stage-1
。 This preset includes the syntax-class-properties
plugin that allows that syntax.此预设包括允许该语法的
syntax-class-properties
插件。
Summing up:加起来:
Install babel preset:安装 babel 预设:
npm install babel-preset-stage-1
Add this preset to the list of your presets (I suppose you are already using es2015
and react
presets), either in your .babelrc
or in your babel-loader
query field if you are using webpack.将此预设添加到您的预设列表中(我想您已经在使用
es2015
和react
预设),无论是在您的.babelrc
还是在您使用 webpack 的babel-loader
查询字段中。
"presets": ["es2015", "stage-1", "react"]
I came across the same problem today我今天遇到了同样的问题
and @dreyescat 's answer works for me. @dreyescat 的答案对我有用。
By default, babel uses 3 presets: es2015
, react
, stage-2
默认情况下,babel 使用 3 个预设:
es2015
、 react
、 stage-2
Screenshot with "Parsing error: Unexpected token ="带有“解析错误:意外标记 =”的屏幕截图
Then if you also select the stage-1
preset, the error is gone然后,如果您还选择了
stage-1
预设,则错误消失了
Screenshot with no error没有错误的截图
You can test it on the bebeljs.io site yourself你可以自己在bebeljs.io网站上测试一下
My problem was eslint was using a globally installed version instead of my local version, and the global eslint can't access my locally installed babel-eslint parser .我的问题是 eslint 使用的是全局安装的版本而不是我的本地版本,并且全局 eslint 无法访问我本地安装的 babel-eslint parser 。 Further, since my globally installed eslint was installed on a different version of node, removing it was non-trivial.
此外,由于我全局安装的 eslint 安装在不同版本的节点上,因此删除它并非易事。
babel-eslint
following @spencer.sm's answer for your local eslint.babel-eslint
eslint。eslint .
eslint .
是否得到不同的输出eslint .
and npx eslint .
npx eslint .
. For most people, the following commands should uninstall eslint with npm ( uninstall global package with npm ) and yarn ( uninstall global package with yarn ):对于大多数人来说,以下命令应该使用 npm 卸载 eslint(使用 npm卸载全局包)和 yarn( 使用 yarn 卸载全局包):
# npm
npm uninstall -g eslint
npm uninstall eslint
# yarn
yarn global remove eslint
Next, run npx eslint .
接下来,运行
npx eslint .
to see if things work.看看事情是否奏效。 If it doesn't, which it didn't for me, you need to take an extra step to remove the globally installed eslint.
如果不是,这对我来说不是,您需要采取额外的步骤来删除全局安装的 eslint。
From this answer , I learned that I had installed eslint on a system version of Node instead of my current version of Node (I use nvm).从这个答案中,我了解到我在 Node 的系统版本而不是我当前版本的 Node 上安装了 eslint(我使用的是 nvm)。 Follow these simple steps to remove the global eslint and you should be good to go!
按照这些简单的步骤删除全局 eslint,你应该很高兴!
您的示例不是有效的 ES6,因此无法配置 eslint 以允许它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.