vscode-lint v0.0.8
VSCode Lint
vscode-lint是一个集成Stylelint与Eslint的VSCode配置工具，提供html/css/scss/less/js/ts/jsx/tsx/vue文件的代码校验功能
vscode-lint用于约束团队成员的编码规范与编码风格，从而增加项目代码的可维护性与可接入性，保障项目整体质量，可减少无用代码、重复代码、错误代码和漏洞代码的产生几率。它的根本目的是一次部署全局运行，统一所有项目的编码规范与编码风格，养成规范的码字习惯，减少不必要的错误与隐患。
vscode-lint依赖以下NPM模块的最新版本。
为了方便表述，统一以下名词。
- 以下提及的Stylelint与Eslint都为
VSCode插件 - 以下提及的stylelint与eslint都为
NPM模块
安装
npm i -g vscode-lint
安装失败
- 切换NPM镜像为淘宝镜像：
npm config set registry https://registry.npmmirror.com/ - 重新执行安装命令：
npm i -g vscode-lint
配置
- 打开
VSCode - 选择左边
工具栏的插件，搜索并安装Stylelint与Eslint，安装完毕重启VSCode - 选择
文件→首选项→设置，设置中可选用户或工作区- 用户：配置生效后会作用于全局项目(若大部分项目都是单一的React应用或Vue应用推荐使用全局配置) - 工作区：配置生效后只会作用于当前打开项目 - 点击
设置右上角中间图标打开设置(json)，打开的对应文件是settings.json - 插入以下配置并重启
VSCode：为了保障每次修改完毕都能正常格式化代码，必须重启VSCode
{
// 默认自定义配置
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
// 扩展自定义配置
"eslint.nodePath": "path/vscode-lint/node_modules",
"eslint.options": {
"overrideConfigFile": "path/vscode-lint/eslint/eslintrc.js" // 可变⚠️
},
"stylelint.configBasedir": "path/vscode-lint",
"stylelint.configFile": "path/vscode-lint/stylelint/stylelintrc.js",
"stylelint.customSyntax": "postcss-html", // 可变⚠️
"stylelint.stylelintPath": "path/vscode-lint/node_modules/stylelint",
"stylelint.validate": ["html", "css", "scss", "less", "vue"]
}以上配置的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
请保持VSCode及其所有插件都为最新版本，防止因版本问题导致Stylelint与Eslint失效。
结构
请根据项目自行选择以下配置文件。
- stylelint文件夹
- x(https://github.com/JowayYoung/vscode-lint/blob/master/stylelint/stylelintrc.js)：校验
html/css/scss/less/vue文件 - eslint文件夹：校验
html/js/jsx/vue文件- x(https://github.com/JowayYoung/vscode-lint/blob/master/eslint/eslintrc.js)：校验html/js文件- x(https://github.com/JowayYoung/vscode-lint/blob/master/eslint/eslintrc.react.js)：校验html/jsx文件- x(https://github.com/JowayYoung/vscode-lint/blob/master/eslint/eslintrc.vue.js)：校验html/vue文件 - tslint文件夹：校验
html/ts/tsx/vue文件(Tslint已弃用，使用Eslint代替) - x(https://github.com/JowayYoung/vscode-lint/blob/master/tslint/tsconfig.json)：配置TypeScript- x(https://github.com/JowayYoung/vscode-lint/blob/master/tslint/tslintrc.js)：校验html/ts文件- x(https://github.com/JowayYoung/vscode-lint/blob/master/tslint/tslintrc.react.js)：校验html/tsx文件- x(https://github.com/JowayYoung/vscode-lint/blob/master/tslint/tslintrc.vue.js)：校验html/vue文件
Stylelint
校验不同类型代码需实时修改stylelint.customSyntax的值。
- CSS/SCSS：
postcss-scss - LESS：
postcss-less - HTML/VUE：
postcss-html
Eslint
校验不同类型代码需实时修改eslint.options.overrideConfigFile的值。
- JS：
path/vscode-lint/eslint/eslintrc.js - React：
path/vscode-lint/eslint/eslintrc.react.js - Vue：
path/vscode-lint/eslint/eslintrc.vue.js - TS：
path/vscode-lint/tslint/tslintrc.js - React TS：
path/vscode-lint/tslint/tslintrc.react.js - Vue TS：
path/vscode-lint/tslint/tslintrc.vue.js
疑问
更新eslint到v6+就会失效
很多同学反映eslint 6+在VSCode上失效，最高使用版本只能控制在v5.16.0。其实这本身就是配置问题，跟版本无关。本项目的eslint使用v8，只要配置正确就能正常使用。
上述安装行为使用了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的校验功能了。
版权
MIT © JowayYoung
后记
关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔