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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
koa-router源码学习小结
Sep 07 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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 输出简单动态WAP页面
2009/06/09 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
sae使用smarty模板的方法
2013/12/17 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
js实现自定义路由
2017/02/04 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python write无法写入文件的解决方法
2019/01/23 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
会计专业毕业生自我鉴定
2013/10/29 职场文书
服务行业演讲稿
2014/09/02 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
入伍通知书
2015/04/23 职场文书
学校教学工作总结2015
2015/05/19 职场文书
国富论读书笔记
2015/06/26 职场文书
Java版 单机五子棋
2022/05/04 Java/Android