vsCode配置Eslint+Prettier结合使用详细配置步骤，规范化开发

一、eslint

        eslint它规范的是代码偏向语法层面上的风格。本篇文章以一个基本的vue项目，来说明eslint+prettier+husky配置项目代码规范，为了更好的描述本文，我恢复了vscode的默认设置（即未安装eslint,prettier等插件，setting中也没有相关配置）

1、新建vue3.0脚手架项目

vue create eslint-test

2、项目安装eslint

npm install eslint --save-dev

3、运行以下命令，生成.eslintrc.js

npx eslint --init

.eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",//继承Eslint中推荐的（打钩的）规则项http://eslint.cn/docs/rules/
        "plugin:vue/essential"// 此项是用来配置vue.js风格
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

3，查看这个推荐的默认规则

这里的规则，写在后面的会覆盖前面的，并且rules中的规则最后会覆盖这里的，所以我们自定义规则就是写在rules中，才能覆盖之前的规则，从而生效。

"extends": [
    "eslint:recommended",//继承Eslint中推荐的（打钩的）规则项http://eslint.cn/docs/rules/
    "plugin:vue/essential"// 此项是用来配置vue.js风格https://eslint.vuejs.org/rules
],

eslint规则rule官网

eslint-plugin-vue (vuejs.org)

这个默认规则是怎么生效的呢？举个例子，我们点进去链接，可以看到这个no-debugger是打上了对勾（也就是"eslint:recommended"）中生效的规则，然后我们再在项目中写个debugger，然后命令行运行检查eslint的命令，就会报错了。

打了勾表示属于recommended采用的规则

有个扳手则表示可自动修复不需手动修复

4，自定义规则 

Eslint附带了大量的校验规则，这些规则的值分别有如下规律：

1. off | 0 :表示关闭规则。

2. warn | 1 :表示将该规则转换为警告。

3. error | 2 :表示将该规则转换为错

常见的rules规则：

// "semi": [2, "always"],//语句强制分号结尾
// "quotes": [2, "double"],//引号类型 ""
//"no-alert": 0,//禁止使用alert
//"no-console": 2,//禁止使用console
//"no-const-assign": 2,//禁止修改const声明的变量
//"no-debugger": 2,//禁止使用debugger
//"no-duplicate-case": 2,//switch中的case标签不能重复
//"no-extra-semi": 2,//禁止多余的冒号
//"no-multi-spaces": 1,//不能用多余的空格

定义好规则后，怎会出现对应的校验报错

5，package.json中配置检查命令行 

上文中，我们是手动输入命令行来检查代码是否符合eslint规范的，这样每次检查都要输入一遍，有的人要是记不住这命令怎么办？于是可以在package.json的script中写死这个脚本：

"lint": "eslint --ext .js --ext .jsx --ext .vue src/",

 于是，项目根目录运行npm run lint，实际上就是运行：

npx eslint --ext .js --ext .jsx --ext .vue src/

6，eslint插件自动检查规范 

为避免每次校验都需要输入命令的问题，可以通过vscode提供的插件实现保存时自动校验

在vscode插件市场搜索Eslint安装且重启即可

7，在vscode中配置setting,让每次保存代码时自动修复

通过配置setting.json实现保存的时候自动校验和修复，而不需要像上一步那样需要输入命令行现在利用vscode的eslint插件我们已经能一写完代码，就