Javascript筆記（五）之 程式碼規範
前言：為什麼需要程式碼規範
程式碼規範的意義
在ECMAScript之中，所有的程式碼都是由語句來構成的。語句表明執行過程中的流程、限定與約定，形式上可以是單行語句或一對大擴後{}擴起來的複合語句，在語法描述中，複合語句整體可以作為一個單行語句處理。
JavaScript程式碼規範校驗工具
1、種類介紹
JavaScript之中提供有如下幾種程式碼規範校驗工具
- JSLint：古老，不可配置，不可擴充套件，不可禁用許多特性的校驗
- JSHint：可配置的JSLint的版本；
- JSCS：程式碼樣式檢查，只捕獲與程式碼格式相關的問題，而不是潛在的bug或錯誤，已經和ESLint合併
- ESLint：易於擴充套件、可自定義規則，可以外掛形式安裝更多的規則；
2、JSLint——檢測JavaScript語法規範
2.1、JSLint 簡介與安裝
在前端JavaScript之中有一個不錯的工具叫做JSLint，可以檢測程式碼規範化、壓縮JS、CSS等，也是一款JavaScript驗證工具，在定位錯誤並確保基本指南得以遵循時，非常有用，它還可以幫助我們避免許多種bug，極大縮短了開發時間。
如果你安裝了NodeJS，可以使用如下的方式來安裝JSLint。
npm install -g jslint
使用JSLint
jslint spa.js
或使用Grunt或Gulp來在命令列中直接執行，在package.json中新增
"devDependencies" 定義JSLint任務
var
jslint = require('gulp-jslint'),
gulp = require('gulp');
gulp.task('jslint', function () {
return gulp.src([
'./controllers/*.js',
'./models/*.js',
'./*.js'
]).pipe(jslint({
node: true,
nomen: JSLint的特點
- 對程式碼的規則要求比較嚴格
- 可配置的選項很少
2.2、JSLint規範內容
- 必須使用分號作為語句結尾
- 函式必須使用
"use strict"嚴格模式來定義，並且)與{之間必須有空格，函式的宣告不能放在類似if的塊中，需要放在外部函式的頂部。 - 在
-、+、=、*、\後面要出現空格 - 不能使用tab和空格混用
- 行末不能有多餘的空格
- 字串要使用雙引號
- 變數不能被重複定義
- 使用
===來代替== - 請刪除
debugger語句 - 在
case或break之前需要break - 儘量不要使用
eval()
3、JSHint規範
3.1、JSHint簡介
JSLint的語法要求嚴格，於是很多人就覺得沒有必要這麼嚴格，後來就在JSLint的基礎之上，構建來一個新的程式碼檢查工具JSHint。
JSHint的優點如下：
- 可配置規則
- 社群支援度高
- 可定製結果報表
3.2、JSHint的配置分類
- Enforcing(增強)：如果這些屬性設定為true，JSHint會對程式碼進行嚴格對檢測，比如是否使用來嚴格模式、變數駝峰式命名、是不是for-in迴圈裡面必須有hashOwnProperty等等。
- Relaxing(鬆弛)：如果這些屬性設定為true，JSHint會容忍規則中定義等情況出現，比如是否使用分號，是否支援下一代ES語法等等；
- Environments(環境)：如果這些屬性設定為true，代表程式碼所處的環境；
- globals(全域性變數)：自定義的一些全域性變數
3.3、增強
bitwise 禁用位運算子
camelcase 使用駝峰命名(camelCase)或全大寫下劃線命名(UPPER_CASE)
curly 在條件或迴圈語句中使用{}來明確程式碼塊
eqeqeq 使用===和!==替代==和!=
es3 強制使用ECMAScript 3規範
es5 強制使用ECMAScript 5規範
forin 在for in迴圈中使用Object.prototype.hasOwnProperty()來過濾原型鏈中的屬性
freeze 禁止複寫原生物件(如Array, Date)的原型
immed 匿名函式呼叫必須(function() {}());而不是(function() {})();
indent 程式碼縮排寬度
latedef 變數定義前禁止使用
newcap 建構函式名首字母必須大寫
noarg 禁止使用arguments.caller和arguments.callee
noempty 禁止出現空的程式碼塊
nonew 禁止使用構造器
plusplus 禁止使用++和–-
quotemark 統一使用單引號或雙引號
undef 禁止使用不在全域性變數列表中的未定義的變數
unused 禁止定義變數卻不使用
strict 強制使用ES5的嚴格模式
trailing 禁止行尾空格
maxparams 函式可以接受的最大引數數量
maxdepth 程式碼塊中可以嵌入{}的最大深度
maxstatement 函式中最大語句數
maxcomplexity 函式的最大圈複雜度
maxlen 一行中最大字元數
3.4、鬆弛
asi 允許省略分號
boss 允許在if，for，while語句中使用賦值
debug 允許debugger語句
eqnull 允許==null
esnext 允許使用ECMAScript 6
evil 允許使用eval
expr 允許應該出現賦值或函式呼叫的地方使用表示式
funcscope 允許在控制體內定義變數而在外部使用
globalstrict 允許全域性嚴格模式
iterator 允許__iterator__
lastsemic 允許單行控制塊省略分號
laxbreak 允許不安全的行中斷
laxcomma 允許逗號開頭的編碼樣式
loopfunc 允許迴圈中定義函式
maxerr JSHint中斷掃描前允許的最大錯誤數
multistr 允許多行字串
notypeof 允許非法的typeof操作
proto 允許 proto
smarttabs 允許混合tab和space排版
shadow 允許變數shadow
sub 允許使用person[‘name’]
supernew 允許使用new function() {…}和new Object
validthis 允許嚴格模式下在非建構函式中使用this
noyield 允許發生器中沒有yield語句
3.5、環境
browser Web Browser (window, document, etc)
browserify Browserify (node.js code in the browser)
jquery jQuery
node Node.js
qunit QUnit
typed Globals for typed array constructions
worker Web Workers
wsh Windows Scripting Host
3.6、全域性變數
globals: {
jQuery: true,
console: true,
module: true
}
4、ESLint——檢測ECMAScript語法規範（重點掌握）
1、ESLint的哲學
- 在ESLint中，一切都是可插拔的，規則之間相互獨立；
- 每條規則非零則為開啟，零為關閉；
- ESLint不傾向於任何一種程式碼風格，預設關閉所有設定，被捆綁的規則都是具有普遍性的
2、如何使用
- 直接使用npm來安裝使用
npm install -g eslint
eslint -init
執行之後，會詢問你幾個問題，然後生成一個.eslintrc檔案 問題如下： what style of indentation do you use ? Spaces what quotes do you use for strings?Double What line endings do you use?Unix Do you require semicolons?No Are you using ECMAScript 6 features?Yes Whree wile your code run? Node?Browser？
檢測檔案使用如下方式
eslint xxx.js
- 使用gulp-eslint方式 1、安裝gulp-eslint
npm install gulp-eslint
2、在gulpfile.js中呼叫eslint;
const {src, task} = require('gulp');
const eslint = require('gulp-eslint');
task('default', () => {
return src(['scripts/*.js'])
// eslint() attaches the lint output to the "eslint" property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failAfterError last.
.pipe(eslint.failAfterError());
});
// 或者
gulp.src(['**/*.js','!node_modules/**'])
.pipe(eslint({
rules: {
'my-custom-rule': 1,
'strict': 2
},
globals: [
'jQuery',
'$'
],
envs: [
'browser'
]
}))
.pipe(eslint.formatEach('compact', process.stderr));
ESLint的配置
ESLint的配置都寫在 .eslintrc 檔案之中
1、指定環境
1.1、指定語言，比如支援ES6語法和JSX：ecmaFeatures屬性
1.2、指定解析器：parser屬性
所有都解析器都是npm包，預設使用都Espree，官方推薦都有 Esprima，Esprima-FB，Babel-ESLint；
Babel-ESLint可以自動支援ES6，不需要專門寫env:{es6:true}
由於Babel-ESLint會把程式碼先變成ES6，所以不在ES5裡都屬性依然需要在ecmaFeatures屬性設定一下
1.3、指定環境
可以寫在env屬性裡，也可以寫在需要支援都特定檔案裡面；
1.4、自定義外掛
寫在 .eslintrc 檔案之中的plugin屬性裡，第三方外掛使用之前要先安裝，預設外掛不需要安裝；
2、指定全域性變數
寫在 .eslintrc 檔案之中的global 屬性裡面，防止被no-undef報錯
3、指定規則
3.1、規則的值
| 值 | 含義 |
|---|---|
| 0 | 關閉規則 |
| 1 | 未通過，給警告 |
| 2 | 未通過，返回失敗 |
有規則除了值，還可以有更多都定製；
3.2、想要配置某個外掛自己的規則
{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": 0,
"curly": 2,
"quotes": [2, "double"],
"plugin1/rule1": 2
}
}
4、關於配置檔案
4.1、配置好後如何使用 方法一：使用命令列
eslint -c myconfig.json mytest.js
方法二：通過.eslintrc和package,json檔案
需要lint的資料夾中，eslint會找這兩個檔案，然後逐級向上級目錄尋找，直到專案根目錄為止；
4.2、配置檔案的層疊和等級
先用根資料夾的 .eslintrc 或 package.json 裡的 eslintConfig，再用內部的.eslintrc和被檢查資料夾越靠近的配置，優先順序越高；同層級中，.eslintrc優先順序比 package.json 高
4.3、eslint是如何找到.eslintrc ？
預設情況下，eslint 會在所有父級資料夾中尋找配置檔案，一直找到根目錄為止。
如果希望 eslint 不要繼續往外尋找配置檔案了則這樣配置："root": true
4.4、配置檔案的優先順序
| 值 | 含義 |
|---|---|
| 0 | 行內，用註釋寫的 |
| 1 | 命令列的 |
| 2 | 檔案的 |
4.5、配置檔案可以擴充套件
寫在 .eslintrc 檔案的 extends 屬性裡
可以是檔案路徑，能達到類似模組化的效果。比如一些基礎設定可以寫在擴充套件檔案裡；
extends 的值也可以是陣列，裡面是多個 .eslintrc檔案路徑；
還可以把 .eslintrc 做成 npm 包，給基友們共享
擴充套件檔案裡也可以寫擴充套件（會被 eslint 遞迴呼叫）
4.6、怎麼在配置裡寫註釋
package.json 不能寫註釋
.eslintrc 中，根據情況可以寫 js 或 yaml 風格的註釋
4.7、忽略檢查的檔案和目錄
寫在根目錄下，.eslintignore 檔案裡，格式為純文字
ESLint 執行前會先檢查.eslintignore 只看第一個全域性變數用 minimatch 匹配