详解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 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
微信小程序实现录音功能
Nov 22 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
js实现时钟定时器
2020/03/26 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
购房意向书范本
2014/04/01 职场文书
调查研究项目计划书
2014/04/29 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
付款证明格式范文
2015/06/19 职场文书
新郎新娘致辞
2015/07/31 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Go语言空白表示符_的实例用法
2021/07/04 Golang
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫