我在 2016 年曾寫過一篇 Brackets 編輯器的設定文章，沒想到時隔 4 年，已經變心改用 VS Code 惹 Q_____Q。只能說微軟真的很強大，VS Code 不管是軟體本身的更新，或是延伸模組的開發速度，都比 Brackets 快很多，加上 VS Code 也 能安裝 Brackets 內建的好用功能，所以我就轉過去了 (遮臉

使用 Visual Studio Code 的理由

我用 VS Code 也有一段時間了，其實到現在我還是很喜歡 Brackets 這款編輯器，所以跳槽絕不是因為不愛，而是有幾點因素考量：

更新速度

不知道是微軟加持還是什麼緣故，VS Code 大概是我看過更新最勤勞的編輯器了，每個月都會固定更新，而且有時候更新的內容也很實用，還會有一連串的說明跟示意圖，非常的貼心！

有興趣的朋友也可以到他們的更新頁面看詳細的介紹。

豐富的延伸模組

因為官方勤勞，連帶著讓開源者也勤勞了起來，VS Code 的延伸模組真的有超超超超多內容可以選擇！而且各式各樣奇奇怪怪的需求都有，每次看延伸模組都像是在挖寶一樣，喜歡客製化的工程師，應該會沈浸在 VS Code 的世界裡無法自拔吧！

另外，VS Code 也有提供 Brackets 編輯器的內建功能，像是我在 Brackets 編輯器介紹文中說到的「炫技」：

在 VS Code 延伸模組中，他們叫該功能為 CSS Peak，後面介紹模組時會再詳細說明。

各式各樣的特色

此外，我在 Brackets 提到的這些特色 VS Code 也都有：

• 客製化方便
• 有中文版
• 安裝佈景主題 / 模組都很方便

此外還有：

• 內建 Emmet
• 內建 Terminal (Brackets 要另外裝還要啟動 tty.js，但 VS Code 是直接吃你終端機的設定，不需要再背景執行)

這些功能，也會透過官方更新不斷的增加，一切的一切，都讓我覺得很有誠意！

接下來，會跟大家介紹我在使用的 VS Code 延伸模組，來看看有沒有你喜歡的，有的話就夾去配吧 XD。

我的 VS Code 延伸模組一覽

安裝延伸模組的方式很簡單，打開 VS Code 編輯器後，選擇左側選單的最後一個圖示 (Marketplace)，再選擇想要安裝的模組，就會看到相關的介紹與教學，再點擊安裝就可以囉！(部分模組安裝完成後要重新啟動編輯器，才能看到效果。)

以下介紹我使用的延伸模組：

Auto Rename Tag

Auto Rename Tag，顧名思義，就是可以自動幫你把 HTML TAG 做替換。

我自己常用到的情境是把 <div> 改成 <section>，或者 <h2> 改成 <h3> …等等。另外只要是 HTML TAG 他都支援，所以如果是寫 WordPress 的佈景主題 (副檔名為 PHP)，同樣也適用唷！

---

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2，可以把括號變色並作配對，code 很長也不用擔心，因為他的顏色標記會包含引導線，跟著線段往下看就能找到結尾的括號囉。

如果不喜歡這個顏色，還可以從設定檔修改：

Bracket Pair Colorizer 2 的說明頁還有許多設定可以調整，他有貼心的附上範例圖檔跟設定方式，有興趣的朋友可以直接閱讀說明文件去修改喔。

---

cdnjs

cdnjs，可以直接在 VS Code 搜尋需要的 CDN JS 檔案，雖然一開始使用步驟有點多，但我看中的是他的紀錄，只要用過一次就會存起來，下次就不用重新找了，方便很多！

---

CSS Peek

之前有提到，VS Code 也有提供 Brackets 編輯器的內建功能，就是我現在要介紹的這款 CSS Peek，可以說是完美復刻了該功能，此外也有支援 SCSS / SASS。

使用上，我是對著 Class name 按下「Alt」+「滑鼠左鍵」就會開啟 Peek 功能，你也可以對著 Class name 按下「滑鼠右鍵」，選擇「定義 (F12)」，同樣能開啟。

我真的很喜歡這個功能，因為當程式碼一多，需要尋找 CSS 樣式時會非常方便。

此外，VS Code 也有內建 JavaScript Peek 的功能，可以對著函式或變數按下「滑鼠右鍵」，選擇「定義 (F12)」，試試看效果喔。

---

ftp-kr

ftp-kr 可以讓我少開一個 FTP 軟體，直接透過 VS Code 將檔案上傳到 FTP ( 認真覺得用 VS Code 的人真是懶到一個極致 XDDD )

這個延伸模組會將 FTP 的設定資料存成一份 json 在專案資料夾內，記得要把 .gitignote 設定成不上傳，不然密碼都會被人看光光啦。

設定的方式也很簡單，直接看說明頁面照著一步一步做就行囉！

---

Git History

Git History 能讓我們直接查詢 Git 的 commit 記錄，並方便比對檔案的修改，應該是所有開發人員都會安裝的延伸模組吧！推一個 XD。

---

HTML CSS Support

HTML CSS Support 的作用是讓我們在寫 HTML 時，可以自動讀取到 CSS 的 class / id，省去反覆查閱的時間。另外也有支援多種檔案格式，如 VUE / JS / PHP / MD … 等等

此外還能設定遠端的 css 檔案喔！假設我們想接 Bootstrap 的 CSS，就在設定檔新增：

如此一來，就可以自動帶入 Bootstrap CSS，再也不用記那些落落長的語法啦！

---

i18n Ally

i18n Ally 可以幫助我們設定與管理多國語系，我當初會安裝這個延伸模組，是因為 VUE 的專案有使用到多國語系，可惜安裝後就沒有機會再碰到多國語系的需求了，所以這個延伸模組我也還沒實際使用過。

另外我覺得他的 theme 超漂亮的，如果有人知道這是什麼 theme 也歡迎告訴我一聲 XDD。

---

Live Server

Live Server 這個功能大家應該也不陌生，幾乎是所有前端必備的延伸模組了！它可以讓我們在不重新整理的情況下，直接看到頁面修改後的結果。

---

Markdown Preview Enhanced

Markdown 相關的延伸模組也蠻多的，之所以選擇 Markdown Preview Enhanced 的原因，是他可以直接預覽文件，讓畫面美美的 XD。另外他還有許多強大的功能，這邊就不一一贅述了，有興趣的朋友可以參考他的文件介紹。

---

Path Intellisense

Path Intellisense 可以讓快速的顯示檔案載入的相對路徑。

---

REST Client

REST Client 跟 Postman 的作用類似，他可以直接在 VS Code 測試 HTTP request，也可以讀取 .http 或 .rest 的檔案，然後在編輯器裡面直接測試。

---

Settings Sync

Settings Sync 是我難得一見想推薦給大家的超好用模組！在工作環境下用一個順手的編輯器是很重要的，那要如何讓家裡跟公司的電腦可以同步設定呢？就可以使用 Settings Sync 來協助你同步，他會將設定檔放在 gist.github.com 裡面，我們只要給他一個權限讓他能自由上傳/下載該檔案即可。

備份的範圍包含：

1. Settings File
2. Keybinding File
3. Launch File
4. Snippets Folder
5. VSCode Extensions & Extensions Configurations
6. Workspaces Folder

---

TabNine Autocomplete AI

TabNine 可以記憶我們打過的語法，供下一次使用。比較特別的是，他是真的在學習我們打過的程式碼，所以用得愈久會愈精準唷。

---

Vetur

Vetur 應該是 VUE 工程師必裝的模組之一！他支援了以下功能：

• Syntax-highlight (語法高亮)
• Snippet
• Emmet
• Lint / Error Checking
• Formatting
• … 等等

---

Vue Peek

Vue Peek 的功能跟 CSS Peek 很像，可以直接在 vue 檔案中找到相對應的元件，節省開發的時間。

---

以上這些是我目前有用到的延伸模組，原本是想通篇寫個詳細設定的，但後來發現每個模組的文件都寫得很詳細，所以有興趣的朋友可以直接到網站看會比較清楚，如果有不懂的地方歡迎留言討論唷 ^Q^