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] stylelintrc.js：校验html/css/scss/less/vue文件
• eslint文件夹：校验html/js/jsx/vue文件
  • [x] eslintrc.js：校验html/js文件
  • [x] eslintrc.react.js：校验html/jsx文件
  • [x] eslintrc.vue.js：校验html/vue文件
• tslint文件夹：校验html/ts/tsx/vue文件(Tslint已弃用，使用Eslint代替)
  • [x] tsconfig.json：配置TypeScript
  • [x] tslintrc.js：校验html/ts文件
  • [x] tslintrc.react.js：校验html/tsx文件
  • [x] tslintrc.vue.js：校验html/vue文件

Stylelint

校验不同类型代码需实时修改stylelint.customSyntax的值。

• [x] CSS/SCSS：postcss-scss
• [x] LESS：postcss-less
• [x] HTML/VUE：postcss-html

Eslint

校验不同类型代码需实时修改eslint.options.overrideConfigFile的值。

• [x] JS：path/vscode-lint/eslint/eslintrc.js
• [x] React：path/vscode-lint/eslint/eslintrc.react.js
• [x] Vue：path/vscode-lint/eslint/eslintrc.vue.js
• [x] TS：path/vscode-lint/tslint/tslintrc.js
• [x] React TS：path/vscode-lint/tslint/tslintrc.react.js
• [x] 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开发技巧的前端公众号，更多前端小干货等着你喔