vscode-lint
是一个集成Stylelint和Eslint的VSCode配置工具,提供css/sass/scss/less、js/ts、react和vue的代码校验功能
vscode-lint用于规范团队代码风格
和校验团队代码语法
,增加整个项目的可维护性和接入性,减少无用代码和混乱码的产生。它的根本目的是一次安装全局使用,统一项目的代码风格规范
和代码语法校验
,养成规范的码字习惯,减少不必要的错误和隐患。
在此标注两个关键字,用于以下叙述。
Eslint
:表示VSCode
里的插件eslint
:表示NPM
里的模块
安装
npm i -g vscode-lint
安装失败
- 切换NPM镜像为淘宝镜像:
npm config set registry https://registry.npm.taobao.org/
- 重新执行安装命令:
npm i -g vscode-lint
配置
- 打开
VSCode
- 选择左边
工具栏
的插件
,搜索并安装Stylelint
和Eslint
,安装完成后重启VSCode
- 选择
文件 → 首选项 → 设置
,设置
里可选用户
和工作区
- 用户:配置生效后会作用于全局项目(
若大部分项目都是单一的React应用或Vue应用推荐使用全局配置
) - 工作区:配置生效后只会作用于当前打开项目
- 用户:配置生效后会作用于全局项目(
- 点击
设置
右上角的中间图标打开设置(json)
,对应文件是settings.json
- 插入以下配置:若在
用户
选项下插入以下配置,遇到别的项目需要覆盖配置时在工作区
选项下插入eslint.options.configFile
即可
{
"css.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"eslint.nodePath": "path/vscode-lint/node_modules",
"eslint.options": {
"configFile": "path/vscode-lint/eslintrc.js"
},
"less.validate": false,
"scss.validate": false,
"stylelint.configBasedir": "path/vscode-lint",
"stylelint.configOverrides": {
"extends": "stylelint-config-standard",
"rules": {
"at-rule-empty-line-before": "never",
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"content",
"each",
"error",
"extend",
"for",
"function",
"if",
"include",
"mixin",
"return",
"while"
]
}
],
"color-hex-case": "lower",
"comment-empty-line-before": "never",
"declaration-colon-newline-after": null,
"declaration-empty-line-before": "never",
"function-linear-gradient-no-nonstandard-direction": null,
"indentation": "tab",
"no-descending-specificity": null,
"no-missing-end-of-source-newline": null,
"no-empty-source": null,
"number-leading-zero": "never",
"rule-empty-line-before": "never"
}
}
}
以上配置的path
为vscode-lint
模块所在的NPM根目录,可执行npm config get prefix
获取NPM根目录并替换path
。
- 假设执行
npm config get prefix
获取的NPM根目录为E:/Node/prefix/node_modules
- 将上述配置的
path
替换为E:/Node/prefix/node_modules
疑问
更新eslint到v6+就会失效
很多同学反映eslint 6+
在VSCode
上失效,最高使用版本只能控制在v5.16.0
。其实这本身就是配置问题,跟版本无关。本项目的eslint
使用v7
,只要配置正确就能正常使用。
上述安装行为使用了NPM
,那么settings.json
的eslint.packageManager
必须配置为npm
(小写),但最新版本Eslint
已默认此项,所以无需配置。若上述安装行为变成yarn global add vscode-lint
,那么必须在settings.json
里添加以下配置。
{
"eslint.packageManager": "yarn"
}
首次安装Eslint并执行上述配置就会失效
首次安装Eslint
可能会在js/ts/jsx/tsx/vue文件
里看到以下警告。
Eslint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.
说明Eslint
被禁用了,虽然配置里无明确的禁用字段,但还是被禁用了。此时移步到VSCode
右下角的工具栏,会看到禁用图标+ESLINT
的标红按钮,单击它就会弹出一个弹框,选择Allow Everywhere
就能启用Eslint
的校验功能了。
组成
请自行根据项目选择以下配置文件
- Stylelint:用于校验
css/sass/scss/less
,无法使用文件导入的形式,故将配置书写进settings.json
- Eslint:用于校验
js/jsx/vue
- JS配置文件:
eslintrc.js
- React配置文件:
eslintrc.react.js
- Vue配置文件:
eslintrc.vue.js
- JS配置文件:
- Tslint:用于校验
ts/tsx/vue
(Tslint
已被弃用,使用Eslint
代替)- JS配置文件:
tslint.js
- React配置文件:
tslint.react.js
- Vue配置文件:
tslint.vue.js
- JS配置文件:
版权
MIT © Joway Young
后记
若觉得vscode-lint
对你有帮助,可在Issue上提出你的宝贵建议
,笔者会认真阅读并整合你的建议。喜欢vscode-lint
的请给一个Star,或Fork本项目到自己的Github
上,根据自身需求定制功能。
关注公众号IQ前端
,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔