1. 程式人生 > >vscode: Visual Studio Code 常用快捷鍵

vscode: Visual Studio Code 常用快捷鍵

when com symbol http 前端開發 bind 開發 hit 全屏

vscode: Visual Studio Code 常用快捷鍵

主命令框

F1Ctrl+Shift+P: 打開命令面板。在打開的輸入框內,可以輸入任何命令,例如:

  • 按一下 Backspace 會進入到 Ctrl+P 模式
  • Ctrl+P 下輸入 > 可以進入 Ctrl+Shift+P 模式

Ctrl+P 窗口下還可以:

  • 直接輸入文件名,跳轉到文件
  • ? 列出當前可執行的動作
  • ! 顯示 ErrorsWarnings,也可以 Ctrl+Shift+M
  • : 跳轉到行數,也可以 Ctrl+G 直接進入
  • @ 跳轉到 symbol(搜索變量或者函數),也可以 Ctrl+Shift+O
    直接進入
  • @ 根據分類跳轉 symbol,查找屬性或函數,也可以 Ctrl+Shift+O 後輸入:進入
  • # 根據名字查找 symbol,也可以 Ctrl+T

常用快捷鍵

編輯器與窗口管理

  1. 打開一個新窗口: Ctrl+Shift+N
  2. 關閉窗口: Ctrl+Shift+W
  3. 同時打開多個編輯器(查看多個文件)
  4. 新建文件 Ctrl+N
  5. 文件之間切換 Ctrl+Tab
  6. 切出一個新的編輯器(最多 3 個) Ctrl+\,也可以按住 Ctrl 鼠標點擊 Explorer 裏的文件名
  7. 左中右 3 個編輯器的快捷鍵 Ctrl+1 Ctrl+2 Ctrl+3
  8. 3 個編輯器之間循環切換 Ctrl+
  9. 編輯器換位置, Ctrl+k
    然後按 LeftRight

代碼編輯

格式調整

  1. 代碼行縮進 Ctrl+[Ctrl+]
  2. Ctrl+CCtrl+V 復制或剪切當前行/當前選中內容
  3. 代碼格式化: Shift+Alt+F,或 Ctrl+Shift+P 後輸入 format code
  4. 上下移動一行: Alt+UpAlt+Down
  5. 向上向下復制一行: Shift+Alt+UpShift+Alt+Down
  6. 在當前行下邊插入一行 Ctrl+Enter
  7. 在當前行上方插入一行 Ctrl+Shift+Enter

光標相關

  1. 移動到行首: Home
  2. 移動到行尾: End
  3. 移動到文件結尾: Ctrl+End
  4. 移動到文件開頭: Ctrl+Home
  5. 移動到定義處: F12
  6. 定義處縮略圖:只看一眼而不跳轉過去 Alt+F12
  7. 移動到後半個括號: Ctrl+Shift+]
  8. 選擇從光標到行尾: Shift+End
  9. 選擇從行首到光標處: Shift+Home
  10. 刪除光標右側的所有字: Ctrl+Delete
  11. 擴展/縮小選取範圍: Shift+Alt+LeftShift+Alt+Right
  12. 多行編輯(列編輯):Alt+Shift+鼠標左鍵Ctrl+Alt+Down/Up
  13. 同時選中所有匹配: Ctrl+Shift+L
  14. Ctrl+D 下一個匹配的也被選中 (在 sublime 中是刪除當前行,後面自定義快鍵鍵中,設置與 Ctrl+Shift+K 互換了)
  15. 回退上一個光標操作: Ctrl+U

重構代碼

  1. 找到所有的引用: Shift+F12
  2. 同時修改本文件中所有匹配的: Ctrl+F12
  3. 重命名:比如要修改一個方法名,可以選中後按 F2,輸入新的名字,回車,會發現所有的文件都修改了
  4. 跳轉到下一個 ErrorWarning:當有多個錯誤時可以按 F8 逐個跳轉
  5. 查看 diff: 在 explorer 裏選擇文件右鍵 Set file to compare,然後需要對比的文件上右鍵選擇 Compare with file_name_you_chose

查找替換

  1. 查找 Ctrl+F
  2. 查找替換 Ctrl+H
  3. 整個文件夾中查找 Ctrl+Shift+F

顯示相關

  1. 全屏:F11
  2. zoomIn/zoomOut:Ctrl +/-
  3. 側邊欄顯/隱:Ctrl+B
  4. 顯示資源管理器 Ctrl+Shift+E
  5. 顯示搜索 Ctrl+Shift+F
  6. 顯示 Git Ctrl+Shift+G
  7. 顯示 Debug Ctrl+Shift+D
  8. 顯示 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 相同的大小寫轉換快捷鍵,需安裝 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 自定義配置參考:

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

vscode: Visual Studio Code 常用快捷鍵