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

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

Vue在代码中的校验,一般有 2 种情况:

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

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

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

一文带你搞懂eslint和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一文带你搞懂eslint和vue之间的关系【纯干货】

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

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

我们可以在 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:一些预置的配置,可以让用户指定使用。

官方传送门:eslint.bootcss.com/docs/develo…

Vue中的核心eslint插件

vue中的核心eslint插件是eslint-plugin-vuevue-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 的格式定义可以在这里查看:

github.com/vuejs/vue-e…

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。

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

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

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

总体流程

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

原文链接:https://juejin.cn/post/7248999913094381628 作者:石小石Orz

(0)
上一篇 2023年6月27日 上午10:06
下一篇 2023年6月27日 上午10:17

相关推荐

发表回复

登录后才能评论