更多详细信息可以参考 eslint 官方文档配置文件

安装

首先你需要安装 eslint 才能使用 eslint 相关的功能。

npm install eslint --save-dev
# 或者是全局安装
npm install eslint -g

然后你还需要一个配置文件，一般使用 .eslintrc.js 或 .eslintrc.json 。

module.exports = {
  extends: [],
  plugins: [],
  rules: {},
}

配置

基本规则

配置文件一般放置在项目的根目录，这样可以让你项目的所有文件都使用相同的规则。当然，你也可以在子文件夹中单独添加一个配置文件，这时子文件夹中的配置会和父级的配置合并，子配置优先。如果你不希望子文件夹应用父级的规则，那么可以在子配置中添加 root: true ，这样 eslint 就会忽略外部的配置。

parser

eslint 默认使用 espree 作为解释器，这也就意味着它只能解析常规的 js 文件。如果项目中使用了 vue 或者 ts ，那么默认的解释器就不能处理这些文件。这时就需要指定解释器，比如 vue-eslint-parser 或者 @typescript-eslint/parser 。

特别的，如果你使用 vue-eslint-parser 作为解释器，那么还可以通过配置 parserOptions.parser来制定 SFC 中 <script> 内容的解释器，具体可以参考 vue-eslint-parser 。

extends 继承

使用继承可以支持使用共享的配置。如果 配置文件B 继承自 配置文件A ，B 会以 A 为基础，并覆盖 A 的配置。具体的覆盖规则可以参考扩展配置文件。如果同时配置了多个继承，那么后声明的会覆盖先声明的。

module.exports = {
  extends: [
    ./.eslintrc.A.js,
    ./.eslintrc.B.js,  // <-- B 会覆盖 A 中的规则
  ],
}

这样的一个好处是可以把一些公共的规则抽象出来，便于复用。比如我们在配置 vue 项目时常使用到的推荐规则就是通过 extends 加载进来的。

使用 extends 不仅会继承 rules ，同时包括 plugins、parserOptions、overriads 等其他配置都可以被继承。

plugins 插件

一个 plugin 可以理解为一系列的规则，一般需要配合特定的 parse 使用。只添加插件时规则是不生效的，它只代表 eslint 可以支持新的规则，只有当你在 rules 中定义或者使用 extends 间接使用时才会生效。

比如当安装 eslint-plugin-vue 并进行正确配置，则可以启用相关的规则。

module.exports = {
  // ↓ 引入 vue 相关规则
  plugin: ['vue'],
  // ↓ 启用规则
  extends: ['plugin:vue/recommended']，
  // ↓ 覆盖规则  
  rules: {
    'vue/no-unused-components': 1,
  }
}

注意，在我们的配置中，并没有指定 parse 。前面提到，eslint 默认使用 espree 来解析文件，这里为什么可以解析 vue 文件呢？因为在 plugin:vue/recommended 中，其实已经指定了parse ，可以参考 eslint-plugin-vue/lib/configs/base.js 。

overrides 覆盖

当常规配置不能满足个性需求，比如某些特定目录下的文件不进行特定的检查时，可以使用覆盖来解决。在同一配置文件中，覆盖的优先级高于常规配置。

module.exports = {
  ...
  overrides: [  
    {
      files: ['*.vue'],
      parser: 'vue-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
      },
      rules: {
        'no-unused-vars': 'off',
        'no-undef': 'off',
      },
    },
  ],
  ...
}

比如，在上面的配置中，默认使用 espree 作为解释器，但是如果文件名匹配 *.vue 时则优先使用覆盖的配置也就是使用 vue-eslint-parser 作为解释器，并且声明使用 @typescript-eslint/parser 作为 sfc 中 <script> 的解释器。

‍

eslint 学习笔记

安装

配置

基本规则

parser

extends 继承

plugins 插件

overrides 覆盖