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 命令行使用方法，參見《Additional Command line arguments》。

1.5 更聰明的 Emmet

VS Code 內置了 Emmet，且在其基礎之上做了進一步增強，極大的提升了 CSS、HTML 編寫效率。
例如，在一個 CSS 選擇器中書寫以下屬性后，按下?tab?鍵，均可自動補全為?overflow:hidden：

更多 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 - 新開側邊窗口跳轉至定義行
• ??G - 選中上一次的查找結果

代碼展示

• ?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 語法：

3.2 如何在 sidebar 隱藏編譯后文件

設置?Preferences -> Workspace Settings?（或 User Settings）配置文件，將需要隱藏的文件按 glob 匹配模式進行配置，例如以下是 Angular2 TypeScript 項目中隱藏 .js 與 .js.map 文件的配置：

3.3 如何搜索 node_modules 文件夾中的文件

VS Code 的默認搜索規則中會排除?**/.git, **/.DS_Store, **/bower_components, **/node_modules?目錄，可以在用戶配置文件（User Settings）中加入以下配置，來關閉或啟用這些規則：

感謝分享

@Niefee

重置下bracket-match樣式，然后去掉checksums校驗