给vue项目添加ESLint的详细步骤


Posted in Javascript onSeptember 29, 2017

eslint配置方式有两种:

1.注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里

2.配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息。这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里,这两种方式ESLint都会自动寻找然后读取,或者你也可以在命令行里指定一个配置文件。

有几种东西是可以配置的:

  • 环境:你的脚本会在哪种环境下运行。每个环境带来了一组特定的预定义的全局变量。
  • 全局变量:脚本运行期间会访问额外的全局变量。
  • 规则:使用那些规则,并且规则的等级是多少。

我们这里使用配置文件.eslintrc.js来配置,它导出一个模块供ESLint识别。

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

module.exports = {
 root: true,
 parser: 'babel-eslint',//解析器,这里我们使用babel-eslint
 parserOptions: {
  sourceType: 'module'//类型为module,因为代码使用了使用了ECMAScript模块
 },
 env: {
  browser: true,//预定义的全局变量,这里是浏览器环境
 },
 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 //extends: 'standard', //扩展,可以通过字符串或者一个数组来扩展规则
 // required to lint *.vue files
 plugins: [
  'html' //插件,此插件用于识别文件中的js代码,没有MIME类型标识没有script标签也可以识别到,因此拿来识别.vue文件中的js代码
 ],
 // add your custom rules here
 'rules': {
  //这里写自定义规则
 }
}

ESLint的规则有三种级别:

  • "off"或者0,不启用这个规则
  • "warn"或者1,出现问题会有警告
  • "error"或者2,出现问题会报错

有时候代码里有些特殊情况需要我们在某一行或者某几行关闭ESLint检测,可以使用注释:

下面的代码会关闭所有规则

/* eslint-disable */

alert('foo');

/* eslint-enable */

下面的代码会关闭某一行的所有规则

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

下面的代码在某一行关闭指定的规则

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

常用规则:

规则的细节请到ESLint官方网站查看http://eslint.org/docs/rules/

'rules': {
   "comma-dangle": ["error", "never"], //是否允许对象中出现结尾逗号
   "no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符
   "no-console": 2, //不允许出现console语句
   "no-constant-condition": 2, //条件语句的条件中不允许出现恒定不变的量
   "no-control-regex": 2, //正则表达式中不允许出现控制字符
   "no-debugger": 2, //不允许出现debugger语句
   "no-dupe-args": 2, //函数定义的时候不允许出现重复的参数
   "no-dupe-keys": 2, //对象中不允许出现重复的键
   "no-duplicate-case": 2, //switch语句中不允许出现重复的case标签
   "no-empty": 2, //不允许出现空的代码块
   "no-empty-character-class": 2, //正则表达式中不允许出现空的字符组
   "no-ex-assign": 2, //在try catch语句中不允许重新分配异常变量
   "no-extra-boolean-cast": 2, //不允许出现不必要的布尔值转换
   "no-extra-parens": 0, //不允许出现不必要的圆括号
   "no-extra-semi": 2, //不允许出现不必要的分号
   "no-func-assign": 2, //不允许重新分配函数声明
   "no-inner-declarations": ["error", "functions"], //不允许在嵌套代码块里声明函数
   "no-invalid-regexp": 2, //不允许在RegExp构造函数里出现无效的正则表达式
   "no-irregular-whitespace": 2, //不允许出现不规则的空格
   "no-negated-in-lhs": 2, //不允许在in表达式语句中对最左边的运算数使用取反操作
   "no-obj-calls": 2, //不允许把全局对象属性当做函数来调用
   "no-regex-spaces": 2, //正则表达式中不允许出现多个连续空格
   "quote-props": 2, //对象中的属性名是否需要用引号引起来
   "no-sparse-arrays": 2, //数组中不允许出现空位置
   "no-unreachable": 2, //在return,throw,continue,break语句后不允许出现不可能到达的语句
   "use-isnan": 2, //要求检查NaN的时候使用isNaN()
   "valid-jsdoc": ["error", {
     "requireReturn": false,
     "requireParamDescription": false,
     "requireReturnDescription": true
   }], //强制JSDoc注释
   "valid-typeof": ["error", {
     "requireStringLiterals": true
   }], //在使用typeof表达式比较的时候强制使用有效的字符串
   "block-scoped-var": 2, //将变量声明放在合适的代码块里
   "complexity": 0, //限制条件语句的复杂度
   "consistent-return": 2, //无论有没有返回值都强制要求return语句返回一个值
   "curly": ["error", "all"], //强制使用花括号的风格
   "default-case": 0, //在switch语句中需要有default语句
   "dot-notation": ["error", {"allowKeywords": false, "allowPattern": ""}], //获取对象属性的时候使用点号
   "eqeqeq": ["error", "smart"], //比较的时候使用严格等于
   "no-alert": 1, //不允许使用alert,confirm,prompt语句
   "no-caller": 2, //不允许使用arguments.callee和arguments.caller属性
   "guard-for-in": 0, //监视for in循环,防止出现不可预料的情况
   "no-div-regex": 2, //不能使用看起来像除法的正则表达式
   "no-else-return": 0, //如果if语句有return,else里的return不用放在else里
   "no-labels": ["error", {
     "allowLoop": false,
     "allowSwitch": false
   }], //不允许标签语句
   "no-eq-null": 2, //不允许对null用==或者!=
   "no-eval": 2, //不允许使用eval()
   "no-extend-native": 2, //不允许扩展原生对象
   "no-extra-bind": 2, //不允许不必要的函数绑定
   "no-fallthrough": 2, //不允许switch按顺序全部执行所有case
   "no-floating-decimal": 2, //不允许浮点数缺失数字
   "no-implied-eval": 2, //不允许使用隐式eval()
   "no-iterator": 2, //不允许使用__iterator__属性
   "no-lone-blocks": 2, //不允许不必要的嵌套代码块
   "no-loop-func": 2, //不允许在循环语句中进行函数声明
   "no-multi-spaces": 2, //不允许出现多余的空格
   "no-multi-str": 2, //不允许用\来让字符串换行
   "no-global-assign": 2, //不允许重新分配原生对象
   "no-new": 2, //不允许new一个实例后不赋值或者不比较
   "no-new-func": 2, //不允许使用new Function
   "no-new-wrappers": 2, //不允许使用new String,Number和Boolean对象
   "no-octal": 2, //不允许使用八进制字面值
   "no-octal-escape": 2, //不允许使用八进制转义序列
   "no-param-reassign": 0, //不允许重新分配函数参数"no-proto": 2, //不允许使用__proto__属性
   "no-redeclare": 2, //不允许变量重复声明
   "no-return-assign": 2, //不允许在return语句中使用分配语句
   "no-script-url": 2, //不允许使用javascript:void(0)
   "no-self-compare": 2, //不允许自己和自己比较
   "no-sequences": 2, //不允许使用逗号表达式
   "no-throw-literal": 2, //不允许抛出字面量错误 throw "error"
   "no-unused-expressions": 2, //不允许无用的表达式
   "no-void": 2, //不允许void操作符
   "no-warning-comments": [1, {"terms": ["todo", "fixme", "any other term"]}], //不允许警告备注
   "no-with": 2, //不允许使用with语句
   "radix": 1, //使用parseInt时强制使用基数来指定是十进制还是其他进制
   "vars-on-top": 0, //var必须放在作用域顶部
   "wrap-iife": [2, "any"], //立即执行表达式的括号风格
   "yoda": [2, "never", {"exceptRange": true}], //不允许在if条件中使用yoda条件
   "strict": [2, "function"], //使用严格模式
   "no-catch-shadow": 2, //不允许try catch语句接受的err变量与外部变量重名"no-delete-var": 2, //不允许使用delete操作符
   "no-label-var": 2, //不允许标签和变量同名
   "no-shadow": 2, //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
   "no-shadow-restricted-names": 2, //js关键字和保留字不能作为函数名或者变量名
   "no-undef": 2, //不允许未声明的变量
   "no-undef-init": 2, //不允许初始化变量时给变量赋值undefined
   "no-undefined": 2, //不允许把undefined当做标识符使用
   "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], //不允许有声明后未使用的变量或者参数
   "no-use-before-define": [2, "nofunc"], //不允许在未定义之前就使用变量"indent": 2, //强制一致的缩进风格
   "brace-style": [2, "1tbs", { "allowSingleLine": false}], //大括号风格
   "camelcase": [2, {"properties": "never"}], //强制驼峰命名规则
   "comma-style": [2, "last"], //逗号风格
   "consistent-this": [0, "self"], //当获取当前环境的this是用一样的风格
   "eol-last": 2, //文件以换行符结束
   "func-names": 0, //函数表达式必须有名字
   "func-style": 0, //函数风格,规定只能使用函数声明或者函数表达式
   "key-spacing": [2, {"beforeColon": false, "afterColon": true}], //对象字面量中冒号的前后空格
   "max-nested-callbacks": 0, //回调嵌套深度
   "new-cap": [2, {"newIsCap": true, "capIsNew": false}], //构造函数名字首字母要大写
   "new-parens": 2, //new时构造函数必须有小括号
   "newline-after-var": 0, //变量声明后必须空一行
   "no-array-constructor": 2, //不允许使用数组构造器
   "no-inline-comments": 0, //不允许行内注释
   "no-lonely-if": 0, //不允许else语句内只有if语句
   "no-mixed-spaces-and-tabs": [2, "smart-tabs"], //不允许混用tab和空格
   "no-multiple-empty-lines": [2, {"max": 2}], //空行最多不能超过两行
   "no-nested-ternary": 2, //不允许使用嵌套的三目运算符
   "no-new-object": 2, //禁止使用new Object()
   "fun-call-spacing": 2, //函数调用时,函数名与()之间不能有空格
   "no-ternary": 0, //不允许使用三目运算符
   "no-trailing-spaces": 2, //一行最后不允许有空格
   "no-underscore-dangle": 2, //不允许标识符以下划线开头
   "no-extra-parens": 0, //不允许出现多余的括号
   "one-var": 0, //强制变量声明放在一起
   "operator-assignment": 0, //赋值运算符的风格
   "padded-blocks": [2, "never"], //块内行首行尾是否空行
   "quote-props": 0, //对象字面量中属性名加引号
   "quotes": [1, "single", "avoid-escape"], //引号风格
   "semi": [2, "always"], //强制语句分号结尾
   "semi-spacing": [2, {"before": false, "after": true}], //分后前后空格
   "sort-vars": 0, //变量声明时排序
   "space-before-blocks": [2, "always"], //块前的空格
   "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], //函数定义时括号前的空格
   "space-infix-ops": [2, {"int32Hint": true}], //操作符周围的空格
   "keyword-spacing": 2, //关键字前后的空格
   "space-unary-ops": [2, { "words": true, "nonwords": false}], //一元运算符前后不要加空格
   "wrap-regex": 2, //正则表达式字面量用括号括起来
   "no-var": 0, //使用let和const代替var
   "generator-star-spacing": [2, "both"], //生成器函数前后空格
   "max-depth": 0, //嵌套块深度
   "max-len": 0, //一行最大长度,单位为字符
   "max-params": 0, //函数最多能有多少个参数
   "max-statements": 0, //函数内最多有几个声明
   "no-bitwise": 0, //不允许使用位运算符
   "no-plusplus": 0 //不允许使用++ --运算符
 }

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

Javascript 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
微信小程序 POST请求的实例详解
Sep 29 #Javascript
微信小程序之数据缓存的实例详解
Sep 29 #Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 #Javascript
微信小程序中setInterval的使用方法
Sep 29 #Javascript
vue生成随机验证码的示例代码
Sep 29 #Javascript
JS设计模式之单例模式(一)
Sep 29 #Javascript
微信小程序的日期选择器的实例详解
Sep 29 #Javascript
You might like
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP分页类集锦
2014/11/18 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
php实现的xml操作类
2016/01/15 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jquery实现动态画圆
2014/12/04 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[01:13]这,就是刀塔
2014/07/16 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python使用psutil模块获取系统状态
2016/08/27 Python
python在非root权限下的安装方法
2018/01/23 Python
python批量爬取下载抖音视频
2019/06/17 Python
Puppeteer使用示例详解
2019/06/20 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
程序集与命名空间有什么不同
2014/07/25 面试题
员工试用期考核自我鉴定
2014/04/13 职场文书
论文指导教师评语
2014/04/28 职场文书
教育合作协议范本
2014/10/17 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
六五普法心得体会2016
2016/01/21 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
个人道歉信大全
2019/04/11 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python