從團隊開始 code review 後一直沒有好好整理大家決議後的 pattern，趁這次鐵人賽的機會來整理一下這兩年來的 code review 項目，主要針對 react, express, typescript 以及一些團隊內部的共識（如檔案命名、檔案位置等），基本上都是以 js/ts 為主，沒意外應該會很紊亂，未來有機會再整理更好一些。

General

通用

關於變數、函式、檔案、資料夾等名稱與位置相關規範

函式

規範必帶參數與選填參數，避免過多參數導致函式不易使用，並在不同使用情境時，函式參數名稱需要對應調整。

import 與 export

規範 export default 的情境與 import 命名

團隊協作

PR 與 code review 相關規範

分頁處理

cursor 與 offset 使用情境與實作方式

多國語系

翻譯檔案的位置與 key 相關規範

錯誤處理

錯誤碼分類與定義

日期與時間

時間與日期在前後端使用與資料庫儲存方式

anti-pattern

避免反向表達式

其他

三元運算子、input 等細節規範

Typescript

通用

檔案名稱、型別名稱與位置等相關規範

型別定義

共用型別與自訂型別等相關規範

內建型別

盡量採用內建型別不重複造輪子

pick 與 deep-pick

使用 deep-pick 取代 pick

型別檢查

開啟 noUncheckedIndexedAccess 避免部分 runtime 錯誤

React

通用

元件、頁面、Custom Hook、HOC 等命名規範

專案結構

根據商業邏輯與關注點分離來結構化專案

三種類型的資料變數

後端回傳資料變數、通用資料變數與元件資料變數

五層 UI 狀態

載入狀態、空狀態、部分狀態、理想狀態與錯誤狀態的實作方式

元件狀態

避免將元件放到狀態中，也避免狀態過多

元件實作邏輯

切分商業邏輯與渲染邏輯

與 typescript 整合

元件型別定義方式

事件處理

同步與非同步事件處理機制

Custom Hook

Custom Hook 命名、回傳與位置規範

Express

資料處理

資料抓取的方式與位置

錯誤處理

throw Error 與回傳錯誤的使用情境

API 回傳

API 回傳資料格式規範

Hasura

資料更新

更新 hasura 資料的方式

型別轉換

從 hasura 讀取資料後的型別轉換方式