本節大綱

• 前言
• Visual Studio Code
• 參考資料
• 結論

前言

透過這個章節，你會學到 Visual Studio Code 及推薦套件。

Visual Studio Code

參考維基百科，Visual Studio Code 是一款由微軟開發且跨平台的免費原始碼編輯器，簡稱為 VS Code。

早期本人也是使用 Sublime 編輯器，但因為 VS Code 編輯器，其一直推出新的功能且具有豐富的生態圈，各種好用的套件一直被開發出來，因此也改用此編輯器。

首先進到 VS Code 的官網，選擇筆電的作業系統，來下載對應的 VS Code 軟體。

我的套件分享

Auto Close Tag：自動添加閉標籤。

Auto Add Brackets in String Interpolation：在使用字串模板時，自動添加括號。

Auto Rename Tag：再改 HTML 的標籤時，會自動修正成對 HTML 標籤。

Code Spell Checker：程式碼的拼寫檢查。

Color Highlight：這個套件可以把 CSS 的顏色，特別註記起來。

CSS Peek：可以透過自定義的 Html class，快速找到自定義的 CSS。

Dark Lavender：這是一個由業界知名的 T7 大神開發的，是基於 Material 開發的深色主題，透過顏色及字體的粗細，來辨別其功能，對於開發人員，尤其是初階工程師非常有幫助。

Error Lens：改善錯誤、警告和其他程式語言診斷的顯示。

ESLint：JavaScript 程式碼檢查。

Git Graph：可查看 Repository 的 Git 圖表，並從圖表中執行 Git 的操作。

GitLens — Git supercharged：可透過 VS Code，查看是哪位 User 提交紀錄及追蹤。

Highlight Matching Tag：加強顯示所點選的結束標籤和開始標籤。

Hyper JavaScript Snippets：適用於 VS Code 的 JavaScript、TypeScript 和 NodeJS 的片段集合。

indent-rainbow：這可以是縮排更易於閱讀。

Live Server：可以實時顯示頁面的修正結果。

Live Share：透過這工具可以多人協作。

參考資料

• Visual Studio Code

結論

透過這篇文章可以分享給各位 Visual Studio Code 的強大及擁有豐富的套件可以安裝，更易於開發，達到事半功倍之效果。