问题描述
在 Vue 2.x 中，我们通常使用 eslint-plugin-vue 来对 Vue 文件进行代码格式规范检查。然而在升级至 Vue 3.x 后，我们会发现 eslint-plugin-vue 在 Vue 3.x 中失效了，无法对 Vue 文件进行规范检查。
解决方法
1. 安装必要的依赖
在 Vue 3.x 中，我们需要使用 @vue/eslint-config-app 配置来支持 eslint-plugin-vue。因此我们需要先安装 @vue/eslint-config-app 和 eslint-plugin-vue。
npm install --save-dev @vue/eslint-config-app eslint-plugin-vue
2. 配置 .eslintrc.js 文件
在 package.json 文件中，我们通常会配置 eslintConfig 字段来设置 eslint 相关的配置。我们需要在项目根目录下创建并编辑 .eslintrc.js 文件，向其中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-------- -
------------------------
--
-------- -
-----
--
------ -
-- -----------
-
-如代码中所示，在 extends 数组中添加 @vue/eslint-config-app 配置。在 plugins 数组中添加 vue 插件。此时 eslint-plugin-vue 就被自动启用了，可以直接开始使用。
3. 自定义配置规则
除了使用默认的规则之外，我们还可以自定义规则。在 rules 对象中，我们可以按照自己的需求添加规则。例如，添加一个不允许出现未使用变量的规则：
-- -------------------- ---- -------
-------------- - -
-------- -
------------------------
--
-------- -
-----
--
------ -
-- -----------
----------------- -------
-
-4. 指定 Vue 版本
如果你的项目中同时使用了 Vue 2.x 和 Vue 3.x，在 plugins 数组中需要指定当前 Vue 的版本。例如，你正在使用 Vue 3.x：
-- -------------------- ---- -------
-------------- - -
-------- -
------------------------
--
-------- -
----------
--
------ -
-- -----------
-
-示例代码
在一个 Vue 3.x 项目中，创建以下组件：
-- -------------------- ---- -------
----------
-----
---------- --- -------
----- ------- ------
------
-----------
--------
------ ------- -
----- -------------
------ -
------ -
-------- -------- -- -- --- - ---------
-
--
-------- -
------------- -
---------------- ------- -----
-
-
-
---------
-------
-- -
---------- -----
-
- -
------ -----
-
--------以上代码演示了如何在 Vue 3.x 项目中使用 eslint-plugin-vue 进行规范检查。在配置 .eslintrc.js 文件后，可以运行 eslint 命令来检查代码是否符合规范。例如，以下命令可以检查当前项目中的 Vue 文件和 JavaScript 文件：
npx eslint --ext .js,.vue .
结论
通过以上步骤，我们就可以在 Vue 3.x 中使用 eslint-plugin-vue 了。如果在使用过程中遇到了问题，可以检查依赖是否正确安装，或查看 package.json 文件中是否有冲突的依赖。同时，也可以到 eslint-plugin-vue 的 GitHub 仓库中查看官方文档和其他开发者们的讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676fe00ee9a7045d0d77a6ea