VSCode 下載點： https://code.visualstudio.com/

VSCode是由微軟開發的文字編輯器，同時支援 Windows、Linux 和 macOS 作業系統且開放原始碼，在前端開發上已經是必須推薦的一款超好用編輯器，這篇主要介紹一些 VSCode 好用的功能與快捷鍵。

VSCode 的好用功能

Terminal 終端機

在 Mac 或是 Windows 系統，快捷鍵都是按 Ctrl + ` 來開啟預設的 Terminal 工具。
如下圖所示，按下之後下方會出現 Terminal

Terminal 可以修改字體，讓他變得更美觀！
步驟如下：

1. 到設定找到 terminal.integrated.fontFamily
2. 輸入要修改的字體名稱："terminal.integrated.fontFamily": "Monaco for Powerline",

如果上述的方法，VSCode 顯示 終端機僅支援等距字體 的錯誤訊息，這邊也有其他字體提供安裝：https://github.com/powerline/fonts
步驟如下：

1. 把檔案 clone 下來

$git clone https://github.com/powerline/fonts.git —depth=1

2. 安裝

$cd fonts
$./install.sh
$cd ..
$rm -rf fonts

3. 到 VSCode 設定中更改：
   "terminal.integrated.fontFamily": "Source Code Pro for Powerline"

Git 原始檔控制

如圖中，點選 VSCode 左邊的原始檔控制，就可以比對修改過的程式碼，比對後只要按檔案旁的 +，就可以儲存變更，接著就可以 Commit 啦～

偵錯 Debug

如圖中，點選左邊的偵錯或是按 cmd + shift + D 就可以開始建立組態檔。

Gulp - 工具整合

當專案中有 gulpfile.js 時，按下 cmd + shift + P 並輸入 Run Task，VSCode 會自動撈出 gulpfile 內的 Task 讓開發者選擇執行，如下圖：

停止方式一樣按下 cmd + shift + P 並輸入 Terminate Task，就可以選擇要停止的工作，也可以在終端機的區域按下 ctrl + C，終端機會顯示 工作將被重新啟用.按任意鍵關閉 ，接著按任意鍵就可以停止工作了。

問題 - 清楚顯示錯誤程式碼

當程式碼有錯誤時，按下 shift + cmd + m 就會跳到與終端機相同視窗的 問題，裡面就會列出目前出錯的地方與問題。

加速撰寫的程式碼提示

完整的 Javascript 程式碼提示，打入開頭就會顯示可以使用的語法，不需自己完整的輸入也可以避免拼錯。

內建 Emmet

內建 Emmet，在 HTML 開發就相當的省時間，也可以減少手誤的機會，只要輸入內容後加上 tab，就完成了。例如：! > tab，就會得到 HTML 開發必備內容。

清楚的設定介面

點選設定，VSCode 已經將設定的介面轉為很容易閱讀的樣式，透過上方的搜尋可以很快找到自己想要更改的設定，並直接在下拉式選單中選擇自己要更改的內容或是直接填入要修改的值，儲存後重新開啟就完成設定了。

你可以從右上角切換另ㄧ種的設定樣式。

左邊是設定的預設值，複製到右邊的個人設定檔就可以修改參數，且設定檔包含完整的中文說明，仍透過搜尋列可以輕鬆找到要修改得值。

VSCode 介面中文化設定

快速設定步驟：

1. 安裝此插件
   https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant
2. 按下 Ctrl + Shift + P 來呼叫 命令選擇區，輸入 “config” 或是 “lang” 就可以找到 Configure Display Language
3. 在 locale.json 裡面設定 "locale": "zh-tw" 即可載入中文(繁體)的語言套件

VSCode 常用快捷鍵大全

對 VSCode 好用的內建功能有基礎了解以後，要加速自己在使用上的效率，就需要再更一進步了解一下常用功能的快捷鍵。使用快捷鍵的好處就在於不需要再一行一列的尋找功能是藏在哪個工具列裡，透過快捷鍵馬上就能快速開啟需要的功能，讓開發上更便捷。

以下列出的這些快捷鍵，使用 Mac 的話就是將下列的 Ctrl 改成按 Cmd。

Ctrl 加上 A - Z ( 缺少 H、L、M、R、Y ) 的快捷鍵列表

使用 Mac 也是按 ctrl 的快捷鍵列表

VScode 已經是開發上相當好用的編輯器之一，它內建的功能就能讓大家在開發上更有效率，且簡單又清楚的介面也很容易上手。這篇除了介紹 VSCode 內建很多好用的功能以外，也列出了常用的快捷鍵，希望可以讓已經在使用的人有更進一步的了解，或是給尚未入坑還在觀望的新手一個入門的小指引。