webpack引入eslint详解

Lin_R 发布于2019-08-22 13:57 / 3250人阅读

摘要：配置规则在文件中添加代码如下和是中规则的名称。安装，命令如下这个插件将会提醒模块脚本之间模拟浏览器共享全局变量的行为，因为这不适用于模块脚本。而用编译后的代码使用这款解析器可以避免不必要的麻烦。

webpack中eslint使用

首先，要使webpack支持eslint，就要要安装 eslint-loader ，命令如下:

npm install --save-dev eslint-loader

在 webpack.config.js 中添加如下代码：

{
    test: /.js$/,
    loader: "eslint-loader",
    enforce: "pre",
    include: [path.resolve(__dirname, "src")], // 指定检查的目录
    options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
        formatter: require("eslint-friendly-formatter") // 指定错误报告的格式规范
    }
}

注：formatter默认是stylish，如果想用第三方的可以安装该插件，如上方的示例中的 eslint-friendly-formatter 。

其次，要想webpack具有 eslint 的能力，就要安装eslint，命令如下：

npm install --save-dev eslint

最后，项目想要使用那些eslin规则，可以创建一个配置项文件 ".eslintrc.js"，代码如下:

module.exports = {
    root: true,    
    parserOptions: {
        sourceType: "module"
    },
    env: {
        browser: true,
    },
    rules: {
        "indent": ["error", 2],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],
        "no-console": "error",
        "arrow-parens": 0
    }
}

这样，一个简单的webpack引入eslint已经完成了。

这里讲一下 eslintrc.js 的配置使用，详细细节请参考http://eslint.cn/docs/user-guide

eslint 配置项

root 限定配置文件的使用范围

parser 指定eslint的解析器

parserOptions 设置解析器选项

extends 指定eslint规范

plugins 引用第三方的插件

env 指定代码运行的宿主环境

rules 启用额外的规则或覆盖默认的规则

globals 声明在代码中的自定义全局变量

在我们使用eslint时，配置文件中的 rules 配置项是否是不可或缺的？

答案是肯定的。不过我们也可以不用自定义reules，我们可以使用第三方的，这里我们就要使用extends配置项。

extends

我们可以使用eslint官方推荐的，也可以使用一些大公司提供的的，如：aribnb, google, standard。

在开发中我们一般使用第三方的。

官方推荐

只需在 .eslintrc.js 中添加如下代码：

extends: "eslint:recommended",
extends: "eslint:all",

了解详情可以参考一下官方规则表

第三方分享

使用第三方分享的，我们一般需要安装相关的插件代码如下：

npm install --save-dev eslint-config-airbnb // bnb
npm install --save-dev eslint-config-standard // standard

在 .eslintrc.js 中添加如下代码：

extends: "eslint:google",
// or
extends: "eslint:standard",

使用这些第三方的扩展，有时我们需要更新一些插件，比如standard：

eslint-plugin-import

不要慌，我们只要按照错误提示一步一步的安装这些插件即可。

虽然，这些第三方的扩展很不错，但是有时我们需要定义一些比较个性化的规则，我们就需要添加 rules 配置项。

配置规则

在.eslintrc.js 文件中添加 rules, 代码如下：

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

"semi" 和 "quotes" 是 ESLint 中规则的名称。第一个值是错误级别，可以使下面的值之一：

"off" or 0 - 关闭规则

"warn" or 1 - 将规则视为一个警告（不会影响退出码）

"error" or 2 - 将规则视为一个错误 (退出码为1)

这些规则一般分为两类：

添加默认或第三库中没有的

覆盖默认或第三库的

我们的项目中可能会有一些其他的文件也需要进行格式规范，如：html, vue, react等，对于这些文件的处理，我们需要引入第三方插件。

plugins（html）

安装 eslint-plugin-html ，命令如下：

npm install --save-dev eslint-plugin-html

这个插件将会提醒模块脚本之间模拟浏览器共享全局变量的行为，因为这不适用于模块脚本。

这个插件也可以扩展文件，如：.vue，.jsx

.eslintrc.js中，添加如下配置项：

settings: {
    "html/html-extensions": [".html", ".vue"],
    "html/indent": "+2",
},

而对于这种用 eslint-pulgin-html 扩展的的文件我们可以使用 eslint --ext .html,.vue src 进行检测，如果想要在开发中边写边检测，我们可以使用相应文件的loader进行处理。然后执行 npm run dev 就可以实现的功能。边写边检测的功能。

在开发中有时根据需要，我们可能在同一个项目不同的目录使用不同的 .eslintrc.js 文件，这时我们就需要使用配置项 root 。

限定使用范围 (root: true)

如果我们想要在不同的目录中使用不同的 .eslintrc, 我们就需要在该目录中添加如下的配置项：

{
    "root": true
}

如果我们不设置的话，它将会继续查找，知道更目录，如果更目录有配置文件它将会使用根目录的，这样会导致当前配置目录配置无法起作用的问题。

在开发中针对不同的情况我们要使用不同的解析器，而我们常用的就是 babel-eslint 。

parser（指定解析器）

babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。

babel-eslint 安装命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置项代码：

parser: "babel-eslint",

如果你使用的默认解析器的话，且在代码中使用了浏览器有兼容性的问题的js新特性，使用webpack编译就会出现问题，这时我们一般装最新的eslint或者安装是使用 babel-eslint 来解决问题。

env（环境）

在 .eslintrc.js 中添加如下代码：

"env": {
    "browser": true, //
    "node": true //
}

指定了环境，你就可以放心的使用它们的全局变量和属性。

global

指定全局变量。

在 .eslintrc.js 中添加如下代码：

"globals": {
    "var1": true,
    "var2": false 
}

参考源代码

webpack干货

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92660.html

Webpack 配置详解（含 4）——关注细节

摘要：由于这种差异我们将对预处理器文件的配置封装为函数，由参数生成对应配置，将文件放入文件内，将配置放在文件内。前言源代码熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置，但是为了满足我们的项目需求还是要自己进行配置，不过我们可以使用一些 webpack 的预设值。同时 webpack 也拆成了两部分，webpack 和 w...

jsbintask 2019-08-26 11:52 评论0 收藏0
vue-cli 构建 vue 项目详解

摘要：打开浏览器输入，会看到构建的项目的主页目录结构使用编辑器打开推荐使用，下面具体看看目录结构在中，根据我们在构建项目的时候的选项，有以下几个命令。构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli 。前端的三大框架都有自己的脚手架工具，其作用就是用配置好的模板迅速搭建起一个项目工程来，省去自己配置 webpack 配置文件的基本内容，大大降低了初学者构建项目的难度。这...

JeOam 2019-08-23 14:59 评论0 收藏0
前端代码质量管理（一）

导语: 随着业务的增长和开发团队的成员快速增加，其中很多新人来自于五湖四海各大门派，在编码的风格和习惯中也出现各异。通常在相互 codereview 时发现很多代码上的问题，久而久之代码出现了代码难以维护的问题，甚至还会出现低级错误。因此，我尝试在前端代码质量的管控上做了些探索，也总结了一些经验分享给大家。作者：郑振波本文大纲介绍编码规范冗余文件与代码 1. 编码规范在一些老项...

yy13818512006 2019-05-23 17:29 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换文件优化代码分割模块合并自...

wangbinke 2019-08-26 13:52 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0