VSCode之快捷鍵和經常使用插件

前言

介紹一下我在VSCode中經常使用的一些快捷方式：

• ctrl+上下箭頭 上下滾動頁面
• Ctrl+Shift+K 刪除某一行
• Alt+ ↑ / ↓ 移動某一行
• Shift+Alt + ↓ / ↑ 複製某一行
• ctrl + Enter 跳轉下一行開頭
• shift + ctrl + enter 跳轉上一行開頭
• Ctrl+Shift+ 跳轉到相應的匹配括號
• ctrl+shift+[ 摺疊
• html快速加註釋 ctrl+/
• 自動換行 Alt+z
• F8 移動到下一個錯誤的位置
• shift+F8 移動到上一個錯誤的位置
• F3 查找的快捷鍵或者 ctrl+F
• ctrl+D 跳轉選中各個相同的關鍵詞
• ctrl+alt +上下左右箭頭 翻轉屏幕
• ctrl + I 選中光標所在行
• 分屏快捷鍵 ctrl + |
• Alt+shift+F 自動格式化代碼
• 按住shift滾動滾輪可實現左右滾動
• ctrl+F2 更改因此匹配項
• 查找並更改全部的匹配項 先ctrl+F 然後 Alt+Enter 其實還有ctrl+H能夠直接實現查找並替換
• 上下移動某一行 Alt+上/下
• shift+上下箭頭可選中
• ctrl+i選中某一行
• 自動保存：File -> AutoSave ，或者 Ctrl+Shift+P，輸入 auto

上面這些是我本身我的經常使用的，下面將詳細的介紹VSCode的快捷鍵！

1、兩種重要使用

1.1 主命令框 Command Palette

最重要的功能就是 F1 或 Ctrl+Shift+P 打開的命令面板了，在這個命令框裏能夠執行VSCode的
任何一條命令，能夠查看每條命令對應的快捷鍵，甚至能夠關閉這個編輯器。

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

1.2 Ctrl+P模式

在Ctrl+P下輸入>又能夠回到主命令框 Ctrl+Shift+P模式。
在Ctrl+P窗口下還能夠：
  1) 直接輸入文件名，快速打開文件
  2) ? 列出當前可執行的動做
  3) ! 顯示Errors或Warnings，也能夠Ctrl+Shift+M
  4): 跳轉到行數，也能夠Ctrl+G直接進入
  5)@ 跳轉到symbol（搜索變量或者函數），也能夠Ctrl+Shift+O直接進入
  6)@:根據分類跳轉symbol，查找屬性或函數，也能夠Ctrl+Shift+O後輸入:進入
  7)# 根據名字查找symbol，也能夠Ctrl+T

2、經常使用快捷鍵

2.1 編輯器與窗口管理

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而後按 Left或 Right

2.2 代碼編輯

2.2.1 代碼調整

1. 代碼行縮進 Ctrl+[ 、 Ctrl+]
2. Ctrl+C 、 Ctrl+V 複製或剪切當前行/當前選中內容
3. 代碼格式化： Shift+Alt+F，或 Ctrl+Shift+P 後輸入 format code
4. 上下移動一行： Alt+Up 或 Alt+Down
5. 向上向下複製一行： Shift+Alt+Up 或 Shift+Alt+Down
6. 在當前行下邊插入一行 Ctrl+Enter
7. 在當前行上方插入一行 Ctrl+Shift+Enter

2.2.2 光標相關

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+Left 和 Shift+Alt+Right
12. 多行編輯(列編輯)：Alt+Shift+鼠標左鍵，Ctrl+Alt+Down/Up
13. 同時選中全部匹配： Ctrl+Shift+L
14. Ctrl+D 下一個匹配的也被選中 (在 sublime 中是刪除當前行，後面自定義快鍵鍵中，
    設置與 Ctrl+Shift+K 互換了)
15. 回退上一個光標操做： Ctrl+U

2.2.3 重構代碼

1. 找到全部的引用： Shift+F12
2. 同時修改本文件中全部匹配的： Ctrl+F12
3. 重命名：好比要修改一個方法名，能夠選中後按 F2，輸入新的名字，回車，會發現全部的文件都修改了
4. 跳轉到下一個 Error 或 Warning：當有多個錯誤時能夠按 F8 逐個跳轉
5. 查看 diff： 在 explorer 裏選擇文件右鍵 Set file to compare，而後須要對比的
   文件上右鍵選擇 Compare with file_name_you_chose

2.3 查找替換

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

2.4 顯示相關

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

3、修改默認快捷鍵

打開默認鍵盤快捷方式設置：
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"
    }
]

4、VSCode前端開發經常使用插件

1）View In Browser
預覽頁面（ctrl+F1）
2）vscode-icons
側欄的圖標，對於一個有視覺強迫症的人是必需要的
3）HTML Snippets
支持HTML5的標籤提示
4）HTML CSS support
css自動補齊
5）JS-CSS-HTML Formatter
格式化
6）jQuery Code Snippets
jquery 自動提示
7）Path Autocomplete
路徑自動補齊
8）Npm Intellisense
npm包代碼提示
9）ESLint
檢測JS必備
10）Debugger for Chrome
方便調試
11)Auto Rename Tag
自動同步修改標籤
12)Bootstrap 3 Snippets
bootstrap必備
13)Vue 2 Snippets
vue必備