什么是 ESLint
ESLint 是一个开源的 JavaScript 代码检查工具，用于检查和发现代码中的问题。它可以帮助开发者在编写代码时遵循一定的规范和约定，提高代码质量和可读性，减少出错的概率，提高开发效率。ESLint 支持多种配置和插件，可以根据项目需求进行自定义配置。
安装 ESLint
在 Vue-cli3 项目中安装 ESLint 非常简单，只需要在项目根目录下运行以下命令即可：
npm install eslint --save-dev
配置 ESLint
安装完成后，我们需要进行一些配置才能让 ESLint 在项目中发挥作用。在 Vue-cli3 项目中，我们可以通过以下几个步骤来配置 ESLint：
步骤一：创建 .eslintrc.js 文件
在项目根目录下创建一个 .eslintrc.js 文件，用于存放 ESLint 的配置信息。我们可以手动创建该文件，也可以通过运行以下命令来生成该文件：
./node_modules/.bin/eslint --init
运行该命令时，会提示你进行一些选择，例如使用哪种风格的代码规范、使用哪种插件等等。根据项目需求进行选择即可。
步骤二：在 package.json 文件中添加脚本
在 package.json 文件的 scripts 字段中添加一个 lint 命令，用于运行 ESLint：
{
"scripts": {
"lint": "eslint ."
}
}步骤三：在编辑器中安装 ESLint 插件
在编辑器中安装 ESLint 插件可以让我们在编写代码时实时检查错误，并给出相应的提示。常见的编辑器如 VS Code、Sublime Text、Atom 等都支持 ESLint 插件。
使用 ESLint
配置完成后，我们就可以使用 ESLint 来检查代码了。运行以下命令即可检查项目中的所有 JavaScript 文件：
npm run lint
如果有错误或警告，ESLint 会给出相应的提示。我们可以通过编辑器中的插件来修复这些错误或警告。
配置示例
下面是一个简单的 .eslintrc.js 配置示例，用于检查 Vue 项目中的 JavaScript 代码：
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
----- -----
-------- ----
--
-------- -
-----------------------
--------------------
--
-------- -
-----
--
------ -
------------- ------
-------------- ------
--------------------- -------
--
-------------- -
------- --------------
-
-该配置使用了 eslint:recommended 和 plugin:vue/essential 两个预设，同时禁用了 console 和 debugger 两个函数的使用，并开启了对未使用的变量的检查。我们也可以根据项目需求进行自定义配置。
总结
在 Vue-cli3 项目中安装并配置 ESLint 可以帮助我们规范代码、提高代码质量、减少出错的概率、提高开发效率。ESLint 的配置和使用非常简单，只需要按照上述步骤进行即可。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e3cf201886fbafa4017f22