Visual Studio Code （簡稱 VS Code）是由微軟研發的一款免費、開源的跨平臺文本（代碼）編輯器。在我看來它是「一款完美的編輯器」。 本文是有關 VS Code 的特性介紹與配置指南，相關設置主要針對 Mac OS X 平臺。在快捷鍵部分， ⌘ 指 Command 鍵，⇧ 指 S ...
Visual Studio Code （簡稱 VS Code）是由微軟研發的一款免費、開源的跨平臺文本（代碼）編輯器。在我看來它是「一款完美的編輯器」。
本文是有關 VS Code 的特性介紹與配置指南，相關設置主要針對 Mac OS X 平臺。在快捷鍵部分， ⌘ 指 Command 鍵，⇧ 指 Shift 鍵，⌃ 指 Control 鍵，⌥ 指 Option/Alt 鍵。
1.1 Git 集成
如上圖所示，VS Code 預設集成了 Git 版本管理。
切換至 Git 面板，點擊左側被修改的文件，即可進行版本對比。使用快捷鍵 ⌘P 打開快捷視窗，可直接使用 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) 抽象語法樹選擇展開一級
-
⌃⇧⌘← - 抽象語法樹選擇縮小一級
單行編輯
-
⇧⌘K - 單行操作，刪除游標所在行
-
⇧⌥↓ - 複製游標所在行到下一行
多行編輯
-
⌥⌘↓ - 向下插入一個游標，或者使用 ⌥ + Click
-
⇧⌥ + 滑鼠拖動 - 多列區塊選擇，再配合 ⇧⌘→ 可選中至結尾處
-
⇧⌘L - 選擇相同文本
-
⌘F2 - 選擇相同單詞，或者使用 ⌘D 依次加入選中
代碼定位
-
⇧⌘O - 跳轉至對象、屬性、方法
-
⇧⌥F - 代碼格式化
-
⇧⌘M - 顯示當前文件的錯誤與警告信息
-
F12 - 跳轉至定義行
-
⌥F12 - 浮窗打開定義行（可直接修改）
-
⌥⌘ + Click - 新開側邊視窗跳轉至定義行
-
⇧⌘\ - 跳轉至對應匹配括弧處
代碼展示
-
⌥Z - 開啟/關閉代碼自動換行，還可通過 editor.wrappingColumn 配置單行最大字元數
-
⇧⌘[ - 代碼摺疊，⇧⌥⌘[ 為全部摺疊
-
⇧⌘] - 代碼展開，⇧⌥⌘] 為全部展開
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 } }
