2020.11.19

我的 Visual Studio Code 編輯器設定記錄 (佈景與模組)

我在 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.colors": [
    "Gold",
    "Orchid",
    "LightSkyBlue"
]

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，就在設定檔新增：

"css.remoteStyleSheets": [
  "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.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 裡面，我們只要給他一個權限讓他能自由上傳/下載該檔案即可。

備份的範圍包含：