如何使用Visual Studio Code根据babel/ES7 stage-0规则对JavaScript文件进行lint?
我只需要对代码进行lint,我已经有webpack将Js文件转码。
如何使用Visual Studio Code根据babel/ES7 stage-0规则对JavaScript文件进行lint?
我只需要对代码进行lint,我已经有webpack将Js文件转码。
npm install -g eslint
npm install --save-dev babel-eslint
npm install --save-dev eslint-plugin-react
.eslintrc
文件,这是我的配置:{
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true,
"jquery": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"arrowFunctions": true,
"binaryLiterals": true,
"blockBindings": true,
"classes": true,
"defaultParams": true,
"destructuring": true,
"forOf": true,
"generators": true,
"modules": true,
"objectLiteralComputedProperties": true,
"objectLiteralDuplicateProperties": true,
"objectLiteralShorthandMethods": true,
"objectLiteralShorthandProperties": true,
"octalLiterals": true,
"regexUFlag": true,
"regexYFlag": true,
"spread": true,
"superInFunctions": true,
"templateStrings": true,
"unicodeCodePointEscapes": true,
"globalReturn": true,
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"plugins": [
"react"
],
"rules": {
"strict": 0
}
}
settings.json
),并写入:{
//disable default javascript validator replaced by eslint
"javascript.validate.enable" : false
}
现在,你的ES7代码应该可以按照所需进行linting。如果VSC无法读取eslint配置文件,则可以在VSC控制台中查看问题(Ctrls ShiftU)。
因此,ES7代码(例如对象中的扩展运算符)将得到很好的linting:
附注:可能我的.eslintrc
对于ES7 linting使用了一些无用的额外数据,因此可以自由删除它 :)
由于ESLint扩展可以使用babel-eslint,因此请在用户/工作区设置中安装它并关闭vscode内置的代码检查。
以下是使用Create React App的eslint配置+可选链的示例设置:
.vscode/settings.json
:
{
"javascript.validate.enable": false,
"eslint.enable": true
}
.eslintrc
:
{
"extends": "react-app"
"parser": "babel-eslint",
}
.babelrc
:
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
npm install --save-dev eslint-config-react-app babel-eslint@10.x @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@1.5.0 @babel/core @babel/plugin-proposal-optional-chaining
对于那些刚开始接触React或babel的人,除非你真的在使用Create React App,否则你需要更多的babel配置。请将上述内容仅用作补充信息,并在需要帮助时进行评论。