Javascript 如何配置 ESLint 以允许粗箭头类方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34244888/
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
How do I configure ESLint to allow fat arrow class methods
提问by CodeOcelot
ESLint is throwing a Parsing error: Unexpected token =error when I try to lint my Es6 classes. What configuration parameter am I missing to enable fat arrow class methods in eslint?
Parsing error: Unexpected token =当我尝试 lint 我的 Es6 类时，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"
],
}
}
采纳答案by Ilya Volodin
If you want to use experimental features (such as arrows as class methods) you need to use babel-eslintas a parser. Default parser (Espree) doesn't support experimental features.
如果要使用实验性功能（例如箭头作为类方法），则需要babel-eslint用作解析器。默认解析器 (Espree) 不支持实验性功能。
回答by spencer.sm
First install babel-eslint:
首先安装babel-eslint：
npm i -D babel-eslint
Then add the following to your .eslintrc.jsonfile:
然后将以下内容添加到您的.eslintrc.json文件中：
"parser": "babel-eslint"
回答by dreyescat
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 Babelas your JavaScript compiler/transpiler and babel-eslintas 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 initializeror class instance field(or both :) ).
问题不在于箭头函数，而是一些更具实验性的（ES7??），我认为它被称为属性初始值设定项或类实例字段（或两者：））。
If you want to use this new syntax/feature you need to enable preset-stage-1in Babel. This preset includes the syntax-class-propertiesplugin that allows that syntax.
如果你想使用这个新的语法/特性，你需要preset-stage-1在 Babel 中启用。此预设包括syntax-class-properties允许该语法的插件。
Summing up:
加起来：
Install babel preset:
npm install babel-preset-stage-1Add this preset to the list of your presets (I suppose you are already using
es2015andreactpresets), either in your.babelrcor in yourbabel-loaderquery field if you are using webpack."presets": ["es2015", "stage-1", "react"]
安装 babel 预设：
npm install babel-preset-stage-1将此预设添加到您的预设列表中（我想您已经在使用
es2015和react预设），如果您使用 webpack ，则可以在您的.babelrc或您的babel-loader查询字段中。"presets": ["es2015", "stage-1", "react"]
回答by webpreneur
First install these plugins:
首先安装这些插件：
npm i -D babel-eslint eslint-plugin-babel
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-thiserrors from eslint.
这样你就可以使用no-invalid-this粗箭头类方法，而且你不会从 eslint得到任何错误。
Happy codin'
快乐编码
回答by Alex Gu
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-1preset, the error is gone
然后，如果您还选择了stage-1预设，则错误消失了
You can test it on the bebeljs.io site yourself
你可以自己在bebeljs.io网站上测试一下
回答by Scott Weinstein
Your sample isn't valid ES6, so there's no way to configure eslint to allow it
您的示例不是有效的 ES6，因此无法配置 eslint 以允许它
