1. 程式人生 > >一些程式碼規範(收集)

一些程式碼規範(收集)

原文地址 

這裡放一些規則參考 可以依舊需要選擇

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
}