一次搞定！VSCode 擴充套件推薦與設定全攻略！

1. 開啟 vscode

首先，打開你的 Visual Studio Code。如果您尚未安裝，建議參考「兩步驟快速完成 Visual Studio Code 安裝，零難度超詳細安裝教學！」，按照教學指引完成下載與安裝。

2. 打開 Extensions，下載擴充套件

在 VSCode 左側工具列中，點擊 「擴充功能」圖示（如下圖所示），或使用快捷鍵 Ctrl+Shift+X，即可進入 Extensions 頁面。這裡提供多種擴充套件，你可以根據需求搜尋並下載安裝。

3. 安裝 Live Server

Live Server 能讓你在開發 HTML、CSS 或 JavaScript 頁面時，實時預覽變更。

4. 安裝 Prettier - Code formatter

Prettier 是一款自動化程式碼排版工具，能幫助你程式碼保持風格一致，讓程式碼更整齊、易於閱讀。

i. 設定 Prettier - Code formatter

安裝完成後，進入 設定頁面，並啟用相關選項。

ii. 啟用「儲存檔案時自動排版」

在設定中，找到 「Format On Save」 並啟用，這樣每次按下 Ctrl+S 儲存時，程式碼將會自動重新排版。

iii. 設定 Prettier 為預設排版工具

確保每次儲存檔案時，都是使用 Prettier 進行排版。

• 示意圖（原本）

• 示意圖（儲存後 Ctrl + S）

當你按下 Ctrl + S 儲存時，程式碼會按照 Prettier 的規則進行重新排版。如果程式碼存在錯誤（如：SyntaxError 語法錯誤），將無法完成排版。

• 「有圈圈」表示「尚未儲存」

iv. 語法錯誤時的排版提示

當程式碼存在語法錯誤時，Prettier 會跳出錯誤提示。

• 點開 Prettier 會有錯誤提示　

你可以點開錯誤提示，VSCode 會顯示錯誤的具體位置（例如「SyntaxError 語法錯誤」）

5. 安裝 Material Theme

Material Theme 能改變 VSCode 編輯器的整體外觀，提供多種顏色主題。基於 Google Material Design 設計，提升程式碼可讀性。

i. 設定 Material Theme

安裝後，可以使用快捷鍵 Ctrl + K + T 開啟主題選單，選擇喜歡的顏色主題。

ii. 選擇主題顏色

在「選取色彩主題」對話框中，你可以挑選喜歡的個人風格主題。

iii. 程式碼顏色展示

讓程式碼元素色彩區分更明顯，便於快速辨識語法結構。

6. 安裝 Material Theme Icons

Material Theme Icons 能夠改變檔案圖示。安裝後，無論是 HTML、CSS 還是 JavaScript 檔案，都會有獨特的圖示樣式。

• 示意圖（原本）

• 示意圖（更改後）

安裝後，檔案圖示變得更加多樣化，讓不同檔案類型一目了然。

• 另一種設定方法

你也可以透過「設定頁面」來更改圖示佈景主題。

7. 安裝 Auto Rename Tag

Auto Rename Tag 是為 HTML 和 XML 設計的便利工具，當你修改某一個標籤時，會自動同步修改對應的開啟與關閉標籤。

這項功能能有效是前端開發者不可或缺的好幫手。

Auto Rename Tag 專門為 HTML 和 XML 標籤提供自動重命名的功能。當你修改一個標籤名稱時，對應的開頭或結尾標籤也會自動更新，避免手動更新標籤名稱的繁瑣過程，大幅降低出錯的機率。

透過這些擴充套件，你的開發體驗將全面升級！無論是程式碼排版、自動化流程，還是視覺效果的優化，都能幫助你事半功倍、更輕鬆地完成工作。現在，準備好開啟你的程式旅程吧！