本文介紹了筆者用過的最好用的幾款前端重構插件。

[[414587]]

JavaScript Booster

JavaScript Booster 是一種代碼重構工具，具有多種編碼操作，例如將 var 轉換為 const 或 let、刪除多余的 else 語句以及合并聲明和初始化。只需注意左側的燈泡并按下它即可了解如何轉換光標下的代碼。

Stepsize

Stepsize 允許您為要重構的技術債務和代碼添加書簽和報告。如果您遇到需要重構的代碼，但您沒有時間立即進行重構，則可以使其可見并直接在 VS Code 中提出問題。

Abracadabra

VS Code 附帶了一些基本的重構。Abracadabra 使用快捷的方式為您的編輯器，在適當的時候快速修復以建議重構，根據您的需求自定義 UX 的選項，與 .js、.jsx、.ts、.tsx 和.vue 文件。

Glean

Glean 為您的 React 代碼庫提供了重構工具：將 JSX 提取到一個新組件中，將類組件轉換為功能組件，使用 Hooks 進行包裝。它允許將 JSX 提取到新組件中，將類組件轉換為功能組件，反之亦然，使用條件包裝 JSX，同時重命名狀態變量及其設置器等等。

SonarLint

SonarLint 在您編寫代碼時突出顯示錯誤和安全漏洞，并提供明確的補救指導，以便您可以在代碼提交之前修復它們。VS Code 中的 SonarLint 支持分析 JavaScript、TypeScript、Python、Java、HTML 和 PHP 代碼。

Prettier

Prettier 是一個非常流行的擴展，它為大多數編程語言提供自動代碼格式，它在 html javascript 和其他語言中特別有用。