webpack引入eslint配置详解


Posted in Javascript onJanuary 22, 2018

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 配置项

  1. root 限定配置文件的使用范围
  2. parser 指定eslint的解析器
  3. parserOptions 设置解析器选项
  4. extends 指定eslint规范
  5. plugins 引用第三方的插件
  6. env 指定代码运行的宿主环境
  7. rules 启用额外的规则或覆盖默认的规则
  8. 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 中 规则 的名称。第一个值是错误级别,可以使下面的值之一:

  1. "off" or 0 - 关闭规则
  2. "warn" or 1 - 将规则视为一个警告(不会影响退出码)
  3. "error" or 2 - 将规则视为一个错误 (退出码为1)

这些规则一般分为两类:

  1. 添加默认或第三库中没有的
  2. 覆盖默认或第三库的

我们的项目中可能会有一些其他的文件也需要进行格式规范,如: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 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
js数组的操作指南
Dec 28 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
jQuery事件详解
Feb 23 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 #jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 #jQuery
JavaScript中EventLoop介绍
Jan 22 #Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 #Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 #Javascript
vue 项目常用加载器及配置详解
Jan 22 #Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 #Javascript
You might like
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
python实现程序重启和系统重启方式
2020/04/16 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
《海底世界》教学反思
2014/04/16 职场文书
服务之星事迹材料
2014/05/03 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python