最近，我重新審視了去年放棄的 React 副專案。在此過程中，我發現了一些重要的 VSCode 擴展，這些擴展顯著提高了我作為 React 開發人員的工作效率。此清單的唯一規則是所有這些擴充都是React 特定的。雖然它們可能對其他目的有用，但它們的主要焦點是 React。
那麼，讓我們深入了解一下。
這些擴充功能將透過為您提供片段來提供幫助。程式碼片段是預先定義的程式碼片段，只需一次按鍵（大多數情況下按 Tab 鍵）即可擴充為完整的程式碼區塊。這些片段的範圍可以從單行到整個文件。透過使用片段，您可以將整個檔案壓縮為簡短的縮寫，使您的編碼體驗更加順暢。
1.ES7 React/Redux/GraphQL/React-Native 片段
此擴充功能提供了 React、Redux、GraphQL 和 React Native 的全面片段集合。這些片段可讓您快速產生常用的程式碼結構，從而顯著加快您的開發流程。例如：
-
rcc建立一個 React 類別元件骨架。 -
rfc產生一個 React 功能元件。 -
rnfce片段可協助您快速設定具有預設匯出的 React Native 元件。 -
這個清單是無窮無盡的。在這裡探索
這些片段是高度可自訂的，涵蓋廣泛的用例，使您的開發更加高效。
2.React Hooks 片段
React Hooks 程式碼片段擴充功能透過提供特定的縮寫來簡化在 React 中加入鉤子：
-
ushforuseState初始化一個狀態變數。 -
uehforuseEffect設定副作用。 -
uchforuseContext存取上下文。
這個擴充特別有用，因為它專注於 React 的 hooks API，這是功能元件的核心功能。它可以幫助您快速實現鉤子，而不必每次都記住確切的語法。
3.VSCode React 重構
VSCode React Refactor 可讓您透過將部分程式碼提取到單獨的元件中來重構程式碼。當您的元件變得太大並且您希望將其分解為更小、更易於管理的部分時，這尤其有用。例如：
-
選擇一段 JSX 程式碼。
-
右鍵單擊並選擇“重構”。
-
將其提取到新元件中。
此擴充功能支援 TypeScript 並確保正確導入和使用提取的元件，從而簡化您的重構過程。
4. 將 JSON 貼為程式碼
將 JSON 貼上為程式碼可讓您將 JSON 物件轉換為程式碼。這在處理傳回 JSON 回應的 API 時特別有用。例如：
-
複製 JSON 物件。
-
使用命令選項板選擇“將 JSON 貼上為程式碼”。
-
將 JSON 轉換為具有類型定義的 JavaScript 或 TypeScript 程式碼。
此擴充功能有助於快速將 JSON 資料轉換為可用的程式碼結構，從而節省時間並減少錯誤。
5.SVG圖庫
SVG Gallery 是用於管理專案中的 SVG 檔案的絕佳工具。它允許您直接在 VSCode 中預覽 SVG 文件，這在處理多個 SVG 資源時特別方便。特點包括：
-
在編輯器中預覽 SVG。
-
將 SVG 內容複製為 React 元件。
-
有效地組織和管理您的 SVG 資源。
此擴充簡化了使用 SVG 檔案的流程，讓您更輕鬆地在 React 專案中整合和管理向量圖形。
雖然上述建議來自我的主觀觀點和個人對這些擴充功能的體驗，但我強烈建議您親自安裝和體驗它們。每個開發人員都有獨特的需求和工作流程，這些擴充功能可能會以不同的方式適合您的專案。
我鼓勵您分享一些可以提高您的工作效率的很酷的擴充功能。請記住，這些並不是唯一的擴展，我一直在尋找新工具來改善我的工作流程。
這給我們帶來了一個發人深省的問題：我們是否透過嚴重依賴這些擴充功能而創造了懶惰的程式設計師，或者我們是否真正提高了生產力和效率？分享您的想法和經驗。讓我們討論一下這些工具是更好發展的拐杖還是催化劑。
直到下次！
原文出處：https://dev.to/mitchiemt11/cool-vscode-extensions-that-that-ive-discovered-12mg
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式