Visual Studio Code 配置指南

標籤：

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

 

Visual Studio Code 配置指南