CodeReview效率與成效改善方案

  CodeReview的目的是提升代碼質量，儘早發現潛在缺陷與BUG，降低修復成本，同時促進團隊內部知識共享，幫助更多人更好地理解系統。
爲有效的的執行codeReview，從以下幾點出發:

（一） 代碼維度

1、 基礎類語法檢測：

  推薦使用eslint等工具，避免codeReview過程中過分的關注基礎的語法和規範問題，具體的eslint的規則如下。可參考：https://cloud.tencent.com/developer/chapter/12618

module.exports = {
  extends: 'eslint:recommended',
  rules: {
    // 使用 === 和 !==
    eqeqeq: ['error', 'always', { null: 'ignore' }],

    // 不使用alert confirm prompt
    'no-alert': 'warn',
    'no-empty-function': ['error', {
      allow: [
        'arrowFunctions',
        'functions',
        'methods',
      ],
    }],
    'no-eq-null': 'off',

    // 不使用eval
    'no-eval': 'error',

    // 不能替換全局對象
    'no-global-assign': ['error', { exceptions: [] }],
    'no-implicit-coercion': ['off', {
      boolean: false,
      number: true,
      string: true,
      allow: [],
    }],

    // 禁止使用連續空格
    'no-multi-spaces': ['error', {
      ignoreEOLComments: false,
    }],

    // 禁止使用逗號運算符
    'no-sequences': 'error',
    'no-void': 'error',
    'no-with': 'error',
    'require-await': 'off',

    // 禁止無限循環
    'for-direction': 'error',
    'no-console': 'warn',
    'no-debugger': 'error',

    // 禁止相同key
    'no-dupe-keys': 'error',
    'no-empty': 'error',

    // 禁止不必要的分號
    'no-extra-semi': 'error',
    'no-sparse-arrays': 'error',
    'no-unreachable': 'error',

    'arrow-body-style': ['error', 'as-needed', {
      requireReturnForObjectLiteral: false,
    }],

    // 箭頭函數只有一個參數時省略括號, 在所有其他情況下，參數必須包含在括號內。該規則強制箭頭函數中一致使用圓括號
    'arrow-parens': ['error', 'as-needed', {
      requireForBlockBody: true,
    }],

    // 規則在箭頭函數的箭頭（=>）之前/之後標準化間距樣式。
    'arrow-spacing': ['error', { before: true, after: true }],

    // 派生類的構造函數必須調用super()。非派生類的構造函數不得調用super()
    'constructor-super': 'error',

    // 禁止修改const變量
    'no-const-assign': 'error',

    // 禁止類成員中有相同名稱的聲明
    'no-dupe-class-members': 'error',

    // 每個模塊使用單個import語句
    'no-duplicate-imports': 'error',

    // 在派生類的構造函數中，如果在調用之前使用this/ ，則會引發參考錯誤
    'no-this-before-super': 'error',

    // 如果沒有指定，ES2015 會提供默認的類構造函數。因此，沒有必要提供一個空構造函數或一個簡單地委託給它的父類的構造函數
    'no-useless-constructor': 'error',

    // 禁止使用var
    'no-var': 'error',

    // 簡明的形式定義對象字面值方法和屬性
    'object-shorthand': ['error', 'always', {
      ignoreConstructors: false,
      avoidQuotes: true,
    }],

    // 對於回調或函數參數，箭頭函數可以成爲函數表達式的有吸引力的替代方案
    'prefer-arrow-callback': ['error', {
      allowNamedFunctions: false,
      allowUnboundThis: true,
    }],

    // 不重新分配變量，使用const
    'prefer-const': ['error', {
      destructuring: 'any',
      ignoreReadBeforeAssign: true,
    }],

    // 使用結構
    'prefer-destructuring': ['error', {
      VariableDeclarator: {
        array: false,
        object: true,
      },
      AssignmentExpression: {
        array: true,
        object: true,
      },
    }, {
      enforceForRenamedProperties: false,
    }],

    // 使用模板字符串
    'prefer-template': 'error',

    // 沒有yield關鍵字的生成器函數生成警告
    'require-yield': 'error',

    // 模板字符串大括號內的間距
    'template-curly-spacing': 'error',

    // 強制數組元素之間的換行符
    'array-element-newline': ['off', { multiline: true, minItems: 3 }],

    // 不允許陣列括號和其他標記之間的空格
    'array-bracket-spacing': ['error', 'never'],

    // 規則在打開的塊令牌內和同一行上的下一個令牌內強制執行一致的間距
    'block-spacing': ['error', 'always'],

    // 大括號風格
    'brace-style': ['error', '1tbs', { allowSingleLine: true }],

    // 逗號後加空格
    'comma-spacing': ['error', { before: false, after: true }],

    // 規則在計算的屬性括號內強制執行一致的間距
    'computed-property-spacing': ['error', 'never'],

    'jsx-quotes': ['off', 'prefer-double'],

    // 此規則強制在對象字面量屬性中的鍵和值之間保持一致的間距
    'key-spacing': ['error', { beforeColon: false, afterColon: true }],

    'keyword-spacing': ['error', {
      before: true,
      after: true,
      overrides: {
        return: { after: true },
        throw: { after: true },
        case: { after: true },
      },
    }],

    // 類成員增加空格
    'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: false }],

    // 禁止鏈接變量的賦值
    'no-multi-assign': ['error'],

    'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 0 }],

    // 刪除尾部空格
    'no-trailing-spaces': ['error', {
      skipBlankLines: false,
      ignoreComments: false,
    }],

    // 大括號內部空格
    'object-curly-spacing': ['error', 'always'],

    'one-var': ['error', 'never'],

    'one-var-declaration-per-line': ['error', 'always'],

    // 屬性引號統一
    'quote-props': ['error', 'as-needed', { keywords: false, unnecessary: true, numbers: false }],

    // 使用單引號
    quotes: ['error', 'single', { avoidEscape: true }],

    // 需要加分號
    semi: ['error', 'always'],

    // 分號空格
    'semi-spacing': ['error', { before: false, after: true }],

    // function關鍵字空格
    'space-before-function-paren': ['error', {
      anonymous: 'always',
      named: 'never',
      asyncArrow: 'always',
    }],

    // 括號內不使用空格
    'space-in-parens': ['error', 'never'],

    // 註釋之間的空格
    'spaced-comment': ['error', 'always', {
      line: {
        exceptions: ['-', '+'],
        markers: ['=', '!'], // space here to support sprockets directives
      },
      block: {
        exceptions: ['-', '+'],
        markers: ['=', '!'], // space here to support sprockets directives
        balanced: true,
      },
    }],
    'lines-around-comment': 1,
    'no-unneeded-ternary': 2,
    'space-infix-ops': 2, // 表達式之間的空格
    indent: [2, 4], // 使用tab
    'no-script-url': 0,
    'default-case': 0,
    'react/no-deprecated': 0,
    'react/jsx-no-target-blank': 0,
  },
};

2、代碼規範檢測：

  針對eslint等工具無法檢測的一些語法問題，配合項目的編碼規範，根據對應的checkList去執行。具體的checkList可參照：https://www.bookstack.cn/read/ecomfe-spec/react-style-guide.md

  目的：從語法、編碼規範的層面上控制代碼的可讀性和可維護性。

（二） 業務維度

  1、 針對對應的Review模塊，主講人要向評審人闡述對應的業務功能，以及業務邏輯的梳理，可通過xmind羅列功能點和實現的邏輯。

  2、 對照xmind中具體的業務功能點，逐個闡述實現該功能的代碼，這部分評審需要注重業務功能的實現是否存在邏輯錯誤。

  目的：控制業務流程的錯誤，同時讓團隊內成員交叉瞭解業務。

（三） 結果記錄與跟蹤

  1、 根據最新的gitlab流程規範，建議review時從develop中拉取review分支。確定好review內容跟隨哪個迭代版本發佈時，在對應版本提測是合併到develop中，併發布到測試環境；

  2、 review過程中，記錄出現問題的文件、方法，並填寫review評審報告，同時上傳到confluence上；

  3、 review過程確定確定對應的責任人和對應的修復計劃，並制定驗證人（非責任人）；

  4、 review結果發佈到測試環境後，通知測試人員迴歸，迴歸正常後，跟隨版本迭代的代碼合併到master。並同時在confluence對應的review記錄上備註review修復結果。

  目的：記錄和跟蹤review結果，實現review過程的閉環。