详解Eslint 配置及规则说明

前端之家收集整理的这篇文章主要介绍了详解Eslint 配置及规则说明前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了详解Eslint 配置及规则说明,分享给大家,具体如下:

中文官方网站

安装

可以全局安装,也可以在项目下面安装。

如下是在项目中安装示例,只需要在 package.json 中添加如下配置,并进行安装:

配置

配置方式有两种,但建议使用文件配置的形式,比较独立,便于维护。

使用文件配置的方式:在项目的根目录下,新建一个名为 .eslintrc 的文件,在此文件添加一些检查规则。

文件配置方式

env:你的脚本将要运行在什么环境中

Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等

globals:额外的全局变量

rules:开启规则和发生错误时报告的等级

规则的错误等级有三种:

  • 0或'off':关闭规则。
  • 1或'warn':打开规则,并且作为一个警告(并不会导致检查不通过)。
  • 2或'error':打开规则,并且作为一个错误 (退出码为1,检查不通过)。

参数说明:

  • 参数1 : 错误等级
  • 参数2 : 处理方式

配置代码注释方式

有时我们可能要在代码中忽略eslint的某种检查,或者加入某种特定检查,此时我们可以用如下的方式:

示例:

忽略 no-undef 检查 /* eslint-disable no-undef */

忽略 no-new 检查 /* eslint-disable no-new */

设置检查 /*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/

eslint 检查指令

检查且修复 eslint * --fix

检查指定文件 eslint app.js --fix

WebStorm上的使用

Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> Eslint -> Enable (勾选) -> Apply -> OK

规则说明

"array-bracket-spacing": [2,"never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1,"1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2,//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2,"last"],//逗号风格,换行时在行首还是行尾
"complexity": [0,11],//循环复杂度
"computed-property-spacing": [0,//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2,"that"],//this别名
"constructor-super": 0,//非派生类不能调用super,派生类必须调用super
"curly": [2,"all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾
"dot-notation": [0,{ "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0,"declaration"],//函数风格,规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2,4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0,{ "beforeColon": false,"afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0,//嵌套块深度
"max-len": [0,80,//字符串最大长度
"max-nested-callbacks": [0,2],//回调嵌套深度
"max-params": [0,3],//函数最多只能有3个参数
"max-statements": [0,10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0,//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0,"always"],//赋值运算符 += -=什么的
"operator-linebreak": [2,"after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1,"single"],//引号类型 `` "" ''
"quote-props":[2,//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成函数必须有yield
"semi": [2,//语句强制分号结尾
"semi-spacing": [0,{"before": false,"after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0,//关键字后面是否要空一格
"space-before-blocks": [0,//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0,//函数定义时括号前面要不要有空格
"space-in-parens": [0,//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0,{ "words": true,"nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2,"inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2,"never"]//禁止尤达条件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章