第八章-安装eslint-plugin-vue

1.说明

之前说了，ESLint是检查JS代码的依赖，那么它怎么去检查Vue语法的文件呢？要完成这件事，我们就需要安装vue官方开发的ESLint插件eslint-plugin-vue。这样ESLint就知道该怎么检查vue的文件了。

• eslint-plugin-vue的官方文档
• eslint-plugin-vue的npm首页
• vue eslint 升级_ESLint 的 parser 是个什么东西
• vue-eslint-parser的Git地址

怎么理解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