一些程式碼規範(收集)
阿新 • • 發佈:2018-11-30
這裡放一些規則參考 可以依舊需要選擇
1.js
// 自定義的規則 rules: { // 必須使用 === 或 !==,禁止使用 == 或 !=,與 null 比較時除外 // @warn 在非同步介面返回時不確定引數是數值還是字串,有時可利用這個型別轉換 'eqeqeq': 'warn', // 禁止在 if 程式碼塊內出現函式宣告 // @off 在for迴圈中會經常使用定義var for(var i = 0; i < 10; ++i) 'no-inner-declarations': 'off', // switch 的 case 內有變數定義的時候,必須使用大括號將 case 內變成一個程式碼塊 // @off 太嚴格 'no-case-declarations': 'off', // 禁止使用 !! ~ 等難以理解的運算子 // @off 有些時候會用到 if (!!abc) '' + 100 +new Date() 等 'no-implicit-coercion': 'off', // 禁止在全域性作用域下定義變數或申明函式 // @off 太嚴格 'no-implicit-globals': 'off', // 禁止使用沒必要的 {} 作為程式碼塊 // @off 有時候需要用程式碼塊做邏輯區分 'no-lone-blocks': 'off', // 禁止出現 location.href = 'javascript:void(0)'; // @off 有時候需要用便捷的 javascript:; 'no-script-url': 'off', // 物件字面量只有一行時,大括號內的首尾必須有空格 // @off 沒有必要限制 'object-curly-spacing': 'off', // 禁止對函式的引數重新賦值 // @warn 警示即可 'no-param-reassign': 'warn', // 檔案最後一行必須有一個空行 // @error 應該在檔案末尾保持一個換行 'eol-last': 'error', // 程式碼塊巢狀的深度禁止超過 10 層 // @warn 有些特殊情況會出現 警示即可 'max-depth': [ 'warn', 10 ], // 禁止函式的迴圈複雜度超過 100 // @error 最大值可以寬鬆點 'complexity': [ 'error', { max: 100 } ], // 定義過的變數必須使用 // @warn 多檔案互相引用時 偶爾會出現無引用的情況 'no-unused-vars': [ 'warn', { vars: 'all', args: 'none', caughtErrors: 'none', ignoreRestSiblings: true } ], // 在ES5中需使用var // @off 沒有必要限制 'no-var': 'off', // 禁止使用未定義的變數 建議將相關變數在上方 globals 配置項中配置 // @warn 警示即可 'no-undef': 'warn', // 函式的引數禁止超過10個 // @warn 警示即可 'max-params': ['warn', 10], // 回撥函式巢狀禁止超過 5 層 // @warn 警示即可 'max-nested-callbacks': ['warn', 5], // 迴圈內的函式中不能出現迴圈體條件語句中定義的變數 // @warn 警示即可 'no-loop-func': 'warn', // Promise 的 reject 中必須傳入 Error 物件 // @off 不需要限制 'prefer-promise-reject-errors': 'off', // 變數宣告時儘量使用一個var宣告連續的多個 // @warn 警示即可 'one-var': [ 'error', 'consecutive' ], // 變數申明必須每行一個 // @error 賦值時保證處於一行即可 'one-var-declaration-per-line': [ 'error', 'initializations' ], // 禁止使用已廢棄的 api // @off 不需要限制 'react/no-deprecated': 'off', // 禁止使用字串 ref // @warn 警告即可 'react/no-string-refs': 'warn', // 必須使用 Class 的形式建立元件 // @warn 警告即可 'react/prefer-es6-class': [ 'warn', 'always' ], // 禁止在 componentDidUpdate 裡面使用 setState // @warn 警告即可 'react/no-did-update-set-state': 'warn', // 元件內方法必須按照一定規則排序 // @off 不需要限制 'react/sort-comp': 'off', // jsx 的 props 縮排必須為四個空格 // @off 不需要限制 // 'react/jsx-indent-props': 'off', }
2.css
rules: { // 顏色值避免直接使用顏色名 'color-named': [ 'never', { ignore: ['inside-function'] } ], // 使用數字或命名的 (可能的情況下) font-weight 值 'font-weight-notation': 'numeric', // 在函式的逗號之後要求有一個換行符或禁止有空白 'function-comma-newline-after': null, // 在函式的括號內要求有一個換行符或禁止有空白 'function-parentheses-newline-inside': null, // url使用引號 'function-url-quotes': 'always', // 禁止小於 1 的小數的前導 0 'number-leading-zero': 'never', // 字串使用雙引號 'string-quotes': 'double', // 要求選擇器列表的逗號之前有一個換行符 'selector-list-comma-newline-before': 'never-multi-line', // 在媒體查詢的逗號之前禁止有一換行 'media-query-list-comma-newline-before': 'never-multi-line', // 縮排 'indentation': 4, // 禁止低優先順序的選擇器出現在高優先順序的選擇器之後 'no-descending-specificity': null, // 禁止空源 'no-empty-source': null, // 禁止缺少檔案末尾的換行符 'no-missing-end-of-source-newline': null }
3.html
{ "_comment": [ "自定義的HTMLHint配置項", "規則中文 @see https://segmentfault.com/a/1190000013276858", "規則英文 @see https://github.com/yaniswang/HTMLHint/wiki/Rules", "使用註釋自定義規則 @see https://github.com/yaniswang/HTMLHint/wiki/Usage#cli" ], "_comment": "標籤名必須小寫", "tagname-lowercase": true, "_comment": "屬性名必須小寫", "attr-lowercase": false, "_comment": "屬性值必須放在雙引號中", "attr-value-double-quotes": true, "_comment": "屬性值一定不可為空", "attr-value-not-empty": false, "_comment": "屬性值一定不可重複", "attr-no-duplication": true, "_comment": "Doctype必須是 HTML 文件的第一行", "doctype-first": false, "_comment": "標籤必須成對", "tag-pair": true, "_comment": "標籤必須自封閉", "tag-self-close": false, "_comment": "特殊字元必須轉義", "spec-char-escape": false, "_comment": "ID 屬性必須唯一", "id-unique": true, "_comment": "src 屬性一定不可為空", "src-not-empty": true, "_comment": "title 屬性必須出現在標籤中", "title-require": false, "_comment": "img 標籤必須包含 alt 屬性", "alt-require": true, "_comment": "Doctype 必須是 HTML5", "doctype-html5": true, "_comment": "ID 和 Class 的命名規則必須統一", "id-class-value": false, "_comment": "不該使用樣式標籤", "style-disabled": false, "_comment": "不該使用行內樣式", "inline-style-disabled": false, "_comment": "不該使用行內指令碼", "inline-script-disabled": false, "_comment": "空格和製表符一定不可混合在行前", "space-tab-mixed-disabled": "space4", "_comment": "ID 和 Class 一定不可使用廣告關鍵詞", "id-class-ad-disabled": false, "_comment": "href 必須是絕對路徑或者相對路徑", "href-abs-or-rel": false, "_comment": "屬性值一定不可使用不安全字元", "attr-unsafe-chars": true, "_comment": "script 標籤不該使用在頭部", "head-script-disabled": false }