IT工程師數位筆記本

本文內容已有更新，請查看 github 上最新版本：https://github.com/kaiye/kaiye.github.com/issues/14

---

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 面板，點擊左側被修改的文件，即可進行版本對比。使用快捷鍵 ⌘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
    }
}