ESLint 是一个代码检查工具，可用于检查 JavaScript 代码中的潜在错误和代码风格问题。在 Vue CLI 3 项目中，ESLint 默认已经启用，但是可能需要进行一些配置，以确保它可以正确地执行其工作。
步骤 1：安装依赖包
首先需要确保 Vue CLI 3 项目已经安装了 eslint 和 eslint-plugin-vue 插件。如果还没有安装这些依赖，可以执行以下命令进行安装：
--- ------- ---------- ------ -----------------
步骤 2：配置文件
ESLint 安装完成后，需要在项目根目录下创建一个 .eslintrc.js 配置文件。这个文件可以指定 ESLint 的具体配置，例如要使用的规则和插件。
以下是一个示例的 .eslintrc.js 文件：
-------------- - -
----- -----
---- -
----- -----
---- ----
--
-------- -
-------------------------
---------------
--
-------------- -
------- ---------------
------------ ----
--
------ -
--------------------------- --------
--------------------- -------
-
-在这个示例中，我们首先指定了 root 选项，该选项告诉 ESLint 若要在哪里开始查找配置文件。接下来，通过 env 选项指定项目的运行环境。在本例中，我们指定环境为 Node.js 和 ES6。
然后，通过 extends 选项扩展了一组推荐的规则，包括 plugin:vue/recommended 和 @vue/standard。第一个扩展包括了一组适用于 Vue.js 的 eslint-plugin-vue 规则，而第二个包括了一些标准的 JavaScript 规则。
接下来，通过 parserOptions 选项指定了解析器选项。这里，我们指定为使用 Babel 解析 JavaScript 代码，并指定 ECMAScript 版本为 2018。
最后，通过 rules 选项指定了要应用的规则，并将 vue/no-unused-components 和 vue/no-unused-vars 规则设置为 error，这样就可以禁止在 Vue.js 模板中使用未使用的组件和变量。
步骤 3：添加 npm 脚本
添加以下 npm 脚本到 package.json 文件的 scripts 标志下：
---------- - ------- ------- ------- ----------- ------- ----- ------ -
这两个脚本中，lint 命令将运行 ESLint 检查 ./src 目录中的所有 JavaScript 和 Vue.js 文件。lint:fix 命令还将尝试自动修复一些常见的 ESLint 错误。
步骤 4：运行检查
现在可以使用 npm run lint 命令来运行 ESLint 检查。
如果在代码中违反了任何规则，ESLint 将会输出相应的错误信息。在 ./src/components/Example.vue 文件中添加一行未使用的组件：
----------
-----
---------------- -- ---- ---- --------- -- --- ----- ---- ---
--------- -----------
------
-----------运行 npm run lint 命令，将输出以下错误信息：
---------------------------- --- ----- --- ----------------- --------- --- ---- ------- --- -- --- ---- ------------------------
可以看到，ESLint 检测到这个未使用的组件，并将其标记为错误。此时，需要修改代码以符合规则。
可以使用 npm run lint:fix 命令来自动修复这些常见的 ESLint 错误。例如，将在 Example.vue 文件中使用未定义的变量：
----------
-----
-- ---------------------------- ---- ----------- -- --------
------
-----------
--------
------ ------- -
---- -- -
------ -
------------ -----
-
-
-
---------运行 npm run lint:fix，将输出以下信息：
- ---- -- ------
结论
通过上述步骤，可以在 Vue CLI 3 项目中成功使用 ESLint 进行代码规范检查。这样可以避免代码的潜在错误和风格问题。建议在开发过程中经常运行 npm run lint 命令，以确保代码符合规范。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6713278bad1e889fe20ad38c