VSCode Lint

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
• Tslint：用于校验ts/tsx/vue(Tslint已被弃用，使用Eslint代替)
  • JS配置文件：tslint.js
  • React配置文件：tslint.react.js
  • Vue配置文件：tslint.vue.js

版权

MIT © Joway Young

后记

若觉得vscode-lint对你有帮助，可在Issue上提出你的宝贵建议，笔者会认真阅读并整合你的建议。喜欢vscode-lint的请给一个Star，或Fork本项目到自己的Github上，根据自身需求定制功能。

关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔