详解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 相关文章推荐
广告显示判断
Aug 31 Javascript
js Event对象的5种坐标
Sep 12 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 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
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Python使用django搭建web开发环境
2017/06/09 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python如何求100以内的素数
2020/05/27 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
结婚典礼证婚词
2014/01/08 职场文书
违反学校规定检讨书
2014/01/18 职场文书
小学语文国培感言
2014/03/04 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
海底两万里读书笔记
2015/06/26 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers