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 相关文章推荐
Javascript 解疑
Nov 11 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
利用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
德生9700DX电路分析
2021/03/02 无线电
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
有关php运算符的知识大全
2011/11/03 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
javascript验证身份证号
2015/03/03 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
ReactNative实现Toast的示例
2017/12/31 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
介绍一下linux的文件权限
2014/07/20 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
办理收楼委托书范本
2014/10/09 职场文书
社区务虚会发言材料
2014/10/20 职场文书
感恩教育主题班会
2015/08/12 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers