第八章-安装eslint-plugin-vue

1.说明

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

怎么理解eslint-plugin-vuevue-eslint-parser的关系呢?

ESLint 会对我们的代码进行校验,而 parser 的作用是将我们写的代码转换为 ESTreeESLint 会对 ESTree 进行校验。

vue-eslint-parser文档上说是vue的模板解析器。vue-eslint-parser的文档中强调<template>标签中的内容进行检查。

那么我的理解是vue-eslint-parservue文件转换成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-vuevue-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

# vben  ESLint 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×