主命令框
F1 或 Ctrl+Shift+P: 打開命令面板。在打開的輸入框內,可以輸入任何命令,例如:
- 按一下 Backspace 會進入到 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
- 切出一個新的編輯器(最多 3 個) Ctrl+\,也可以按住 Ctrl 鼠標點擊 Explorer 里的文件名
- 左中右 3 個編輯器的快捷鍵 Ctrl+1 Ctrl+2 Ctrl+3
- 3 個編輯器之間循環切換 Ctrl+
- 編輯器換位置, Ctrl+k然后按 Left或 Right
代碼編輯
格式調整
- 代碼行縮進 Ctrl+[ 、 Ctrl+]
- Ctrl+C 、 Ctrl+V 復制或剪切當前行/當前選中內容
- 代碼格式化: Shift+Alt+F,或 Ctrl+Shift+P 后輸入 format code
- 上下移動一行: Alt+Up 或 Alt+Down
- 向上向下復制一行: Shift+Alt+Up 或 Shift+Alt+Down
- 在當前行下邊插入一行 Ctrl+Enter
- 在當前行上方插入一行 Ctrl+Shift+Enter
光標相關
- 移動到行首: Home
- 移動到行尾: End
- 移動到文件結尾: Ctrl+End
- 移動到文件開頭: Ctrl+Home
- 移動到定義處: F12
- 定義處縮略圖:只看一眼而不跳轉過去 Alt+F12
- 移動到后半個括號: Ctrl+Shift+]
- 選擇從光標到行尾: Shift+End
- 選擇從行首到光標處: Shift+Home
- 刪除光標右側的所有字: Ctrl+Delete
- 擴展/縮小選取范圍: Shift+Alt+Left 和 Shift+Alt+Right
- 多行編輯(列編輯):Alt+Shift+鼠標左鍵,Ctrl+Alt+Down/Up
- 同時選中所有匹配: Ctrl+Shift+L
- Ctrl+D 下一個匹配的也被選中 (在 sublime 中是刪除當前行,后面自定義快鍵鍵中,設置與 Ctrl+Shift+K 互換了)
- 回退上一個光標操作: Ctrl+U
重構代碼
- 找到所有的引用: 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
顯示相關
- 全屏:F11
- zoomIn/zoomOut:Ctrl +/-
- 側邊欄顯/隱:Ctrl+B
- 顯示資源管理器 Ctrl+Shift+E
- 顯示搜索 Ctrl+Shift+F
- 顯示 Git Ctrl+Shift+G
- 顯示 Debug Ctrl+Shift+D
- 顯示 Output Ctrl+Shift+U
其他
- 自動保存:File -> AutoSave ,或者 Ctrl+Shift+P,輸入 auto
修改默認快捷鍵
打開默認鍵盤快捷方式設置:
File -> Preferences -> Keyboard Shortcuts,或者:Alt+F -> p -> k
修改 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"
},
// 定制與 sublime 相同的大小寫轉換快捷鍵
{
"key": "ctrl+k ctrl+u",
"command": "editor.action.transformToUppercase",
"when": "editorTextFocus"
},
{
"key": "ctrl+k ctrl+l",
"command": "editor.action.transformToLowercase",
"when": "editorTextFocus"
}
]
前端開發必備插件
- PostCSS Sorting
- stylelint
- stylefmt
- ESLint
- javascript standard format
- beautify
- Babel ES6/ES7
- Debugger for Chrome
- Add jsdoc comments
- javascript(ES6) code snippets
- vue
- Npm Intellisense
- Instant Markdown
- Markdown Shortcuts
自定義設置參考
vscode 自定義配置參考:
{
"editor.fontSize": 18,
"files.associations": {
"*.es": "javascript",
"*.es6": "javascript"
},
// 控制編輯器是否應呈現空白字符
"editor.renderWhitespace": true,
// 啟用后,將在保存文件時剪裁尾隨空格。
"files.trimTrailingWhitespace": true,
// File extensions that can be beautified as javascript or JSON.
"beautify.JSfiles": [
"",
"es",
"es6",
"js",
"json",
"jsbeautifyrc",
"jshintrc"
]
}