由于头几天发明 CSDN上有直接把我文章 复制过去然后标原创的状况,以后会一致在博客头部到场原文链接~
在良久之前就想经由过程东西来范例本身的代码作风,削减递次失足的几率,假如看过我的一个前端递次猿的Sublime Text3的自我教养,这篇博客的朋侪,一定晓得在当时我运用SublimeLinter-jshint
插件来范例作风,然则实际上一向懒癌发生发火也没去看它的文档,运用着它默许的划定规矩。不过现在是时刻切换到 ESLint 了!
作为一个有理想有志向的前端工程师,只是运用默许划定规矩,而不是看完文档了然于心,显然是不可滴 ^_^.. 团队合作时,如果团队的代码作风一致,能够大大削减沟通本钱。(实在面试时和老大聊到代码范例,当时就说到用 JSHint ,或许 ESLint 等东西来一致的。。。这也算是我来填一个坑吧~)
好了,前情摘要就到这,我们最先吧!
什么是 ESLint ?
ESLint 是在 ECMAScript/JavaScript 代码中辨认和报告形式婚配的东西,它的目的是保证代码的一致性和防止毛病。在许多方面,它和 JSLint、JSHint 相似,除了少数的破例:
ESLint 运用 Espree 剖析 JavaScript。
ESLint 运用 AST 去剖析代码中的形式
ESLint 是完整插件化的。每一个划定规矩都是一个插件而且你能够在运转时增加更多的划定规矩。
以上来自官网。不想再说下去,横竖就是一个代码作风检测东西就对了
怎样运用
装置
npm install -g eslint
假如你第一次运用 ESLint,你必需运用 –init 敕令新建一个设置文件:
eslint --init
运用 ESLint 检测任何 JavaScript 文件:
eslint test.js test2.js
ESLint 中一些划定规矩运转敕令它能够帮你自动修复
eslint test.js --fix
为了能够更直观的反应,能够更多的会直接装置编辑器插件来举行毛病提醒,以Sublime 为例:
在 package control
中 ,先装置在 SublimeLinter
,再装置 SublimeLinter-contrib-eslint
在项目目次下新建 .eslintrc
文件,自定义划定规矩。
从新载入文件应当就见效了(不见效的话 Ctrl+Shift+P
挪用敕令面板 找到sublimelinter: toggle linter
设置见效就好了),其他的编辑器殊途同归,就不再说了。
关于在怎样在构建东西中运用,在这里不做申明(官网有)
划定规矩定义
ESLint 支撑几种花样的设置文件,假如统一个目次下有多个设置文件,ESLint 只会运用一个。优先级递次以下:
JavaScript – 运用 .eslintrc.js 然后输出一个设置对象。
YAML – 运用 .eslintrc.yaml 或 .eslintrc.yml 去定义设置的组织。
JSON -运用 .eslintrc.json 去定义设置的组织,ESLint 的 JSON 文件许可 JavaScript 作风的解释。
Deprecated -运用 .eslintrc,能够使 JSON 也能够是 YAML。
package.json – 在 package.json 里建立一个 eslintConfig属性,在那里定义你的设置。
下面就是划定规矩啦,本人运用了.eslintrc
花样,申明也在里面:
{
// 环境定义了预定义的全局变量。
"env": {
//环境定义了预定义的全局变量。更多在官网检察
"browser": true,
"node": true,
"commonjs": true,
"amd": true,
"es6":true,
"mocha":true
},
// JavaScript 言语选项
"parserOptions": {
// ECMAScript 版本
"ecmaVersion": 6,
"sourceType": "script",//module
// 想运用的分外的言语特征:
"ecmaFeatures": {
// 许可在全局作用域下运用 return 语句
"globalReturn":true,
// impliedStric
"impliedStrict":true,
// 启用 JSX
"jsx":true
}
},
/**
* "off" 或 0 - 封闭划定规矩
* "warn" 或 1 - 开启划定规矩,运用正告级别的毛病:warn (不会致使递次退出),
* "error" 或 2 - 开启划定规矩,运用毛病级别的毛病:error (当被触发的时刻,递次会退出)
*/
"rules": {
////////////////
// 能够的毛病 //
////////////////
// 制止前提表达式中涌现赋值操作符
"no-cond-assign": 2,
// 禁用 console
"no-console": 0,
// 制止在前提中运用常量表达式
// if (false) {
// doSomethingUnfinished();
// } //cuowu
"no-constant-condition": 2,
// 制止在正则表达式中运用掌握字符 :new RegExp("\x1f")
"no-control-regex": 2,
// 数组和对象键值对末了一个逗号, never参数:不能带末端的逗号, always参数:必需带末端的逗号,
// always-multiline:多行形式必需带逗号,单行形式不能带逗号
"comma-dangle": [1, "always-multiline"],
// 禁用 debugger
"no-debugger": 2,
// 制止 function 定义中涌现重名参数
"no-dupe-args": 2,
// 制止对象字面量中涌现反复的 key
"no-dupe-keys": 2,
// 制止反复的 case 标签
"no-duplicate-case": 2,
// 制止空语句块
"no-empty": 2,
// 制止在正则表达式中运用空字符集 (/^abc[]/)
"no-empty-character-class": 2,
// 制止对 catch 子句的参数从新赋值
"no-ex-assign": 2,
// 制止不必要的布尔转换
"no-extra-boolean-cast": 2,
// 制止不必要的括号 //(a * b) + c;//报错
"no-extra-parens": 0,
// 制止不必要的分号
"no-extra-semi": 2,
// 制止对 function 声明从新赋值
"no-func-assign": 2,
// 制止在嵌套的块中涌现 function 或 var 声明
"no-inner-declarations": [2, "functions"],
// 制止 RegExp 组织函数中无效的正则表达式字符串
"no-invalid-regexp": 2,
// 制止在字符串和解释之外不划定规矩的空缺
"no-irregular-whitespace": 2,
// 制止在 in 表达式中涌现否认的左操作数
"no-negated-in-lhs": 2,
// 制止把全局对象 (Math 和 JSON) 作为函数挪用 毛病:var math = Math();
"no-obj-calls": 2,
// 制止直接运用 Object.prototypes 的内置属性
"no-prototype-builtins":0,
// 制止正则表达式字面量中涌现多个空格
"no-regex-spaces": 2,
// 禁用希罕数组
"no-sparse-arrays": 2,
// 制止涌现令人困惑的多行表达式
"no-unexpected-multiline": 2,
// 制止在return、throw、continue 和 break语句以后涌现不可达代码
/*
function foo() {
return true;
console.log("done");
}//毛病
*/
"no-unreachable": 2,
// 请求运用 isNaN() 搜检 NaN
"use-isnan": 2,
// 强迫运用有用的 JSDoc 解释
"valid-jsdoc": 1,
// 强迫 typeof 表达式与有用的字符串举行比较
// typeof foo === "undefimed" 毛病
"valid-typeof": 2,
//////////////
// 最好实践 //
//////////////
// 定义对象的set存取器属性时,强迫定义get
"accessor-pairs": 2,
// 强迫数组要领的回调函数中有 return 语句
"array-callback-return":0,
// 强迫把变量的运用限定在其定义的作用域范围内
"block-scoped-var": 0,
// 限定圈复杂度,也就是相似if else能一衔接多少个
"complexity": [2, 9],
// 请求 return 语句要么老是指定返回的值,要么不指定
"consistent-return": 0,
// 强迫一切掌握语句运用一致的括号作风
"curly": [2, "all"],
// switch 语句强迫 default 分支,也可增加 // no default 解释作废此次正告
"default-case": 2,
// 强迫object.key 中 . 的位置,参数:
// property,'.'号应与属性在统一行
// object, '.' 号应与对象名在统一行
"dot-location": [2, "property"],
// 强迫运用.号取属性
// 参数: allowKeywords:true 运用保留字做属性名时,只能运用.体式格局取属性
// false 运用保留字做属性名时, 只能运用[]体式格局取属性 e.g [2, {"allowKeywords": false}]
// allowPattern: 当属性名婚配供应的正则表达式时,许可运用[]体式格局取值,不然只能用.号取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}]
"dot-notation": [2, { "allowKeywords": false }],
// 运用 === 替换 == allow-null许可null和undefined==
"eqeqeq": [2, "allow-null"],
// 请求 for-in 轮回中有一个 if 语句
"guard-for-in": 2,
// 禁用 alert、confirm 和 prompt
"no-alert": 0,
// 禁用 arguments.caller 或 arguments.callee
"no-caller": 2,
// 不许可在 case 子句中运用词法声明
"no-case-declarations":2,
// 制止除法操作符显式的涌现在正则表达式最先的位置
"no-div-regex": 2,
// 制止 if 语句中有 return 以后有 else
"no-else-return": 0,
// 制止涌现空函数.假如一个函数包含了一条解释,它将不会被认为有题目。
"no-empty-function":2,
// 制止运用空解构形式no-empty-pattern
"no-empty-pattern":2,
// 制止在没有范例搜检操作符的状况下与 null 举行比较
"no-eq-null": 1,
// 禁用 eval()
"no-eval": 2,
// 制止扩大原生范例
"no-extend-native": 2,
// 制止不必要的 .bind() 挪用
"no-extra-bind": 2,
// 禁用不必要的标签
"no-extra-label:":0,
// 制止 case 语句落空
"no-fallthrough": 2,
// 制止数字字面量中运用前导和末端小数点
"no-floating-decimal": 2,
// 制止运用短标记举行范例转换(!!fOO)
"no-implicit-coercion":0,
// 制止在全局范围内运用 var 和定名的 function 声明
"no-implicit-globals":1,
// 制止运用相似 eval() 的要领
"no-implied-eval": 2,
// 制止 this 关键字涌现在类和类对象之外
"no-invalid-this":0,
// 禁用 __iterator__ 属性
"no-iterator": 2,
// 禁用标签语句
"no-labels": 2,
// 禁用不必要的嵌套块
"no-lone-blocks": 2,
// 制止在轮回中涌现 function 声明和表达式
"no-loop-func":1,
// 禁用把戏数字(3.14什么的用常量替代)
"no-magic-numbers":[1,{ "ignore": [0,-1,1] }],
// 制止运用多个空格
"no-multi-spaces": 2,
// 制止运用多行字符串,在 JavaScript 中,能够在新行之前运用斜线建立多行字符串
"no-multi-str": 2,
// 制止对原生对象赋值
"no-native-reassign": 2,
// 制止在非赋值或前提语句中运用 new 操作符
"no-new": 2,
// 制止对 Function 对象运用 new 操作符
"no-new-func": 0,
// 制止对 String,Number 和 Boolean 运用 new 操作符
"no-new-wrappers": 2,
// 禁用八进制字面量
"no-octal": 2,
// 制止在字符串中运用八进制转义序列
"no-octal-escape": 2,
// 不许可对 function 的参数举行从新赋值
"no-param-reassign": 0,
// 禁用 __proto__ 属性
"no-proto": 2,
// 制止运用 var 屡次声明统一变量
"no-redeclare": 2,
// 禁用指定的经由过程 require 加载的模块
"no-return-assign": 0,
// 制止运用 javascript: url
"no-script-url": 0,
// 制止自我赋值
"no-self-assign":2,
// 制止本身比较
"no-self-compare": 2,
// 禁用逗号操作符
"no-sequences": 2,
// 制止抛出非非常字面量
"no-throw-literal": 2,
// 禁用原封不动的轮回前提
"no-unmodified-loop-condition":2,
// 制止涌现未运用过的表达式
"no-unused-expressions": 0,
// 禁用未运用过的标签
"no-unused-labels":2,
// 制止不必要的 .call() 和 .apply()
"no-useless-call":2,
// 制止不必要的字符串字面量或模板字面量的衔接
"no-useless-concat":2,
// 禁用不必要的转义字符
"no-useless-escape":0,
// 禁用 void 操作符
"no-void": 0,
// 制止在解释中运用特定的正告术语
"no-warning-comments": 0,
// 禁用 with 语句
"no-with": 2,
// 强迫在parseInt()运用基数参数
"radix": 2,
// 请求一切的 var 声明涌现在它们地点的作用域顶部
"vars-on-top": 0,
// 请求 IIFE 运用括号括起来
"wrap-iife": [2, "any"],
// 请求或制止 “Yoda” 前提
"yoda": [2, "never"],
// 请求或制止运用严厉形式指令
"strict": 0,
//////////////
// 变量声明 //
//////////////
// 请求或制止 var 声明中的初始化(初值)
"init-declarations":0,
// 不许可 catch 子句的参数与外层作用域中的变量同名
"no-catch-shadow": 0,
// 制止删除变量
"no-delete-var": 2,
// 不许可标签与变量同名
"no-label-var": 2,
// 禁用特定的全局变量
"no-restricted-globals":0,
// 制止 var 声明 与外层作用域的变量同名
"no-shadow": 0,
// 制止掩盖受限定的标识符
"no-shadow-restricted-names": 2,
// 禁用未声明的变量,除非它们在 /*global */ 解释中被提到
"no-undef": 2,
// 制止将变量初始化为 undefined
"no-undef-init": 2,
// 制止将 undefined 作为标识符
"no-undefined": 0,
// 制止涌现未运用过的变量
"no-unused-vars": [2, { "vars": "all", "args": "none" }],
// 不许可在变量定义之前运用它们
"no-use-before-define": 0,
//////////////////////////
// Node.js and CommonJS //
//////////////////////////
// require return statements after callbacks
"callback-return":0,
// 请求 require() 涌现在顶层模块作用域中
"global-require": 1,
// 请求回调函数中有容错处置惩罚
"handle-callback-err": [2, "^(err|error)$"],
// 制止夹杂通例 var 声明和 require 挪用
"no-mixed-requires": 0,
// 制止挪用 require 时运用 new 操作符
"no-new-require": 2,
// 制止对 __dirname 和 __filename举行字符串衔接
"no-path-concat": 0,
// 禁用 process.env
"no-process-env": 0,
// 禁用 process.exit()
"no-process-exit": 0,
// 禁用同步要领
"no-sync": 0,
//////////////
// 作风指南 //
//////////////
// 指定数组的元素之间要以空格离隔(, 背面), never参数:[ 之前和 ] 以后不能带空格,always参数:[ 之前和 ] 以后必需带空格
"array-bracket-spacing": [2, "never"],
// 制止或强迫在单行代码块中运用空格(禁用)
"block-spacing":[1,"never"],
//强迫运用一致的缩进 第二个参数为 "tab" 时,会运用tab,
// if while function 背面的{必需与if在统一行,java作风。
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
// 双峰驼定名花样
"camelcase": 2,
// 掌握逗号前后的空格
"comma-spacing": [2, { "before": false, "after": true }],
// 掌握逗号在行尾涌现照样在行首涌现 (默许行尾)
// http://eslint.org/docs/rules/comma-style
"comma-style": [2, "last"],
//"SwitchCase" (默许:0) 强迫 switch 语句中的 case 子句的缩进程度
// 以方括号取对象属性时,[ 背面和 ] 前面是不是须要空格, 可选参数 never, always
"computed-property-spacing": [2, "never"],
// 用于指一致在回调函数中指向this的变量名,箭头函数中的this已能够指向外层挪用者,应当没卵用了
// e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值,this也不能赋值给that之外的其他值
"consistent-this": [1,"that"],
// 强迫运用定名的 function 表达式
"func-names": 0,
// 文件末端强迫换行
"eol-last": 2,
"indent": [2, 4, { "SwitchCase": 1 }],
// 强迫在对象字面量的属性中键和值之间运用一致的间距
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
// 强迫运用一致的换行作风
"linebreak-style": [1,"unix"],
// 请求在解释四周有空行 ( 请求在块级解释之前有一空行)
"lines-around-comment": [1,{"beforeBlockComment":true}],
// 强迫一致地运用函数声明或函数表达式,要领定义作风,参数:
// declaration: 强迫运用要领声明的体式格局,function f(){} e.g [2, "declaration"]
// expression:强迫运用要领表达式的体式格局,var f = function() {} e.g [2, "expression"]
// allowArrowFunctions: declaration作风中许可箭头函数。 e.g [2, "declaration", { "allowArrowFunctions": true }]
"func-style": 0,
// 强迫回调函数最大嵌套深度 5层
"max-nested-callbacks": [1,5],
// 制止运用指定的标识符
"id-blacklist":0,
// 强迫标识符的最新和最大长度
"id-length":0,
// 请求标识符婚配一个指定的正则表达式
"id-match":0,
// 强迫在 JSX 属性中一致地运用双引号或单引号
"jsx-quotes":0,
// 强迫在关键字前后运用一致的空格 (前后腰须要)
"keyword-spacing":2,
// 强迫一行的最大长度
"max-len":[1,200],
// 强迫最大行数
"max-lines":0,
// 强迫 function 定义中最多许可的参数数目
"max-params":[1,7],
// 强迫 function 块最多许可的的语句数目
"max-statements":[1,200],
// 强迫每一行中所许可的最大语句数目
"max-statements-per-line":0,
// 请求组织函数首字母大写 (请求挪用 new 操作符时有首字母大小的函数,许可挪用首字母大写的函数时没有 new 操作符。)
"new-cap": [2, { "newIsCap": true, "capIsNew": false }],
// 请求挪用无参组织函数时有圆括号
"new-parens": 2,
// 请求或制止 var 声明语句后有一行空行
"newline-after-var": 0,
// 制止运用 Array 组织函数
"no-array-constructor": 2,
// 禁用按位运算符
"no-bitwise":0,
// 请求 return 语句之前有一空行
"newline-before-return":0,
// 请求要领链中每一个挪用都有一个换行符
"newline-per-chained-call":1,
// 禁用 continue 语句
"no-continue": 0,
// 制止在代码行后运用内联解释
"no-inline-comments": 0,
// 制止 if 作为唯一的语句涌现在 else 语句中
"no-lonely-if": 0,
// 制止夹杂运用差别的操作符
"no-mixed-operators":0,
// 不许可空格和 tab 夹杂缩进
"no-mixed-spaces-and-tabs": 2,
// 不许可多个空行
"no-multiple-empty-lines": [2, { "max": 2 }],
// 不许可否认的表达式
"no-negated-condition":0,
// 不许可运用嵌套的三元表达式
"no-nested-ternary": 0,
// 制止运用 Object 的组织函数
"no-new-object": 2,
// 制止运用一元操作符 ++ 和 --
"no-plusplus":0,
// 制止运用特定的语法
"no-restricted-syntax":0,
// 制止 function 标识符和括号之间涌现空格
"no-spaced-func": 2,
// 不许可运用三元操作符
"no-ternary": 0,
// 禁用行尾空格
"no-trailing-spaces": 2,
// 制止标识符中有悬空下划线_bar
"no-underscore-dangle": 0,
// 制止能够在有更简朴的可替换的表达式时运用三元操作符
"no-unneeded-ternary": 2,
// 制止属性前有空缺
"no-whitespace-before-property":0,
// 强迫花括号内换行符的一致性
"object-curly-newline":0,
// 强迫在花括号中运用一致的空格
"object-curly-spacing": 0,
// 强迫将对象的属性放在差别的行上
"object-property-newline":0,
// 强迫函数中的变量要么一同声明要么离开声明
"one-var": [2, { "initialized": "never" }],
// 请求或制止在 var 声明四周换行
"one-var-declaration-per-line":0,
// 请求或制止在能够的状况下请求运用简化的赋值操作符
"operator-assignment": 0,
// 强迫操作符运用一致的换行符
"operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
// 请求或制止块内添补
"padded-blocks": 0,
// 请求对象字面量属性称号用引号括起来
"quote-props": 0,
// 强迫运用一致的反勾号、双引号或单引号
"quotes": [2, "single", "avoid-escape"],
// 请求运用 JSDoc 解释
"require-jsdoc":1,
// 请求或制止运用分号而不是 ASI(这个才是掌握行尾部分号的,)
"semi": [2, "always"],
// 强迫分号之前和以后运用一致的空格
"semi-spacing": 0,
// 请求统一个声明块中的变量按递次排列
"sort-vars": 0,
// 强迫在块之前运用一致的空格
"space-before-blocks": [2, "always"],
// 强迫在 function的左括号之前运用一致的空格
"space-before-function-paren": [2, "always"],
// 强迫在圆括号内运用一致的空格
"space-in-parens": [2, "never"],
// 请求操作符四周有空格
"space-infix-ops": 2,
// 强迫在一元操作符前后运用一致的空格
"space-unary-ops": [2, { "words": true, "nonwords": false }],
// 强迫在解释中 // 或 /* 运用一致的空格
"spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
// 请求或制止 Unicode BOM
"unicode-bom": 0,
// 请求正则表达式被括号括起来
"wrap-regex": 0,
//////////////
// ES6.相干 //
//////////////
// 请求箭头函数体运用大括号
"arrow-body-style": 2,
// 请求箭头函数的参数运用圆括号
"arrow-parens": 2,
"arrow-spacing":[2,{ "before": true, "after": true }],
// 强迫在子类组织函数顶用super()挪用父类组织函数,TypeScrip的编译器也会提醒
"constructor-super": 0,
// 强迫 generator 函数中 * 号四周运用一致的空格
"generator-star-spacing": [2, { "before": true, "after": true }],
// 制止修正类声明的变量
"no-class-assign":2,
// 不许可箭头功用,在那里他们能够殽杂的比较
"no-confusing-arrow":0,
// 制止修正 const 声明的变量
"no-const-assign":2,
// 制止类成员中涌现反复的称号
"no-dupe-class-members":2,
// 不许可复制模块的入口
"no-duplicate-imports":0,
// 制止 Symbol 的组织函数
"no-new-symbol":2,
// 许可指定模块加载时的入口
"no-restricted-imports":0,
// 制止在组织函数中,在挪用 super() 之前运用 this 或 super
"no-this-before-super": 2,
// 制止不必要的盘算机能键对象的笔墨
"no-useless-computed-key":0,
// 请求运用 let 或 const 而不是 var
"no-var": 0,
// 请求或制止对象字面量中要领和属性运用简写语法
"object-shorthand": 0,
// 请求运用箭头函数作为回调
"prefer-arrow-callback":0,
// 请求运用 const 声明那些声明后不再被修正的变量
"prefer-const": 0,
// 请求在适宜的处所运用 Reflect 要领
"prefer-reflect":0,
// 请求运用扩大运算符而非 .apply()
"prefer-spread":0,
// 请求运用模板字面量而非字符串衔接
"prefer-template":0,
// Suggest using the rest parameters instead of arguments
"prefer-rest-params":0,
// 请求generator 函数内有 yield
"require-yield":0,
// enforce spacing between rest and spread operators and their expressions
"rest-spread-spacing":0,
// 强迫模块内的 import 排序
"sort-imports":0,
// 请求或制止模板字符串中的嵌入表达式四周空格的运用
"template-curly-spacing":1,
// 强迫在 yield* 表达式中 * 四周运用空格
"yield-star-spacing":2
}
}
更多内容,以及每一项的设置概况能够在 官网检察