htmlHint&csslint&eslint配置詳解
最近在弄前端自動化測試的工具，使用htmlHint等插件來檢查源碼的編寫規範，但是這些插件的參數設置的文檔說明特別難找。都是英文的，自己找了大致翻譯了下。
ESLint配置詳解
以下僅爲自己項目常用的配置，詳細配置請查看官網詳細文檔
官網詳細文檔 ESLint規則文檔
"rules": {
/*
*以下的 off||0代表關閉
*warm||1 代表拋出Error，不會使編譯退出
*error||2代表拋出錯誤，會導致編譯退出
*/
"quotes": [0, "double"], //引號類型 強制 "" ''
"semi": [1, "always"], //語句強制分號結尾
"no-console": 2, //不允許console 建議調試環境關閉
"no-alert": 0, //禁止使用alert confirm prompt
"no-cond-assign": 2, //禁止在條件表達式中使用賦值語句
//TODO 2->0 by pjl
"no-constant-condition": 1, //禁止在條件中使用常量表達式 if(true) if(1)
"no-debugger": 2, //禁止使用debugger 建議調試環境關閉
"no-div-regex": 1, //不能使用看起來像除法的正則表達式/=foo/
"no-dupe-keys": 2, //在創建對象字面量時不允許鍵重複 {a:1,a:1}
"no-dupe-args": 2, //函數參數不能重複
"no-duplicate-case": 2, //switch中的case標籤不能重複
"no-empty": 0, //塊語句中的內容不能爲空
"no-eq-null": 0, //禁止對null使用==或!=運算符
"no-eval": 1, //禁止使用eval
"no-ex-assign": 1, //禁止給catch語句中的異常參數賦值
"no-extend-native": 0, //禁止擴展native對象 禁止修改prototype
"no-extra-parens": 0, //禁止非必要的括號 有時候多餘的括號能使邏輯更清晰
"no-extra-semi": 2, //禁止多餘的冒號
"no-floating-decimal": 2, //禁止省略浮點數中的0 .5 3.
"no-func-assign": 2, //禁止重複的函數聲明
"no-inline-comments": 0, //禁止行內備註
"no-inner-declarations": [0, "functions"], //禁止在塊語句中使用聲明（變量或函數）
"no-multiple-empty-lines": [1, {
"max": 3
}], //空行最多不能超過3行
"arrow-parens": 0, //箭頭函數用小括號括起來
"arrow-spacing": 0, //=>的前/後括號
//TODO 1修改爲0 by pjl
"camelcase": 0, //強制駝峯法命名
"comma-spacing": 0, //逗號前後的空格
"comma-style": [0, "last"], //逗號風格，換行時在行首還是行尾
"consistent-return": 0, //return 後面是否允許省略
"consistent-this": [0, "that"], //this別名
"default-case": 0, //switch語句最後必須有default
"dot-location": 0, //對象訪問符的位置，換行的時候在行首還是行尾
"dot-notation": [0, {
"allowKeywords": true
}], //避免不必要的方括號
"eqeqeq": 0, //必須使用全等
"guard-for-in": 0, //for in循環要用if語句過濾
"id-length": 0, //變量名長度
"init-declarations": 0, //聲明時必須賦初值
"new-cap": 0, //函數名首行大寫必須使用new方式調用，首行小寫必須用不帶new方式調用 由於組件的使用都是大寫 暫時關閉
"new-parens": 2, //new時必須加小括號
"one-var": 0, //連續聲明 最好不要開啓，要不滿屏的綠色
"operator-linebreak": [0, "after"], //換行時運算符在行尾還是行首
"padded-blocks": 0, //塊語句內行首行尾是否要空行
"quote-props": [0, "always"], //對象字面量中的屬性名是否強制雙引號 consistent-as-needed：如果有屬性名稱要求使用引號，則所有的屬性名稱都要使用引號；否則，禁止所有的屬性名稱使用引號
"radix": 0, //parseInt必須指定第二個參數
"id-match": 0, //命名檢測
"semi-spacing": [0, {
"before": false,
"after": true
}], //分號前後空格
"sort-vars": 0, //變量聲明時排序
"space-after-keywords": [0, "always"], //關鍵字後面是否要空一格
"use-isnan": 2, //禁止比較時使用NaN，只能用isNaN()
"valid-typeof": 2, //必須使用合法的typeof的值
"vars-on-top": 0, //var必須放在作用域頂部
//以下規則與 Js 代碼中可能的語法錯誤或邏輯錯誤有關
// 禁止 for 循環出現方向錯誤的循環，比如 for (i = 0; i < 10; i--)
'for-direction': 2,
// 禁止與負零進行比較
'no-compare-neg-zero': 2,
// 將 var 定義的變量視爲塊作用域，禁止在塊外使用
'block-scoped-var': 2,
// switch 的 case 內必須有 break, return 或 throw
// by pjl 之前遇到過未寫break導致下面那個case也執行了
'no-fallthrough': 2,
// @變量申明 以下規則與變量申明有關
// 禁止重複定義變量
'no-redeclare': 2,
// 禁止使用保留字作爲變量名
'no-shadow-restricted-names': 2,
// 禁止使用未定義的變量
'no-undef': [
2, {
"typeof": false
}
],
// ECMAScript 6
// 這些規則與 ES6有關
// 禁止對定義過的 class 重新賦值
'no-class-assign': 2,
// 禁止對使用 const 定義的常量重新賦值
'no-const-assign': 2,
// 禁止重複定義類
'no-dupe-class-members': 2
}
HtmlHint配置詳解
{
//標籤名 小寫
"tagname-lowercase": true,
//屬性名稱小寫
"attr-lowercase": true,
//屬性值使用雙引號
"attr-value-double-quotes": true,
//屬性值不能爲空
"attr-value-not-empty": false,
//屬性值不能重定義
"attr-no-duplication": true,
//html標籤在頭部
"doctype-first": false,
//標籤配對
"tag-pair": true,
//標籤自閉
"tag-self-close": false,
//id唯一
"id-unique": true,
//src非空
"src-not-empty": true,
//title必須
"title-require": false,
//alt必須
"alt-require": false,
//<!DOCTYPE>檢查
"doctype-html5": false,
//文件內部樣式禁止
"style-disabled": false,
//內聯css機制
"inline-style-disabled": false,
//內聯js禁止
"inline-script-disabled": false,
//屬性特殊字符檢查
"attr-unsafe-chars": false,
//頭部js文件檢查
"head-script-disabled": false
}
cssLint配置詳解
cssCheckOptions: {
//是否檢測 !important
"important": false,
//是否允許 .bar.foo 這種兩個連在一起的選擇器
//未知屬性檢測
"known-properties": true,
//重複屬性檢測
"duplicate-properties": true,
//border-box 和 box-sizing檢測
"box-sizing": false,
//width、height 與 border padding值一起使用時 發出警告
"box-model": false,
//display與一些其他值不能同時使用
//如 inline 不能與height同時使用 block不能使用 vertical-align table-*不能使用float
"display-property-grouping":true,
//不允許使用重複的背景圖片 如果是精靈圖 背景圖在一個公共的類裏引用 其他類用於調整位置
"duplicate-background-images":true,
//gradient 這種需要跨瀏覽器兼容的屬性應該寫在一起 避免漏改
"gradients":true,
//rgba hsl hsla這種類型的顏色會提出警告
"fallback-colors":true,
//font-size的聲明不應該超過10條
"font-sizes":false,
//@font-face 這種外部字體規則不要引入太多
"font-faces":false,
//float條數超過10條時，警告
"floats":false,
//以*開頭的屬性檢測 如 *width 檢測到會報錯
"star-property-hack":false,
//以_開頭的屬性檢測
"underscore-property-hack":false,
//若有 outline:0 或 outline:none的情況並且選擇器沒有:focus僞類 警告
//或者選擇器有:focus僞類 但是隻有outline一條屬性 警告
"outline-none":false,
//不允許導入css @import url(more.css);
"import":true,
//id選擇器不要放在頭部 例如 #head a{}這種 應該單獨使用 因爲css解析從右向左解析，這樣反而降低了效率
"ids":false,
//h1-h6應該在頭部定義 而不能再子類中再次定義 例如.box h3 {font-weight: normal;}是不行的
//.item:hover h3 { font-weight: bold; } 也是不行的 正確的是 h3{font-weight:normal}
"qualified-headings":false,
//如果你把 margin的top bottom left right都定義一遍就警告你！╭(╯^╰)╮ 如果只定義了其中1~2個不會警告
//正確食用 margin:20px 10px 5px 11px;
"shorthand":true,
//text-indent不能使用負值 除非同屬性direction:ltr一起出現
"text-indent":false,
//h1-h6 只應該被定義一次 僞類不算
"unique-headings":false,
//若*選擇器 是key選擇器的話(最右邊那個) 警告
"universal-selector":false,
//類似於[type=text]的選擇器作爲key選擇器的時候 瀏覽器會先把所有的節點匹配 然後去檢查他們的type屬性會降低效率
"unqualified-attributes":false,
//不能只有前綴屬性，沒有通用屬性 -moz-border-radius 並且通用屬性必須在最後
"vendor-prefix":false,
//不允許 0px 0% 0em等
"zero-units":true
}