1.说明
之前说了,ESLint
是检查JS代码的依赖,那么它怎么去检查Vue
语法的文件呢?要完成这件事,我们就需要安装vue
官方开发的ESLint
插件eslint-plugin-vue
。这样ESLint
就知道该怎么检查vue
的文件了。
怎么理解eslint-plugin-vue
和vue-eslint-parser
的关系呢?
ESLint
会对我们的代码进行校验,而 parser 的作用是将我们写的代码转换为 ESTree
,ESLint
会对 ESTree
进行校验。
vue-eslint-parser
文档上说是vue
的模板解析器。vue-eslint-parser
的文档中强调<template>
标签中的内容进行检查。
那么我的理解是vue-eslint-parser
将vue
文件转换成ESTree
。然后使用eslint-plugin-vue
来检查这个ESTree
。查出的结果交给ESLint
。
vue-eslint-parser
的官方说明:
This parser allows us to lint the <template> of .vue files. We can make mistakes easily on <template> if we use complex directives and expressions in the template. This parser and the rules of eslint-plugin-vue would catch some of the mistakes.
这个解析器允许我们对.vue文件的<template>进行检查。如果我们在模板中使用了复杂的指令和表达式,我们很容易在<template>上出错。这个解析器和eslint-plugin-vue的规则可以发现一些错误。
这些都是我猜的,才疏学浅。还望大神指教一二。总之eslint-plugin-vue
和vue-eslint-parser
需要一起使用,而且官网也有显示怎么操作。
2.安装两个插件
yarn add eslint-plugin-vue vue-eslint-parser --dev
3.将插件配置进ESLint
配置ESLint:根目录下修改:.eslintrc.js
文件。
module.exports = {
// ...
parser: 'vue-eslint-parser',
// ...
extends: [
'plugin:vue/vue3-recommended',
],
// ...
};
上一章
第七章-安装ESLint
下一章
第九章-安装@typescript-eslint