學會用好 Visual Studio Code_Visual

Visual Studio Code是個牛逼的編輯器，啟動非常快，完全可以用來代替其他文字檔編輯工具。又可以用來做開發，支援各種語言，相比其他IDE，輕量級完全可配置還整合Git感覺非常的適合前端開發，是微軟親生的想必TypeScript會支援的非常好。 所以我仔細研究了一下文檔未來可能會作為主力工具使用。 主命令框 Command Palette

最重要的功能就是F1或Ctrl+Shift+P開啟的命令選擇區了，在這個命令框裡可以執行VSCode的任何一條命令，可以查看每條命令對應的快速鍵，甚至可以關閉這個編輯器。

按一下Backspace會進入到Ctrl+P模式裡 Ctrl+P 模式

在Ctrl+P下輸入>又可以回到主命令框 Ctrl+Shift+P模式。

在Ctrl+P視窗下還可以 直接輸入檔案名稱，快速開啟檔案 ? 列出當前可執行檔動作 ! 顯示Errors或Warnings，也可以Ctrl+Shift+M : 跳轉到行數，也可以Ctrl+G直接進入 @ 跳轉到symbol（搜尋變數或者函數），也可以Ctrl+Shift+O直接進入 @:根據分類跳轉symbol，尋找屬性或函數，也可以Ctrl+Shift+O後輸入:進入 # 根據名字尋找symbol，也可以Ctrl+T 常用快速鍵 編輯器與視窗管理 同時開啟多個視窗（查看多重專案） 開啟一個新視窗： Ctrl+Shift+N 關閉視窗： Ctrl+Shift+W 同時開啟多個編輯器（查看多個檔案） 建立檔案 Ctrl+N 曆史開啟檔案之間切換 Ctrl+Tab，Alt+Left，Alt+Right 切出一個新的編輯器（最多3個）Ctrl+\，也可以按住Ctrl滑鼠點擊Explorer裡的檔案名稱 左中右3個編輯器的快速鍵Ctrl+1 Ctrl+2 Ctrl+3 3個編輯器之間迴圈切換 Ctrl+` 編輯器換位置，Ctrl+k然後按Left或Right 代碼編輯 格式調整 程式碼縮排Ctrl+[， Ctrl+] 摺疊開啟代碼塊 Ctrl+Shift+[， Ctrl+Shift+] Ctrl+C Ctrl+V如果不選中，預設複製或剪下一整行 代碼格式化：Shift+Alt+F，或Ctrl+Shift+P後輸入format code 修剪空格Ctrl+Shift+X 上下移動一行： Alt+Up 或 Alt+Down 向上向下複製一行： Shift+Alt+Up或Shift+Alt+Down 在當前行下邊插入一行Ctrl+Enter 在當前行上方插入一行Ctrl+Shift+Enter 游標相關 移動到行首：Home 移動到行尾：End 移動到檔案結尾：Ctrl+End 移動到檔案開頭：Ctrl+Home 移動到後半個括弧 Ctrl+Shift+] 選中當前行Ctrl+i 選擇從游標到行尾Shift+End 選擇從行首到游標處Shift+Home 刪除游標右側的所有字Ctrl+Delete Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right Multi-Cursor：可以連續選取多處，然後一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up 同時選中所有匹配的Ctrl+Shift+L Ctrl+D下一個匹配的也被選中(被我自訂成刪除當前行了，見下邊Ctrl+Shift+K) 回退上一個游標操作Ctrl+U 重構代碼 跳轉到定義處：F12 定義處縮圖：只看一眼而不跳轉過去Alt+F12 列出所有的引用：Shift+F12 同時修改本檔案中所有匹配的：Ctrl+F12 重新命名：比如要修改一個方法名，可以選中後按F2，輸入新的名字，斷行符號，會發現所有的檔案都修改過了。 跳轉到下一個Error或Warning：當有多個錯誤時可以按F8逐個跳轉 查看diff 在explorer裡選擇檔案右鍵 Set file to compare，然後需要對比的檔案上右鍵選擇Compare with 'file_name_you_chose'. 尋找替換 尋找 Ctrl+F 尋找替換 Ctrl+H 整個檔案夾中尋找 Ctrl+Shift+F
匹配符： * to match one or more characters in a path segment ? to match on one character in a path segment ** to match any number of path segments ,including none {} to group conditions (e.g. {**/*.html,**/*.txt} matches all html and txt files) [] to declare a range of characters to match (e.g., example.[0-9] to match on example.0,example.1, … 顯示相關 全屏：F11 zoomIn/zoomOut：Ctrl + =/Ctrl + - 側邊欄顯/隱：Ctrl+B 側邊欄4大功能顯示： Show Explorer Ctrl+Shift+E Show SearchCtrl+Shift+F Show GitCtrl+Shift+G Show DebugCtrl+Shift+D Show OutputCtrl+Shift+U 預覽markdownCtrl+Shift+V 其他 自動儲存：File -> AutoSave ，或者Ctrl+Shift+P，輸入 auto 皮膚預覽

f1後輸入 theme 斷行符號，然後上下鍵即可預覽

自訂settings.json

User settings 是全域設定，任何vs Code開啟的項目都會依此配置。

預設儲存在:

Windows: %APPDATA%\Code\User\settings.json
Mac: $HOME/Library/Application Support/Code/User/settings.json
Linux: $HOME/.config/Code/User/settings.json Workspace settings 是本工作區的設定，會覆蓋上邊的配置

儲存在工作區的.vocode檔案夾下。

幾乎所有設定都在settings.json裡，包括 Editor Configuration - font, word wrapping, tab size, line numbers, indentation, … Window Configuration - restore folders, zoom level, … Files Configuration - excluded file filters, default encoding, trim trailing whitespace, … File Explorer Configuration - encoding, WORKING FILES behavior, … HTTP Configuration - proxy settings Search Configuration - file exclude filters Git Configuration - disable Git integration, auto fetch behavior Telemetry Configuration - disable telemetry reporting, crash reporting HTML Configuration - HTML format configuration CSS Configuration - CSS linting configuration JavaScript Configuration - Language specific settings JSON Configuration - Schemas associated with certain JSON files Markdown Preview Configuration - Add a custom CSS to the Markdown preview Less Configuration - Control linting for Less Sass Configuration - Control linting for Sass TypeScript Configuration - Language specific settings PHP Configuration - PHP linter configuration

例如可以修改讓vscode認識.glsl副檔名

{    // Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.    "files.associations": {        "*.glsl": "shaderlab"    }}

修改預設快速鍵

File -> Preferences -> Keyboard Shortcuts

修改keybindings.json，我的顯示在這裡C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json

1234567891011121314151617181920212223242526

// Place your key bindings in this file to overwrite the defaults[    //ctrl+space被切換IME快速鍵佔用    {        "key": "ctrl+alt+space",        "command": "editor.action.triggerSuggest",        "when": "editorTextFocus"    },    // ctrl+d刪除一行    {        "key": "ctrl+d",        "command": "editor.action.deleteLines",        "when": "editorTextFocus"    },    {        "key": "ctrl+shift+k", //與刪除一行的快速鍵互換了：）        "command": "editor.action.addSelectionToNextFindMatch",        "when": "editorFocus"    },    //ctrl+shift+/多行注釋    {        "key":"ctrl+shift+/",        "command": "editor.action.blockComment",        "when": "editorTextFocus"    }]

自訂程式碼片段

然後輸入語言,例如我這裡輸入 typescript

由於每次輸入箭頭函數() => {}太煩了，我這裡加入一段加入一段

1234567

"arrow function": {"prefix": "func","body": ["(${e}) => {$1}"],"description": "arrow function"}

儲存後，下次輸入func的時候就會自動出來箭頭函數了

配置TypeScript環境

首先覆蓋預設ctrl + space快速鍵，因為這個快速鍵被IME切換佔用了
C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
加入

12345

// Place your key bindings in this file to overwrite the defaults[{ "key": "ctrl+alt+space",            "command": "editor.action.triggerSuggest",                                     "when": "editorTextFocus" }]

File - Open Folder 開啟項目的目錄 建立 tsconfig.json 輸入{} ,在大括弧中間 ctrl + alt + space （上邊的自訂鍵盤）

輸入

1234567

{    "compilerOptions": {        "target": "ES5",        "module": "amd",        "sourceMap": true    }}

可以建立.ts檔案了 配置TaskRunner Ctrl+Shift+P 輸入 Configure Task Runner Run Task Ctrl+Shift+B 安裝typings

Install typings to bring in the .d.ts files which power javascript intellisense.

npm install typings --global# Search for definitions.typings search tape# Find an available definition (by name).typings search --name react# Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`).typings install react --ambient --save

install will create a typings folder. VS Code will reference the .d.ts files for intellisense. 外掛程式

新版本支援外掛程式安裝了

外掛程式市場 https://marketplace.visualstudio.com/#VSCode 安裝外掛程式

F1 輸入 extensions

點擊第一個開始安裝或升級，或者也可以 Ctrl+P 輸入 ext install進入
點擊第二個會列出已經安裝的擴充，可以從中卸載

ext install 我在用的外掛程式(期待更新…) docthis 外掛程式可以自動添加JSDoc注釋。

ctrl + p 後 輸入ext install docthis 可直接安裝。

安裝後連續兩次 Ctrl+Alt+D 即可在游標處插入注釋。

詳細： https://marketplace.visualstudio.com/items?itemName=joelday.docthis vscode-todo 顯示todo列表

ctrl + p 後 輸入ext install vscode-todo 可直接安裝。

詳細: https://marketplace.visualstudio.com/items?itemName=MattiasPernhult.vscode-todo

參考： Learning Visual Studio Code Key Bindings for Visual Studio Code VS Code Tips and Tricks from: https://nshen.net/article/2015-11-20/vscode/