vue+webpack中配置ESLint


Posted in Javascript onNovember 07, 2018

一、ESLint

协同开发过程中,经常感受到来自代码检视的恶意。代码习惯不一致,看半天;居然提交低级错误,我的天(??□′)?︵┻━┻!...研究了一番,决定使用ESLint来做代码规范检查。

二、配置方式

  • JavaScript注释:通过JavaScript注释把配置信息嵌入代码中。
  • package.json:在package.json文件中的eslintConfig字段中指定配置。
  • 配置文件:通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息,ESlint会查找并且自动读取配置文件。

三、配置过程(配置文件)

安装相关npm包

yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev

增加文件

  • .eslintignore 用来配置不需要检查的文件(类似git的.gitignore)。
  • .eslintrc.js 用来配置ESlint验证规则的配置文件。

修改webpack配置文件

module.exports = {
 module: {
  rules: [
   test: /\.(js|vue)$/,
   loader: "eslint-loader",
   enforce: "pre",
   //指定检查的目录
   include: [resolve(__dirname, 'src')],
   //eslint检查报告的格式规范
   options: {
    formatter: require("eslint-friendly-formatter")
   }
  ]
 }
}

四、配置文件详解

以.eslintrc.js为例

module.exports = {
 //一旦配置了root,ESlint停止在父级目录中查找配置文件
 root: true,
 //解析器
 parser: "babel-eslint",
 //想要支持的JS语言选项
 parserOptions: {
  //启用ES6语法支持(如果支持es6的全局变量{env: {es6: true}},则默认启用ES6语法支持)
  //此处也可以使用年份命名的版本号:2015
  ecmaVersion: 6,
  //默认为script
  sourceType: "module",
  //支持其他的语言特性
  ecmaFeatures: {
   //...
  }
 },
 //代码运行的环境,每个环境都会有一套预定义的全局对象,不同环境可以组合使用
 env: {
  es6: true,
  browser: true,
  jquery: true
 },
 //访问当前源文件中未定义的变量时,no-undef会报警告。
 //如果这些全局变量是合规的,可以在globals中配置,避免这些全局变量发出警告
 globals: {
  //配置给全局变量的布尔值,是用来控制该全局变量是否允许被重写
  test_param: true
 },
 //支持第三方插件的规则,插件以eslint-plugin-作为前缀,配置时该前缀可省略
 //检查vue文件需要eslint-plugin-vue插件
 plugins: ["vue"],
 //集成推荐的规则
 extends: ["eslint:recommended", "plugin:vue/essential"],
 //启用额外的规则或者覆盖默认的规则
 //规则级别分别:为"off"(0)关闭、"warn"(1)警告、"error"(2)错误--error触发时,程序退出
 rules: {
  //关闭“禁用console”规则
  "no-console": "off",
  //缩进不规范警告,要求缩进为2个空格,默认值为4个空格
  "indent": ["warn", 2, {
   //设置为1时强制switch语句中case的缩进为2个空格
   "SwitchCase": 1,
   //分别配置var、let和const的缩进
   "VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
  }],
  //定义字符串不规范错误,要求字符串使用双引号
  quotes: ["error", "double"],
  //....
  //更多规则可查看http://eslint.cn/docs/rules/
 }
}

使用JavaScript注释启用或禁止指定规则

/* eslint-disable */
alert('message');
/* eslint-enable no-alert, no-console*/
...

层叠配置

ESlint支持层叠配置,检测文件的规则是其目录层级结构中所有.eslintrc文件的组合,当规则冲突的时候,离检测文件最近的规则优先。

默认情况下,ESlint会沿着父级目录网上寻找配置文件,直到根目录。如果配置文件中有root: true,则ESlint会停止在父级目录中查找。

五、配置过程中出现的问题

出现错误:Use the latest vue-eslint-parser。

解决方法: 把parser: "babel-eslint"移动到parserOptions中。

{
 //parser: "babel-eslint",
 parserOptions: {
  parser: "babel-eslint",
  //...
 }
}

问题原因: eslint-plugin-vue中的很多规则都需要vue-eslint-parser检查<template>, vue-eslint-parser和babel-parser二者有冲突。

参考链接

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

Javascript 相关文章推荐
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
JSON 数据格式详解
Sep 13 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
利用jqgrid实现上移下移单元格功能
Nov 07 #Javascript
React 源码中的依赖注入方法
Nov 07 #Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 #Javascript
详解react native页面间传递数据的几种方式
Nov 07 #Javascript
微信小程序使用npm支持踩坑
Nov 07 #Javascript
Angular Material Icon使用详解
Nov 07 #Javascript
详解Webpack loader 之 file-loader
Nov 07 #Javascript
You might like
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
python thread 并发且顺序运行示例
2009/04/09 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
使用Python写个小监控
2016/01/27 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Django中使用Celery的方法示例
2018/11/29 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
医院护士的求职信范文
2013/12/26 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
教研活动主持词
2015/07/03 职场文书