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 中的内存泄露模式
Aug 13 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
javascript数组去掉重复
May 12 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 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
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
js尾调用优化的实现
2019/05/23 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python编程实现蚁群算法详解
2017/11/13 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
database面试题
2013/03/28 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
同事打架检讨书
2014/02/04 职场文书
补充协议书范本
2014/04/23 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server