当你在使用 Vue.js 开发项目时，如何确保代码风格的一致性呢？这就需要用到一个工具——ESLint。而 eslint-config-vue 就是专门为 Vue.js 编写的 ESLint 配置规则包。
本文将介绍如何在你的 Vue.js 项目中使用 eslint-config-vue 进行代码规范检查，包括安装、配置和常见问题解决。
安装
首先，在你的 Vue.js 项目中，使用以下命令安装 eslint、eslint-plugin-vue 和 eslint-config-vue：
npm install eslint eslint-plugin-vue eslint-config-vue --save-dev
配置
接下来，在你的项目根目录下创建 .eslintrc.js 文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
-------- -
----------------------- -- -----
---------------- -- -------- --
------------------------------ -- ------ - ---------- -----
--------------------- -- ------ -----
--
-------------- -
------- --------------------------- -- ------ - ---------- ---
--
------ -
-- -------------
-
-以上配置中，extends 字段指定了要继承的规则集合，包含了 plugin:vue/essential、@vue/prettier、@vue/typescript/recommended 和 eslint:recommended 四个规则集合。
plugin:vue/essential是 Vue.js 官方推荐的一组必要的规则。@vue/prettier是使用 Prettier 进行代码格式化的插件。@vue/typescript/recommended是 Vue.js + TypeScript 推荐的一组规则，包括了 TypeScript 的相关规则。eslint:recommended是 ESLint 推荐的一组规则。
在 parserOptions 字段中，我们指定了解析器为 @typescript-eslint/parser，以支持对 TypeScript 的语法解析。
最后，在 rules 字段中，你可以添加你自己的特定规则。
常见问题
无法识别 Vue.js 相关语法
如果遇到了如下错误：
Parsing error: 'import' and 'export' may only appear at the top level
或
Parsing error: Unexpected token <
这是由于 ESLint 默认只会检查 .js 文件，而不会检查 .vue 文件中的内容。解决方法是，按照官方文档 Working with Custom Language and File Extensions 中的说明，显式地告诉 ESLint 如何处理 .vue 文件。
在 .eslintrc.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
-
------ ----------
------- --------------------
-- -------- ------- - -----
-
-
-如何自定义规则
在 .eslintrc.js 文件中，你可以添加你自己的特定规则。例如，如果你想要增加一个规则，禁止使用 alert()：
module.exports = {
// ...
rules: {
'no-alert': 'error'
}
}如何在编辑器中集成 ESLint
为了方便在编辑器中直接查看代码风格错误，我们可以在编辑器中安装相应的插件。
以 Visual Studio Code 为例，在扩展商店中搜索并安装 ESLint 插件即可。
总结
本文介绍了如何在 Vue.js 项目中使用 eslint-config-vue 进行代码规范检查，包括了安装、配置
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51910