详解vue-cli中的ESlint配置文件eslintrc.js


Posted in Javascript onSeptember 25, 2017

本文讲解vue-cli脚手架根目录文件.eslintrc.js,分享给大家,具体如下:

1.eslint简介

eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件。当有不符合配置文件内容的代码出现就会报错或者警告

2.安装exlint

npm init -y
npm install eslint --save-dev
node_modules\.bin\eslint --init 初始化配置文件,此配置文件配置好之后,vscode编辑器自动识别

3.vue-cli的.eslintrc.js配置文件的解释

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  //此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true, 
  //此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使其与ESLint解析
  parser: 'babel-eslint',
  //此项是用来指定javaScript语言类型和风格,sourceType用来指定js导入的方式,默认是script,此处设置为module,指某块导入方式
  parserOptions: {
    sourceType: 'module'
  },
  //此项指定环境的全局变量,下面的配置指定为浏览器环境
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  // 此项是用来配置标准的js风格,就是说写代码的时候要规范的写,如果你使用vs-code我觉得应该可以避免出错
  extends: 'standard',
  // required to lint *.vue files
  // 此项是用来提供插件的,插件名称省略了eslint-plugin-,下面这个配置是用来规范html的
  plugins: [
    'html'
  ],
  // add your custom rules here
  // 下面这些rules是用来设置从插件来的规范代码的规则,使用必须去掉前缀eslint-plugin-
  // 主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致
  // "off" -> 0 关闭规则
  // "warn" -> 1 开启警告规则
  //"error" -> 2 开启错误规则
  // 了解了上面这些,下面这些代码相信也看的明白了
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

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

Javascript 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
js实现漫天星星效果
Jan 19 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
JavaScript 自定义事件之我见
Sep 25 #Javascript
详解在vue-cli中使用路由
Sep 25 #Javascript
Bootstrap一款超好用的前端框架
Sep 25 #Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 #Javascript
javascript input输入框模糊提示功能的实现
Sep 25 #Javascript
vue-cli中的webpack配置详解
Sep 25 #Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
PHP计数器的实现代码
2013/06/08 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php表单敏感字符过滤类
2014/12/08 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python数据结构之翻转链表
2017/02/25 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
如何在python中执行另一个py文件
2020/04/30 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
《小草和大树》教学反思
2014/02/16 职场文书
医院标语大全
2014/06/23 职场文书
西岭雪山导游词
2015/02/06 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Python多个MP4合成视频的实现方法
2021/07/16 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python