ESLint如何对.vue文件进行代码质量检查？

本文共计942个文字，预计阅读时间需要4分钟。

近期要完成一个类似的内容，学习了Vue的基础，接下来是如何进行ESLint配置。在ESLint中，扩展机制主要包括Rules、Plugins、Formatters和Parsers。首先需要了解这些扩展机制，才能扩展ESLint的功能。

近期要做一个类似的内容，学习了一下 Vue 是如何做的。

ESLint 中的扩展机制

首先需要了解一下如何才能扩展 ESLint 的功能。ESLint 扩展机制主要有 Rules、Plugins、Formatters、Parsers，Formatters 目前不需要用到，因此着重看一下其他三种方式。

Parser

用于自定义的解析文件内容，返回 AST 给后续步骤使用。

Rules

用于定义校验规则。

Plugins

plugin 是多种功能的一个集合，可以定义以下内容：

• Rules：校验规则。
• Environments：环境变量。
• Processors：处理文件前后的钩子函数。preprocess、postprocess。
• Configs：一些预置的配置，可以让用户指定使用。

Vue 相关代码库

用于 .vue 文件的 eslint 代码库有两个：eslint-plugin-vue 和 vue-eslint-parser。

eslint-plugin-vue 用于提供 Rules。