一文带你搞懂eslint和vue之间的关系【纯干货】

我正在参加「掘金·启航计划」

Vue项目中相关的eslint插件说明

Vue在代码中的校验，一般有 2 种情况：

• 通过 vue-cli 初始化项目的时候已经选择了对应的校验配置
• 对于一个空的 Vue 项目，想接入代码校验

其实这 2 种情况最终的校验的核心配置都是一样的，只是刚开始的时候安装的包有所区别。

采用vue-cli的方式内置eslint，可以发现项目安装了@babel/eslint-parser、@vue/cli-plugin-eslint、eslint、eslint-plugin-vue几个依赖。

package.json如下：

{
  "name": "vue_eslint",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

eslint是校验主体插件，其余依赖都是基于它运行的。

@babel/eslint-parser

ESLint的默认解析器和核心规则仅支持最新的最终 ECMAScript 标准，不支持 Babel 提供的实验性（例如新功能）和非标准（例如Flow或TypeScript类型）语法。

@ babel / eslint-parser 是允许 ESLint 在由 Babel 转换的源代码上运行的解析器。

当你使用 babel 时，babel 的解析器会把你的 code 转换为 AST，该解析器会将其转换为 ESLint 能懂的 ESTree。

ESLint的核心规则不支持实验性语法，因此可能无法正常工作，需要使用 @babel/eslint-plug 规则集。并且 ESLint 官方文档中的 parserOptions 只适用 Espree 解析器

@vue/cli-plugin-eslint

这个包它主要干了 2 件事情：

第一件事

往 package.json 里注册了一个命令：

{
    "scripts": {
        "lint": "vue-cli-service lint"
    }
}

执行这个命令之后，它会去检查和修复部分可以修复的问题。默认查找的文件是 src 和 tests 目录下所有的 .js，.jsx，.vue 文件，以及项目根目录下所有的 js 文件（比如，也会检查 .eslintrc.js）。

当然你也可以自定义的传入参数和校验文件：

vue-cli-service lint [options] [...files]

支持的参数如下：

• –no-fix: 不会修复 errors 和 warnings；
• –max-errors [limit]：指定导致出现 npm ERR 错误的最大 errors 数量；

第二件事

增加了代码保存触发校验的功能 lintOnSave（需要把服务跑起来），这个功能默认是开启的。

比如，我们在rules内配置"no-console":“error”，禁用console

我们在App.vue里面写 console.log() ，会发现控制台立即报错

我们可以在 vue.config.js 里配置 lintOnSave: false，关闭自动校验功能。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

lintOnSave 参数说明：

可选参数	参数释义
true 或者 warning	开启保存校验，会将 errors 级别的错误在终端中以 WARNING 的形式显示。默认的，WARNING 将不会导致编译失败；（无论eslint如何配置，都不会导致编译失败）
false	不开启保存校验
error（默认值）	开启保存校验，会将 errors 级别的错误在终端中以 ERROR 的形式出现，会导致编译失败，同时浏览器页面变黑，显示 Failed to compile。

eslint-plugin-vue

基本使用

elsint只能对js文件进行校验，使用eslint-plugin-vue 可以对 .vue 文件进行代码校验。

针对这个插件，它提供了这几个扩展

• plugin:vue/base：基础
• plugin:vue/essential：预防错误的（用于 Vue 2.x）
• plugin:vue/recommended：推荐的，最小化任意选择和认知开销（用于 Vue 2.x）；
• plugin:vue/strongly-recommended：强烈推荐，提高可读性（用于 Vue 2.x）；
• plugin:vue/vue3-essential：（用于 Vue 3.x）
• plugin:vue/vue3-strongly-recommended：（用于 Vue 3.x）
• plugin:vue/vue3-recommended：（用于 Vue 3.x）

各扩展规则列表：vue rules

ESLint 是如何检查 .vue 文件的

学习这个问题之前，我们需要先了解一下ESLint 的扩展机制

ESLint 的扩展机制

ESLint 扩展机制主要有 Rules、Plugins、Parsers（其他不需要了解）。

Parser

用于自定义的解析文件内容，返回 AST 给后续步骤使用。

Rules

用于定义校验规则。

Plugins

plugin 是多种功能的一个集合，可以定义以下内容：

Rules：校验规则；Environments：环境变量；Processors：处理文件前后的钩子函数； Configs：一些预置的配置，可以让用户指定使用。

官方传送门：https://eslint.bootcss.com/docs/developer-guide/working-with-plugins

Vue中的核心eslint插件

vue中的核心eslint插件是eslint-plugin-vue 和vue-eslint-parser

• eslint-plugin-vue 用于提供 Rules，内部依赖vue-eslint-parser。
• vue-eslint-parser 用于解析 .vue 文件，尤其是 template 部分。

eslint-plugin-vue核心代码

eslint-plugin-vue入口文件为 lib/index.js，其中设置了三部分内容，rules、configs 和 processors。

module.exports = {
  rules: {
    'array-bracket-spacing': require('./rules/array-bracket-spacing'),
    'arrow-spacing': require('./rules/arrow-spacing'),
    'attribute-hyphenation': require('./rules/attribute-hyphenation'),
    'attributes-order': require('./rules/attributes-order'),
    'block-spacing': require('./rules/block-spacing'),
    // ......更多规则
  },
  configs: {
    'base': require('./configs/base'),
    'essential': require('./configs/essential'),
    'no-layout-rules': require('./configs/no-layout-rules'),
    'recommended': require('./configs/recommended'),
    'strongly-recommended': require('./configs/strongly-recommended')
  },
  processors: {
    '.vue': require('./processor')
  }
}

rules

rules 部分对应着非常多的校验规则，放在 rules 目录下。rules 中关于 template 部分的校验，处理的是 vue-eslint-parser 中生成的 AST，这个 AST 的格式定义可以在这里查看：

https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md

configs 部分预置了很多配置选项，不同选项的区别主要在于 rules 的开关设置不同，我们不需要关心。这里我们主要看 base 配置中的 部分：

configs

configs 部分预置了很多配置选项，不同选项的区别主要在于 rules 的开关设置不同，我们不需要关心。这里我们主要看 base 配置中的 parser 部分：

module.exports = {
  parser: require.resolve('vue-eslint-parser'),
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  env: {
    browser: true,
    es6: true
  },
  plugins: [
    'vue'
  ],
  rules: {
    'vue/comment-directive': 'error',
    'vue/jsx-uses-vars': 'error'
  }
}

可以看到。vue-eslint-vue指定vue-eslint-parser作为默认解析器，因此，我们不需要安装 eslint-plugin-vue 。

processors

注：这里的processors不同于项目配置中的processors

 processors: {
    '.vue': require('./processor')
  }

processors，他是一个对象：

module.exports = {
  preprocess (code) {
    return [code]
  },

  postprocess (messages) {
    // Filter messages which are in disabled area.
    return messages[0].filter(...)
  },

  supportsAutofix: true
}

它没有做任何事情，直接将 code 返回了（返回后，通过rules进行校验）。

有时文件中会有一些注释来开启关闭某些 rules，而 postprocess 所做的内容是根据这些注释对 messages 做一个过滤。

官方释义：processors可以从另一种文件中提取 JavaScript 代码，然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。

vue-eslint-parser

eslint-plugin-vue能够识别.vue文件，是依靠vue-eslint-parser来完成的。

vue-eslint-parser 的入口文件是 src/index.ts，该文件暴露出了 parseForESLint 和 parse 方法，这两个方法做的事情是一样的：输入原始代码，返回解析后的 AST。

由于配置 parser 后，所有文件都会经过 vue-eslint-parser，因此需要判断是否是 .vue 文件，如果不是的话，使用 espree (ESLint 默认的 JS 解析器) 或用户自定义的其他 parser 来处理 js 文件内容。

如果判断是 vue 文件，那么会对 HTMLParser 来解析 .vue 文件内容，获取到 script 和 template 部分。script 部分使用 espree 或用户自定义的其他 parser 来处理 js 内容，template 部分则已经由 HTMLParser 解析过了，直接使用即可。

总体流程