什么是 eslint？
eslint 是一个 JavaScript 代码检查工具，用于检查代码中的语法错误、潜在的错误、不规范的代码风格等。它可以帮助我们在编写代码时尽早发现问题，提高代码的可读性和可维护性。
vue-cli3 中的 eslint
vue-cli3 是一个基于 webpack4 的脚手架工具，用于快速搭建 Vue.js 项目。它默认集成了 eslint，可以帮助我们在开发过程中自动检查代码，提高代码的质量。
如何配置 eslint？
1. 安装 eslint
在 vue-cli3 项目中，eslint 已经默认安装了，我们只需要执行以下命令安装 eslint 的相关依赖包即可：
--- ------- ------ ----------------- ------------ ----------
其中，eslint 是 eslint 的核心包，eslint-plugin-vue 是 eslint 的插件包，用于检查 Vue.js 相关的代码，babel-eslint 是 eslint 的解析器，用于解析 ES6+ 代码。
2. 配置 eslint
在安装完 eslint 后，我们需要对其进行配置，以便让它能够按照我们的要求进行检查。在 vue-cli3 中，eslint 的配置文件是 .eslintrc.js，我们可以在项目根目录中创建该文件，并添加以下内容：
-------------- - -
----- -----
---- -
----- ----
--
-------- -
-----------------------
--------------------
--
-------------- -
------- --------------
--
------ -
------------- -------------------- --- ------------ - ------- - ------
-------------- -------------------- --- ------------ - ------- - -----
-
-其中，root 表示该配置文件是根配置文件，env 表示代码运行的环境，extends 表示扩展的规则集，parserOptions 表示解析器配置，rules 表示具体的规则。
在上面的配置中，我们使用了 plugin:vue/essential 和 eslint:recommended 两个规则集，前者是 eslint-plugin-vue 的规则集，后者是 eslint 的推荐规则集。我们还可以根据自己的需要添加其他的规则集。
3. 配置 lint 命令
在配置好 eslint 后，我们可以在 package.json 中添加一个 lint 命令，以便在开发过程中方便地运行 eslint。我们可以在 scripts 中添加以下内容：
---------- - ------- ------- ----- -------- ---- -
其中，--ext .js,.vue 表示检查 .js 和 .vue 文件，src 表示检查的目录。
4. 配置 lint-staged（可选）
如果我们希望在提交代码时自动运行 eslint，可以使用 lint-staged。我们可以先安装 lint-staged：
--- ------- ----------- ----- ----------
然后，在 package.json 中添加以下内容：
---------- -
-------------- -------------
--
-------------- -
------------- -
------- -------
---- ----
-
--
-------- -
-------- -
------------- ---- --- ------------
-
-其中，lint-staged 表示 lint-staged 的配置，*.{js,vue} 表示检查 .js 和 .vue 文件，eslint --fix 表示自动修复 eslint 错误，git add 表示添加修复后的代码到暂存区。
总结
通过以上的配置，我们可以在 vue-cli3 项目中使用 eslint 进行代码检查。eslint 可以帮助我们发现代码中的问题，提高代码的质量和可维护性。在实际开发中，我们可以根据自己的需要添加或修改 eslint 的规则，以适应项目的实际情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e047e01886fbafa4d7f9a5