Visual Studio Code （簡稱 VS Code）是由微軟研發(fā)的一款免費、開源的跨平臺文本（代碼）編輯器旭愧。在我看來它是「一款完美的編輯器」辽狈。
本文是有關(guān) VS Code 的特性介紹與配置指南，相關(guān)設置主要針對 Mac OS X 平臺玩讳。在快捷鍵部分涩蜘， ? 指 Command 鍵，? 指 Shift 鍵熏纯，? 指 Control 鍵同诫，? 指 Option/Alt 鍵。
1. Visual Studio Code 特性簡介
1.1 Git 集成
VS Code Git 集成
如上圖所示樟澜，VS Code 默認集成了 Git 版本管理误窖。
切換至 Git 面板，點擊左側(cè)被修改的文件秩贰，即可進行版本對比贩猎。默認為左右窗口對比視圖（Side by Side View），點擊編輯器窗口右上方「…」圖標可切換至行內(nèi)對比視圖（Inline View）萍膛。
鼠標移至 Git 面板中的文件列表上時吭服，會出現(xiàn)「+」圖標，點擊后即可將文件添加至暫存區(qū)（Stage）蝗罗，點擊右上方的「…」圖標可以完成常用的 pull/commit 操作艇棕。
點擊窗口左下角的 git 分支信息，即可快速切換至其他分支串塑。
更多 Git 參考資料請閱讀《Git 進階指南》和 VS Code 官方文檔《Version Control》章節(jié)沼琉。
1.2 多窗口實時編輯與預覽
多窗口實時編輯與預覽
VS Code 最多可同時開啟三個子窗口。若多個子窗口中打開的文件為同一文件時桩匪，則修改其中任意窗口內(nèi)容打瘪，其他窗口都可以實時同步變更。
如上圖傻昙，左側(cè)子窗口是一個 Markdown 文件闺骚，右側(cè)子窗口是該文件的 Markdown 預覽模式（快捷鍵 ??V），如此即可實現(xiàn)類似 MacDown/Mou 等軟件的編寫體驗妆档。
1.3 代碼提示與引用分析
雖然是一款輕量級編輯器僻爽，但 VS Code 卻有著 IDE 級別的代碼高亮、語法檢測贾惦、引用分析功能胸梆，十分適合編程初學者和大型項目開發(fā)敦捧。在其官網(wǎng)上列出了它默認支持的語言列表。
圖：VS Code 支持的編程語言種類
借助Typings碰镜，VS Code 還支持了 Node.js兢卵、ES6、AngularJS绪颖、ReactJS秽荤，十分適合前端開發(fā)人員。為了能更好的和其他開源框架融合菠发，VS Code 有意削弱了原有的 JavaScript 語法校驗功能王滤，建議用戶使用 ESLint 來定制個性化代碼校驗需求贺嫂。
除此之外滓鸠，VS Code 的 Debug 功能也是十分強大。以下是其 Node.js Debug 的演示：
圖：VS Code Node.js Debugging
借助「Debugger for Chrome」插件第喳，還可以直接在編輯器中打斷點調(diào)試 web糜俗。
1.4 命令行調(diào)用
VS Code 提供了一個code命令，用來在 shell 環(huán)境下調(diào)用編輯器曲饱。使用快捷鍵??P（或 F1） 喚起命令面板悠抹，輸入以下命令即可完成安裝。
圖：安裝 code 命令行
code 命令后可接多個路徑或文件：
codepro6.jspro6.scss../
文件對比：
code-d new-file.jsold-file.js
打開文件并跳至指定行：
code -gsource/cn/static/global/tracker.js:15
更多 code 命令行使用方法扩淀，參見《Additional Command line arguments》楔敌。
1.5 更聰明的 Emmet
VS Code 內(nèi)置了 Emmet，且在其基礎之上做了進一步增強驻谆，極大的提升了 CSS卵凑、HTML 編寫效率。
例如胜臊，在一個 CSS 選擇器中書寫以下屬性后勺卢，按下tab鍵，均可自動補全為overflow:hidden：
ov:hove:hof: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
?? + 鼠標拖動 - 多列區(qū)塊選擇埃跷，再配合 ??→ 可選中至結(jié)尾處
??L - 選擇相同文本
?F2 - 選擇相同單詞蕊玷，或者使用 ?D 依次加入選中
代碼定位
??\ - 跳轉(zhuǎn)至對應匹配括號處
??O - 跳轉(zhuǎn)至對象、屬性弥雹、方法
?G - 跳轉(zhuǎn)至指定行
?↓ - 跳轉(zhuǎn)至文件結(jié)尾
??M - 顯示當前文件的錯誤與警告信息
F12 - 跳轉(zhuǎn)至定義行
?F12 - 浮窗打開定義行（可直接修改）
?? + Click - 新開側(cè)邊窗口跳轉(zhuǎn)至定義行
代碼展示
?Z - 開啟/關(guān)閉代碼自動換行垃帅，還可通過 editor.wrappingColumn 配置單行最大字符數(shù)
??[ - 代碼折疊，???[ 為全部折疊
??] - 代碼展開剪勿，???] 為全部展開
??F - 代碼格式化
窗口操作
?1 ?2 ?3 - 切換至對應的子窗口
?Tab - 切換當前子窗口的標簽頁
?` - 打開內(nèi)置 Terminal 窗口
??U - 打開/關(guān)閉 Output 窗口贸诚，可查看 Extensions/Git/Task 輸出
2.2 插件推薦
stylefmt- 用于格式化 SCSS 文件
EditorConfig for VS Code- 用于支持 .editorconfig 配置規(guī)范
ESLint- 用于支持 JavaScript 實時語法校驗
stylelint- 用于支持 CSS/SCSS/Less 實時語法校驗
3. 常見問題
3.1 如何支持 PHP Smarty Template 語法
VS Code 能識別大部分主流代碼文件，當需要進行關(guān)聯(lián)語法設置時厕吉，可通過Preferences -> Workspace Settings（或 User Settings）配置文件進行設置酱固。
例如，以下代碼可以將后綴為 .tpl 的 Smarty 模板文件關(guān)聯(lián)成 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 的默認搜索規(guī)則中會排除**/.git, **/.DS_Store, **/bower_components, **/node_modules目錄，可以在用戶配置文件（User Settings）中加入以下配置项钮，來關(guān)閉或啟用這些規(guī)則：
{"search.exclude": {"**/node_modules":false,"**/bower_components":true}}
