Skip to main content

如何 rename React 元件的 props - across all files

先備知識​

  • 使用 VSC 的 refactor symbols 進行各種命名重構
  • 建議使用 Shift + Enter 進行更改前檢查

Step 1 : VSC 設定​

在 VSC 搜尋 Use Aliases For Renames

我們要把這些選項取消勾選，在原先 VSC 當中預設是勾選起來的，這個功能是使用別名 (alias) 來保留原始名稱進行重命名，是比較安全的作法，範例如下

function MyComponent({ oldName }) {
  return <div>{oldName}</div>;
}

// after rename

function MyComponent({ oldName: newName }) {
  return <div>{newName}</div>;
}

碰上其他引用元件的地方，props 還是照原本傳 oldName 進來，只不過在 MyComponent 元件內部進行 alias 轉換，這樣的模式對於元件 prop 重命名的意義不大

Step 2 : 元件本身要有型別註記​

就算取消 Step 1 的勾選，當元件沒有型別註記，使用 F2 進行更名也只有改到內部，不會改到其他使用此元件的檔案

後來神奇地發現，只要幫元件加上註記，就可以更改所有使用此元件的 prop

很神奇，頗少人提到這件事情，讓我不禁好奇是不是大家都沒這需求...XD

至於怎麼加入型別註記，除了 TS 以外，純 JS 的專案使用 JSDoc 在 VSC 也可以享受 TS 的部份功能，詳見 元件 Prop Types 結合 JSDoc 註記 with VSC TS powered

總結​

兩步驟缺一不可

  1. 取消 Use Aliases For Renames
  2. 要改名的元件要有型別註記 (JSDoc or TypeScript) 皆可

Reference​

javascript - How to rename a React component prop across all files? - Stack Overflow

Redux Toolkit 的 JSDoc 型別註記