webpack入门学习笔记08 —— 使用ESLint检查项目代码

1. 写在前面

JavaScript做为一门动态语言，灵活性是它的一个优势，同时又是一个缺点。有的时候由于语法太过于灵活，致使一些隐藏的Bug被咱们忽略，代码质量得不到保证。

为了提到项目代码的质量，大多数架构师在初始化项目的时候，都会使用一个检查工具来帮助实现代码的规范性和正确性，同时也能够提升项目代码后期的可维护性。在基于webpack的项目中，常常被使用到的代码检查工具是 ESLint 。

它就像是一个测试人员同样，告诉你哪里写得不对（errors），哪里写得很差（warnings）。那么在本篇博客中，就讲解如何在本身的项目中，配置使用 ESLint 这一检查工具。主要内容有：

• 安装并配置 ESLint-loader
• 根据实际状况，编写ESLint的配置文件

2. 安装并配置 ESLint-loader

ESLint 这一代码检查工具在项目中的使用体现是一个 loader ，既然是loader，那么使用步骤和以前博客中讲述的几个loader同样，首先是安装，而后在webpack配置文件中，使用这些loader。

使用如下安装命令，安装 eslint 和 eslint-loader ：

yarn add eslint eslint-loader -D
复制代码

安装完成以后，在 webpack.config.js 文件中，配置使用该loader的规则，配置很是简单，代码以下：

module: {
    rules: [
        /** 其余的配置规则，节省篇幅，故省略 **/ 
        {
            test: /\.js$/, 
            use: {
                loader: 'eslint-loader', 
                options: {
                    enforce: 'pre' 
                }
            },
            exclude: /node_modules/
        }
    ]
}
复制代码

这里将其余的配置规则省略了，若是你想看其余的配置规则，能够查看个人 GitHub仓库 - webpack-learning ,或者经过本文末尾的连接，跳转到我以前的博客中进行查看。

这里解释一下上面代码中标有注释的两个属性： enforce 和 exclude ：

• enforce: 该属性表示loader的种类，loader有四种：前置loader、后置loader、普通loader、内联loader 。该属性默认是 normal(即默认loader) 。能够根据须要设置成 pre(前置loader) 或者 post(后置loader) 。

  属性的而不一样致使loader的一些行为不一样，前面博客中讲过：在webpack.config.js配置文件中，loader的执行顺序是 从右到左，从下到上 。可是：

  若是是前置loader，那么webpack会 优先 使用该loader处理文件；

  若是是后置loader，那么webpack会在普通loader 以后 处理文件；

  若是是内联loader，能够在 .js 文件中使用，而 不仅是 在webpack.config.js配置文件中使用。-

• exclude ：排除正则表达式匹配的文件或者文件夹，好比上述规则中，不使用eslint-loader对 node_modules 文件夹中的代码进行校验。

好了，如今配置完成以后，你是否是想立刻体验一下ESLint的强大功能？若是这个时候你进行打包编译项目，那么会获得一下错误信息：

错误提示易懂，是由于咱们没有配置ESlint的处理规则，这也是咱们下面要讲述的知识点。

3. 编写ESLint的配置文件

若是你对ESLint很是熟悉，那么彻底能够本身动手编写该配置文件，可是大多数人可能对ESLint的配置不是那么熟悉，这里推荐你们到 官网的Demo配置页面 ,根据本身的需求，来获取ESLint配置文件：

在该页面，根据实际状况选择你的项目须要，而后点击页面底部的 Download .eslintrc.json file 便可下载获得一份ESLint配置文件。

将这个文件重命名（在文件名以前加一个 点）获得 .eslintrc.json 文件，而后将这个文件放到你的项目根目录下，和 webpack.config.js 文件同级。

如此一来，便配置好了ESLint。这个时候再来打包编译项目或者开启本地开发服务器，就能够看到ESLint发挥的做用了。好比，一个不规范的代码可能会获得如下错误提示：

4. 写在后面

以上即是这篇博客的所有内容，若是想学习更多ESLInt的知识，推荐访问ESLint的官网：cn.eslint.org/ 。

上一篇: webpack入门学习笔记07 —— 关于babel的一些补充

下一篇: webpack入门学习笔记09 —— 在项目中引入全局变量