今天提供幾個針對程式碼風格的人工 Code Review 實作範例，也是Prettier 和 ESLint 比較難檢查到的。

範例 1.

原始程式碼：

function fetchData(userId) {
  let user = getUser(userId);
  if (user) {
    if (user.isActive == true) {
      doSomethingWithUser(user);
    } else {
      logError('User is inactive');
    }
  } else {
    logError('User not found');
  }
}

Code Review 建議：

1. 避免不必要的 deeply nested if..else statements，會將低程式碼可讀性、不簡潔。
2. 不使用 == 進行比較，應使用 === 為較嚴謹的比較寫法。
3. fetchData 不適合當作函數命名，應該取該 function 的真正功能為名。
4. 錯誤訊息應統一以變數處理，減少 magic strings（例如： 'User is inactive' 和 'User not found'），程式碼會較乾淨且統一。
5. 簡化條件判斷：user.isActive == true 可以簡化為 user.isActive。

調整後程式碼：

// 宣告error messages 的字串為變數
const ERROR_MESSAGES = {
  userNotFound: 'User not found',
  userInactive: 'User is inactive'
};

// 取更能描述該功能的名字
function processUser(userId) {
  const user = getUser(userId);
  
// if...else 簡化為一層
  if (!user) {
    logError(ERROR_MESSAGES.userNotFound);
    return;
  }
  
// 簡化條件判斷
  if (!user.isActive) {
    logError(ERROR_MESSAGES.userInactive);
    return;
  }

  doSomethingWithUser(user);
}

範例 2.

原始程式碼：

function calculate_sum( a, b ) {
    if ( a === null || b === null ) {
        return
    }
    return a + b
}

const temp = calculate_sum( 2, 3 );

let person = { Name: 'John', age: 25 };

Code Review 建議：

1. 命名規範：calculate_sum 應使用 camelCase 規範，而不是下劃線命名法；person 的屬性應該要一致 Name 與 Age，或 name 與 age。
2. return 返回值：return 若無返回值，應顯示 undefined。
3. 無意義變數命名：變數 temp 為無意義命名，應改為具意義的名字，如 sum。

調整後程式碼：

function calculateSum(a, b) {
    if (a === null || b === null) {
        return undefined;
    }
    return a + b;
}

const sum = calculateSum(2, 3);

let person = {
    name: 'John',
    age: 25
};

Summary

今天提供兩個範例，給 Code Reviewer 在針對程式碼風格檢查時，可以有依循的方向。