开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天

ESLint简单的来说就是检查你的JS代码写的格式是否规范的一个依赖。没有代码也能运行，有了它可以保证代码更加规范、风格统一。ESLint还支持插件，第三方框架会基于ESLint写出自己的代码检查插件。比如Vue对应eslint-plugin-vue。

安装 ESLint

pnpm add eslint -D

如果是 yarn

yarn add eslint --dev

注意: 如果 eslint 安装报错:

可以尝试运行以下命令:

yarn config set ignore-engines true

运行成功后再次执行 eslint 安装命令

Visual Studio Code 编辑器使用 ESLint 配置需要下载插件 ESLint 。

ESLint 配置文件

配置 ESLint：根目录下创建：.eslintrc.js文件。

module.exports = {
  // ↓默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  // ↓此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true,
  // ↓指定你想启用的环境
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  // ↓设置解析器
  parser: "",
  // ↓解析器选项
  parserOptions: {},
  // ↓扩展项
  extends: [],
  // ↓自定义规则配置
  rules: {},
};

这里也可以使用eslint的init来初始化生成.eslintrc.js文件。如果eslint --init 报错可以使用npx eslint --init

选择自己需要的配置即可，这里简单尝试还是感觉自己创建.eslintrc.js文件更方便自定义，也更清楚每一个引入库的用途。

npx eslint --init 生成的.eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:vue/vue3-essential",
        "standard-with-typescript"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

env 预定义的环境变量

作用：提供预定义的环境变量。

因为 node 或者浏览器中的全局变量很多，如果我们一个个声明会显得繁琐，因此就需要用到 env，这是对环境定义的一组全局变量的预设。

env: {
    browser: true,
    es2021: true,  // 添加所有 ECMAScript 2021 全局变量并自动将 ecmaVersion 解析器选项设置为 12
    node: true,
},

parser 指定要使用的解析器

作用：指定要使用的解析器。vue 项目我们指定为 vue-eslint-parse 即可（需要安装对应库后面具体解释）

parser: 'vue-eslint-parser',

parserOptions 解析器配置

作用：给解析器传入一些其他的配置参数

比如检查 ts 需要的@typescript-eslint/parser就可以在这里进行配置

parserOptions: {
  parser: '@typescript-eslint/parser',
  ecmaVersion: "latest",  // 支持的es版本
  sourceType: 'module',  // 代模块类型，默认为script，我们设置为module
},

extends 使用预设配置

作用：使用预设的 lint 包

如果要我们自己去设置各个规则未免会显得繁琐，所以可以直接使用业界的最佳实践作为基础规则

extends: [
  'plugin:vue/vue3-essential',
  'plugin:vue/vue3-recommended',
  'plugin:@typescript-eslint/recommended',
  'eslint:recommended',
  '@vue/typescript/recommended',
  '@vue/prettier'
],

plugins 增强 ESlint 功能

作用：增强 ESlint 功能

比如@typescript-eslint/eslint-plugin它就是用来给 eslint 提供一些额外的适用于 ts 语法的规则，插件名中的 eslint-plugin- 可以省略:

// eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier的缩写
 plugins: ["vue", "@typescript-eslint", "prettier"],

rules 自定义检查规则

作用：创建自定义规则。

规则定义值：

off 或 0 - 关闭规则
warn 或 1 - 开启规则, 使用警告程序不会退出
error 或 2 - 开启规则, 使用错误程序退出

虽然我们通过 extends 引入了行业内最佳实践的一些规则，但是每个团队还是有每个团队自己的开发习惯，官方默认的方案其中有一些规则不一定符合我们的要求，所以我们可以通过 rules 添加或者修改 extends 中继承的规则。

module.exports = {
  // ...
  rules: {
    // eslint 检查 .vue 文件是否为驼峰命名
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: ['Index']
      }
    ],
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // ↓是否允许使用any类型
    '@typescript-eslint/no-explicit-any': 'off',
    // ↓是否允许!后缀运算符进行非null断言
    '@typescript-eslint/no-non-null-assertion': 'off',
    // ↓是否允许使用@ts-注解
    '@typescript-eslint/ban-ts-comment': 'off'
  },
};

eslint 完整配置

先贴一下完整配置，依赖插件的用途及安装后面有具体说明。

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true, // 添加所有 ECMAScript 2021 全局变量并自动将 ecmaVersion 解析器选项设置为 12
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest', // 支持的es版本
    sourceType: 'module' // 代模块类型，默认为script，我们设置为module
  },
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    // eslint 检查 .vue 文件是否为驼峰命名
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: ['Index']
      }
    ],
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // ↓是否允许使用any类型
    '@typescript-eslint/no-explicit-any': 'off',
    // ↓是否允许!后缀运算符进行非null断言
    '@typescript-eslint/no-non-null-assertion': 'off',
    // ↓是否允许使用@ts-注解
    '@typescript-eslint/ban-ts-comment': 'off'
  }
}

ESLint 忽略文件

根目录下创建：.eslintignore文件。

# eslint 忽略检查 (根据项目需要自行添加)
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

vue 解析插件

ESLint 是检查 JS 代码的检测工具，默认只能检测 JS 语法，那么它怎么去检查 Vue 语法的文件呢？要完成这件事，我们就需要安装vue官方开发的 ESLint 插件eslint-plugin-vue。这样ESLint就知道该怎么检查 vue 的文件了。

ESLint 会对我们的代码进行校验，而 parser 的作用是将我们写的代码转换为 ESTree，然后 ESLint 才会对 ESTree 进行校验（js 的 parser 是 ESLint‘出厂’自带的）。

vue-eslint-parser 文档上说是 vue 的模板解析器，强调

代码规范 - 配置 ESLint & Prettier