https://www.nshen.net/article/2015-11-20/vscode/
學會用好 Visual Studio Code
發(fā)表于 2015年11月21日
Visual Studio Code是個牛逼的編輯器野芒，啟動非臣势穑快，完全可以用來代替其他文本文件編輯工具。又可以用來做開發(fā)，支持各種語言，相比其他IDE，輕量級完全可配置還集成Git感覺非常的適合前端開發(fā)踪央，是微軟親生的想必TypeScript會支持的非常好。 所以我仔細研究了一下文檔未來可能會作為主力工具使用瓢阴。
主命令框 Command Palette
最重要的功能就是?F1?或?Ctrl+Shift+P?打開的命令面板了畅蹂，在這個命令框里可以執(zhí)行VSCode的任何一條命令，可以查看每條命令對應的快捷鍵荣恐，甚至可以關閉這個編輯器液斜。
按一下Backspace會進入到Ctrl+P模式里
Ctrl+P 模式
在Ctrl+P下輸入>又可以回到主命令框?Ctrl+Shift+P模式累贤。
在Ctrl+P窗口下還可以
直接輸入文件名，快速打開文件
??列出當前可執(zhí)行的動作
!?顯示Errors或Warnings少漆，也可以Ctrl+Shift+M
:?跳轉(zhuǎn)到行數(shù)臼膏，也可以Ctrl+G直接進入
@?跳轉(zhuǎn)到symbol（搜索變量或者函數(shù)），也可以Ctrl+Shift+O直接進入
@:根據(jù)分類跳轉(zhuǎn)symbol检疫，查找屬性或函數(shù)讶请，也可以Ctrl+Shift+O后輸入:進入
#?根據(jù)名字查找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個編輯器之間循環(huán)切換 Ctrl+`
編輯器換位置烛谊，Ctrl+k然后按Left或Right
代碼編輯
格式調(diào)整
代碼行縮進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：可以連續(xù)選擇多處鞋怀，然后一起修改双泪，Alt+Click添加cursor或者Ctrl+Alt+Down?或?Ctrl+Alt+Up
同時選中所有匹配的Ctrl+Shift+L
Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了，見下邊Ctrl+Shift+K)
回退上一個光標操作Ctrl+U
重構代碼
跳轉(zhuǎn)到定義處：F12
定義處縮略圖：只看一眼而不跳轉(zhuǎn)過去Alt+F12
列出所有的引用：Shift+F12
同時修改本文件中所有匹配的：Ctrl+F12
重命名：比如要修改一個方法名密似，可以選中后按F2焙矛，輸入新的名字，回車残腌，會發(fā)現(xiàn)所有的文件都修改過了村斟。
跳轉(zhuǎn)到下一個Error或Warning：當有多個錯誤時可以按F8逐個跳轉(zhuǎn)
查看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?是本工作區(qū)的設置，會覆蓋上邊的配置
存儲在工作區(qū)的.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
// Place your key bindings in this file to overwrite the defaults
[
? ? //ctrl+space被切換輸入法快捷鍵占用
? ? {
? ? ? ? "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
由于每次輸入箭頭函數(shù)() => {}太煩了哎壳，我這里加入一段加入一段
"arrow function": {
? ? ? ? "prefix": "func",
? ? ? ? "body": [
? ? ? ? ? ? "(${e}) => {$1}"
? ? ? ? ],
? ? ? ? "description": "arrow function"
? ? }
保存后毅待，下次輸入func的時候就會自動出來箭頭函數(shù)了
配置TypeScript環(huán)境
首先覆蓋默認ctrl + space快捷鍵，因為這個快捷鍵被輸入法切換占用了
C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
加入
// Place your key bindings in this file to overwrite the defaults
[
{ "key": "ctrl+alt+space",? ? ? ? ? ? "command": "editor.action.triggerSuggest",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "when": "editorTextFocus" }
]
File - Open Folder 打開項目的目錄
創(chuàng)建?tsconfig.json
輸入{}?,在大括號中間?ctrl + alt + space?（上邊的自定義鍵盤）
輸入
{
"compilerOptions": {
? ? "target": "ES5",
? ? "module": "amd",
? ? "sourceMap": true
}
}
可以創(chuàng)建.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進入
點擊第二個會列出已經(jīng)安裝的擴展尸红，可以從中卸載
ext install
我在用的插件(期待更新...)
docthis 插件可以自動添加JSDoc注釋。
ctrl + p?后 輸入ext install docthis?可直接安裝。
安裝后連續(xù)兩次?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
參考：
Key Bindings for Visual Studio Code
本文采用?署名-禁止演繹 4.0 國際許可協(xié)議 (CC BY-ND 4.0)?進行許可（保留鏈接可任意轉(zhuǎn)載，禁止修改）盅蝗。
