前言
在前端开发中，不可避免地需要使用到 Webpack 这类打包工具，而在开发过程中代码质量的保证显得尤为重要。ESLint 是一个开源的 JavaScript 严格语法检查工具，能够帮助我们在代码编写的时候发现潜在的问题，提升代码质量。本文将介绍如何在 Webpack 打包中使用 ESLint，希望对前端开发者实际工作中遇到的问题有所帮助。
步骤
第一步：安装 ESLint 和相关插件
在使用 ESLint 之前，需要先在本地安装 ESLint 及相关插件。
打开命令行终端，切换到项目根目录执行以下命令：
npm install eslint eslint-plugin-vue eslint-config-standard babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise -D
这些插件的功能如下：
eslint：ESLint 核心工具；eslint-plugin-vue：ESLint 专门针对 Vue 语法的插件；eslint-config-standard：遵循 Standard 风格的 ESLint 配置；babel-eslint：使用 Babel 解析ES6 代码；eslint-plugin-import：用于解析 import 语法；eslint-plugin-node：针对 Node.js 环境下的 ESLint 插件；eslint-plugin-promise：浏览器中 promises 的恰当用法。
以上这些插件可以适应绝大部分的 ESLint 检查需求。根据实际项目需求，也可以自行安装其他插件。
第二步：添加 ESLint 配置文件
完成插件的安装之后，在项目根目录下新建一个 .eslintrc.js 文件。这个文件就是 ESLint 的配置文件，配置文件中定义了代码检查规则和一些其它配置。
以下是一个 .eslintrc.js 文件的例子：
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
----- ----
--
-------- -
-----------------------
----------
--
-------------- -
------- --------------
--
------ -
------------- -------------------- --- ------------ - ------- - ------
-------------- -------------------- --- ------------ - ------- - -----
--
-------- -
-- -----
-
--这里我们选择了 plugin:vue/essential 和 standard 作为规则扩展，意味着我们使用了 Vue.js 代码检查以及遵循了 Standard 规范。
root：指定 ESLint 的运行环境，一般设置为true。env：定义你想启用的环境（指定你想要预定义的全局变量）。extends：扩展一个共享的配置文件。parserOptions：指定 JavaScript 语言和语言选项。rules：制定规则。
上面介绍了部分常用选项配置，若想详细了解 ESLint 配置请参考 ESLint 官方文档。
第三步：在 Webpack 中使用 ESLint
在已安装好 ESLint、创建好配置文件的情况下，在 Webpack 配置文件 webpack.config.js 中添加 ESLint 插件即可在编译时检查代码。
以下是一个简单的例子：
-- -------------------- ---- -------
-- -----------------
----- ------------ - --------------------------------
-------------- - -
-------- -
--- --------------
-------- ------
----------- ------ -------
-------- ----------------
--
-
-以上是 Webpack 使用 ESLint 的简单配置，ESLint 插件将在 src 目录下检查 .js 和 .vue 文件，忽略 node_modules 目录。这里的 ESLintPlugin 是使用 eslint-webpack-plugin 插件创建的实例，可以根据实际情况自行调整。
接下来使用 Webpack 打包项目即可自动执行 ESLint 检查。
第四步：在编辑器中添加 ESLint 插件
有了 ESLint 的支持，从根本上避免编写不规范的代码，提升代码质量。但如果每次需要运行 Webpack 打包才能在编译时检查代码显然是十分繁琐的。此时我们可以在编辑器中安装 ESLint 插件，实时提供代码检查信息，帮助我们找出潜在问题。这里以 VS Code 为例，在 VS Code 中安装了 ESLint 插件之后，在 .eslintrc.js 文件中配置，VS Code 便可以直接根据配置文件中的规则进行代码检查。
总结
这篇文章介绍了在 Webpack 开发中容易遇到的问题：如何在 Webpack 打包中使用 ESLint。其中，ESLint 能够协助我们在代码编写阶段发现潜在的问题，提升代码质量。以上是一个简单的例子，合理地使用 ESLint 将有助于我们提高代码质量，避免出现一些低级错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652102ea95b1f8cacd875026