如何在VS Code中配置ESLint以使用特定的解析器？

(1)项目安装eslint

    npm i -D eslint

(2)初始化Eslint配置 --> 生成.eslintrc.js文件

     npx eslint  --init

会出现一些配置 --> 选择你所需的配置

配置完之后会在你的项目根目录下生成一个.eslintrc.js文件，如下图所示

若想配置 parser: 'babel-eslint' 需要安装依赖如下：

     npm install --save-dev babel-eslint

babel-eslint 解析器是一种使用频率很高的解析器，现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。

.eslintrc.js的代码：

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: ["eslint:recommended", "plugin:vue/essential"],
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module"
  },
  rules: {
    "indent": [2, 2], // 强制使用一致的缩进
    "eqeqeq": [2, "always"], //必须使用全等    要求使用 === 和 !==
    "semi": [2, "never"], // 要求或禁止使用分号代替 ASI,即禁用行尾使用分号
    "quotes": [2, "double"],  // 强制使用一致的反勾号、双引号或单引号
    "no-extra-semi": [2], // 禁止不必要的分号
    // "comma-dangle": [2, "never"], // 禁止末尾逗号
    "no-extra-parens": 2,//禁止非必要的括号
    "no-multiple-empty-lines": [1, { "max": 3 }],//空行最多不能超过3行
    "no-trailing-spaces": 1,//一行结束后面不要有空格
    "no-var": 1,//警告使用var，用let和const代替
    "camelcase": 2,//强制驼峰法命名
    "strict": 2,//使用严格模式
    "no-extra-label:": 0// 禁用不必要的标签
    // "max-len":[1,88],// 强制一行的最大长度
  }
}

(3)配置规则

在rules里面简单的一些配置：

“off” 或 0 - 关闭规则

“warn” 或 1 - 开启规则，使用警告级别的错误

“error” 或 2 - 开启规则，使用错误级别的错误

 "rules": {
    "indent": [2, 2], // 强制使用一致的缩进
    "eqeqeq": [2, "always"], //必须使用全等    要求使用 === 和 !==
    "semi": [2, "never"], // 要求或禁止使用分号代替 ASI,即禁用行尾使用分号
    "quotes": [2, "double"],  // 强制使用一致的反勾号、双引号或单引号
    "no-extra-semi": [2], // 禁止不必要的分号
    // "comma-dangle": [2, "never"], // 禁止末尾逗号
    "no-extra-parens": 2,//禁止非必要的括号
    "no-multiple-empty-lines": [1, {"max": 3}],//空行最多不能超过3行
    "no-trailing-spaces": 1,//一行结束后面不要有空格
    "no-var": 1,//警告使用var，用let和const代替
    "camelcase": 2,//强制驼峰法命名
    "strict": 2,//使用严格模式
    "no-extra-label:":0,// 禁用不必要的标签
    // "max-len":[1,88],// 强制一行的最大长度
  }

若想详细了解可以去官网 或 去看这篇文章 ESlint配置详解-pudn.com

(4)在VSCode安装 eslint 插件

(5)VSCode扩展设置

依次点击 文件 --> 首选项 --> 设置 找到如下位置：

打开上述VSCode 配置文件，添加如下配置：

"eslint.options": {
    "extensions": [".js", ".vue"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    }
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,

这样，每次保存文件的时候就可以根据 .eslintrc.js 配置规则来检查代码和做一些简单的修复

如果保存一次没办法修复所有的错误，可以尝试多保存几次。

若上述已配置完成，请把你的编辑器设置的自动保存取消掉，要手动保存(不然，配置可能不生效)