Visual Studio Code （簡稱 VS Code）是由微軟研發的一款免費、開源的跨平臺文本（代碼）編輯器。在我看來它是「一款完美的編輯器」。
本文是有關 VS Code 的特性介紹與配置指南，相關設置主要針對 Mac OS X 平臺。在快捷鍵部分， ? 指 Command 鍵，? 指 Shift 鍵，? 指 Control 鍵，? 指 Option/Alt 鍵。
1. Visual Studio Code 特性簡介
1.1 Git 集成
如上圖所示，VS Code 默認集成了 Git 版本管理。
切換至 Git 面板，點擊左側被修改的文件，即可進行版本對比。默認為左右窗口對比視圖（Side by Side View），點擊編輯器窗口右上方「…」圖標可切換至行內對比視圖（Inline View）。
鼠標移至 Git 面板中的文件列表上時，會出現「+」圖標，點擊后即可將文件添加至暫存區（Stage），點擊右上方的「…」圖標可以完成常用的 pull/commit 操作。
點擊窗口左下角的 git 分支信息，即可快速切換至其他分支。
更多 Git 參考資料請閱讀《Git 進階指南》和 VS Code 官方文檔《Version Control》章節。
1.2 多窗口實時編輯與預覽
VS Code 最多可同時開啟三個子窗口。若多個子窗口中打開的文件為同一文件時，則修改其中任意窗口內容，其他窗口都可以實時同步變更。
如上圖，左側子窗口是一個 Markdown 文件，右側子窗口是該文件的 Markdown 預覽模式（快捷鍵 ??V），如此即可實現類似 MacDown/Mou 等軟件的編寫體驗。
1.3 代碼提示與引用分析
雖然是一款輕量級編輯器，但 VS Code 卻有著 IDE 級別的代碼高亮、語法檢測、引用分析功能，十分適合編程初學者和大型項目開發。在其官網上列出了它默認支持的語言列表。
借助 Typings ，VS Code 還支持了 Node.js、ES6、AngularJS、ReactJS，十分適合前端開發人員。為了能更好的和其他開源框架融合，VS Code 有意削弱了原有的 JavaScript 語法校驗功能，建議用戶使用 ESLint 來定制個性化代碼校驗需求。
除此之外，VS Code 的 Debug 功能也是十分強大。以下是其 Node.js Debug 的演示：
借助「Debugger for Chrome」插件，還可以直接在編輯器中打斷點調試 web。
1.4 命令行調用
VS Code 提供了一個 code 命令，用來在 shell 環境下調用編輯器。使用快捷鍵 ??P（或 F1） 喚起命令面板，輸入以下命令即可完成安裝。
code 命令后可接多個路徑或文件：
code pro6.js pro6.scss ../
文件對比：
code -d new-file.js old-file.js
打開文件并跳至指定行：
code -g source/cn/static/global/tracker.js:15
更多 code 命令行使用方法，參見《Additional Command line arguments》。
1.5 更聰明的 Emmet
VS Code 內置了 Emmet，且在其基礎之上做了進一步增強，極大的提升了 CSS、HTML 編寫效率。
例如，在一個 CSS 選擇器中書寫以下屬性后，按下 tab 鍵，均可自動補全為 overflow:hidden：
ov:h
ove:h
of:h
更多 Emmet 縮寫，請參考《Emmet Cheat Sheet》。
2. 快捷鍵與插件配置
2.1 所有快捷鍵列表
注：VS Code 的快捷鍵有很多是 Fn 功能鍵，不符合 Mac 用戶習慣，建議各位通過 Preferences -> Keyboard Shortcuts 重設快捷鍵。
所有快捷鍵列表請參見《Key Bindings for Visual Studio Code》，其中較為常用的快捷鍵有以下這些：
文本選擇
- ???→ - AST (Abstract Syntax Tree) 抽象語法樹選擇展開一級
- ???← - 抽象語法樹選擇縮小一級
- F2 - 重命名當前對象，或使用鼠標右鍵菜單
- ?F2 - 重命名當前字符串（包含作為子字符串的情況），或使用鼠標右鍵菜單
單行編輯
- ??K - 單行操作，刪除光標所在行
- ??↓ - 復制光標所在行到下一行
- ?↓ - 將光標所在行移至下一行
多行編輯
- ??↓ - 向下插入一個光標，或者使用 ? + Click
- ?? + 鼠標拖動 - 多列區塊選擇，再配合 ??→ 可選中至結尾處
- ??L - 選擇相同文本
- ?F2 - 選擇相同單詞，或者使用 ?D 依次加入選中
代碼定位
- ??\ - 跳轉至對應匹配括號處
- ??O - 跳轉至對象、屬性、方法
- ?G - 跳轉至指定行
- ?↓ - 跳轉至文件結尾
- ??M - 顯示當前文件的錯誤與警告信息
- F12 - 跳轉至定義行
- ?F12 - 浮窗打開定義行（可直接修改）
- ?? + Click - 新開側邊窗口跳轉至定義行
代碼展示
- ?Z - 開啟/關閉代碼自動換行，還可通過 editor.wrappingColumn 配置單行最大字符數
- ??[ - 代碼折疊，???[ 為全部折疊
- ??] - 代碼展開，???] 為全部展開
- ??F - 代碼格式化
窗口操作
- ?1 ?2 ?3 - 切換至對應的子窗口
- ?Tab - 切換當前子窗口的標簽頁
- ?` - 打開內置 Terminal 窗口
- ??U - 打開/關閉 Output 窗口，可查看 Extensions/Git/Task 輸出
2.2 插件推薦
- stylefmt - 用于格式化 SCSS 文件
- EditorConfig for VS Code - 用于支持 .editorconfig 配置規范
- ESLint - 用于支持 JavaScript 實時語法校驗
- stylelint - 用于支持 CSS/SCSS/Less 實時語法校驗
3. 常見問題
3.1 如何支持 PHP Smarty Template 語法
VS Code 能識別大部分主流代碼文件，當需要進行關聯語法設置時，可通過 Preferences -> Workspace Settings （或 User Settings）配置文件進行設置。
例如，以下代碼可以將后綴為 .tpl 的 Smarty 模板文件關聯成 PHP 語法：
"files.associations":{
"*.tpl": "php"
}
3.2 如何在 sidebar 隱藏編譯后文件
設置 Preferences -> Workspace Settings （或 User Settings）配置文件，將需要隱藏的文件按 glob 匹配模式進行配置，例如以下是 Angular2 TypeScript 項目中隱藏 .js 與 .js.map 文件的配置：
{
"files.exclude": {
"**/._*": true,
"node_modules/": true,
"app/*.js.map": true,
"app/*.js": true
}
}
3.3 如何搜索 node_modules 文件夾中的文件
VS Code 的默認搜索規則中會排除 **/.git, **/.DS_Store, **/bower_components, **/node_modules 目錄，可以在用戶配置文件（User Settings）中加入以下配置，來關閉或啟用這些規則：
{
"search.exclude": {
"**/node_modules": false,
"**/bower_components": true
}
}
