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:一些预置的配置,可以让用户指定使用。
官方传送门:eslint.bootcss.com/docs/develo…
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 的格式定义可以在这里查看:
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 解析过了,直接使用即可。
总体流程
原文链接:https://juejin.cn/post/7248999913094381628 作者:石小石Orz