vscode: Visual Studio Code 經常使用快捷鍵

主命令框

F1 或 Ctrl+Shift+P: 打開命令面板。在打開的輸入框內，能夠輸入任何命令，例如：javascript

按一下 Backspace 會進入到 Ctrl+P 模式
在 Ctrl+P 下輸入 > 能夠進入 Ctrl+Shift+P 模式

在 Ctrl+P 窗口下還能夠:html

直接輸入文件名，跳轉到文件
? 列出當前可執行的動做
! 顯示 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：vue

// 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 相同的大小寫轉換快捷鍵，需安裝 TextTransform 插件
    {
        "key": "ctrl+k ctrl+u",
        "command": "uppercase",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+l",
        "command": "lowercase",
        "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
weex
Reactjs code snippets
React Native Tools
Npm Intellisense
Instant Markdown
Markdown Shortcuts
TextTransform

自定義設置參考

vscode 自定義配置參考：java

{
    "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"
    ]
}