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 標籤提供自動重命名的功能。當你修改一個標籤名稱時，對應的開頭或結尾標籤也會自動更新，避免手動更新標籤名稱的繁瑣過程，大幅降低出錯的機率。
透過這些擴充套件，你的開發體驗將全面升級！無論是程式碼排版、自動化流程，還是視覺效果的優化，都能幫助你事半功倍、更輕鬆地完成工作。現在，準備好開啟你的程式旅程吧！
