Visual Studio Code 配置指南_Visual

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: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) 抽象文法樹選擇展開一級

⌃⇧⌘← - 抽象文法樹選擇縮小一級 單行編輯

⇧⌘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    }

}

from: http://www.cnblogs.com/kaiye/p/5397345.html