vim -- vscode

vim 是一個古老的”文字編輯器”，其特點就是只使用鍵盤就可以寫 code ，這種手不離鍵盤的開發方式可以大幅加快開發速度。

但直接使用 vim 開發會相當於放棄 vscode 的各種方便功能，因此本篇文章採用 vscodevim 這一 extension 讓 vscode 可以支援 vim 的各種指法，目標是在開發時盡可能不要用到滑鼠，以下是我的設定。

extension 安裝

本篇的主角
顯示以游標為中心的相對行數，方便使用 vim 指令

extension 設定

以下的設定都放置於 vscode 的 settings.json

vim easy motion mode

效果:
使用快捷鍵(下面會設定) 選擇想要的字母(此例選擇 e)，可以看到紅色的部分可以按下英文字母來快速跳轉位置。

設定:

1 2	// easymotion 插件 "vim.easymotion": true,

移動不會自動展開摺疊區域

預設使用 hjkl 來移動時，經過已摺疊的程式碼區域會自動展開，採用以下設定可避免此事。

設定:

1 2	// 使用 hjkl 移動到縮排區域不會自動展開 "vim.foldfix": true,

讓 vscode 掌握需要的快捷鍵

目前的規劃是讓 vscodevim 操作編輯區塊，但仍然保留大部分 vscode 的操作習冠，使用下面的設定可以讓 vscodevim 忽略這些快捷鍵。

設定:

// 不想讓 vscodevim 攔截的快捷鍵
// C 是 ctrl
"vim.handleKeys": {
"<C-f>": false, // vsocde 搜索
"<C-b>": false, // primary sideBar
"<C-g>": false, // 底下設定需要使用，g 是 goto 的意思，原先 ctrl+g 的功能由 vscodevim 的 ':' 取代
"<C-n>": false, // 新建檔案
"<C-k>": false, // 保留 vscode ctrl+k + xxx 的功能
"<C-w>": false, // vscode 關閉檔案
"<C-h>": false, // vscode 取代
"<C-j>": false, // vscode toggle bottom panel
},

vim + 剪貼簿

讓 vscodevim 可用 y & p，複製到剪貼簿 & 貼上剪貼簿的內容

設定:
1
"vim.useSystemClipboard": true,

vscodevim normalMode 快捷鍵設定

由於大部分的快捷鍵組合都被 vim 給用完了，為了避免快捷鍵打架，因此 vim 有設定 leader 的功能，先按下 leader 再加上組合鍵從而避免掉大部分的衝突。

設定:

// 特殊組合鍵的開頭
"vim.leader": ",",
"vim.normalModeKeyBindingsNonRecursive": [
    // 使用 vim 內建搜索之後是否 高亮選取
    {
        "before": [
        "<leader>",
        "<space>"
        ],
        "commands": [
        ":set hlsearch!"
        ]
    },

    // vim 組合鍵 綁定 vscode 的 code format
    {
        "before": [
        "<leader>",
        "f"
        ],
        "commands": [
        "editor.action.formatDocument"
        ]
    },

    // vim 組合鍵 綁定 vscode 的 alt+ctrl+leftarrow 功能
    {
        "before": [
        "<leader>",
        "h"
        ],
        "commands": [
        "workbench.action.moveEditorToPreviousGroup"
        ]
    },

    // vim 組合鍵 綁定 vscode 的 alt+ctrl+rightarrow 功能
    {
        "before": [
        "<leader>",
        "l"
        ],
        "commands": [
        "workbench.action.moveEditorToNextGroup"
        ]
    },

    // vim 組合鍵 easymotion 
    {
        "after": [
        "leader",
        "leader",
        "s"
        ],
        "before": [
        " ",
        ]
    },

    // vim 組合鍵 綁定 vscode 的 peek definition
    {
        "before": [
        "leader",
        "g",
        "h"
        ],
        "commands": [
        "editor.action.peekDefinition"
        ]
    },

    // vim 組合鍵 綁定 vscode 的 peek reference
    {
        "before": [
        "leader",
        "g",
        "r"
        ],
        "commands": [
        "editor.action.goToReferences"
        ]
    },
],

vscode 快捷鍵設定

以下設定都放置於 vscode 的 keybindings.json
更改 or 新增 vscode 快捷鍵，用以配合 vim 的指法。

{
    "key": "alt+j",
    "command": "selectNextSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
{
    "key": "alt+k",
    "command": "selectPrevSuggestion",
    "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
},
{
    "key": "alt+j",
    "command": "workbench.action.quickOpenSelectNext"
},
{
    "key": "alt+k",
    "command": "workbench.action.quickOpenSelectPrevious"
},

file explorer 檔案操作

// 刪除文件 or 檔案
{
    "key": "d",
    "command": "deleteFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
},
// 新建文件
{
    "key": "i",
    "command": "explorer.newFile",
    "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
},
// 新建目录
{
    "key": "o",
    "command": "explorer.newFolder",
    "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
},
// 刷新 file explorer
{
    "key": "r",
    "command": "workbench.files.action.refreshFilesExplorer",
    "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
},
// 重命名文件 or 檔案
{
    "key": "a",
    "command": "renameFile",
    "when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
},
// 剪下文件 or 檔案
{
    "key": "x",
    "command": "filesExplorer.cut",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
},
// 复制文件或檔案
{
    "key": "y",
    "command": "filesExplorer.copy",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
},
// 貼上文件或檔案
{
    "key": "p",
    "command": "filesExplorer.paste",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
},
// 摺疊全部的資料夾，方便使用 hjkl 瀏覽
{
    "key": "z shift+m",
    "command": "workbench.files.action.collapseExplorerFolders",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
},

peek windows focus 左右切換

效果
- peek definitions (alt + F12)
  
  peek definitions 彈出視窗的focus 預設在右半邊
  
  按下組合鍵可以切換左/右的focus
- peek references (shift + F12) 也適用於該組合鍵
  
  如果 focus 在右半邊可使用 hjkl 來移動

設定

{
    "key": "alt+g", 
    "command": "togglePeekWidgetFocus",
    "when": "inReferenceSearchEditor || referenceSearchVisible"
},

// secondary sidebar toggle
{
    "key": "ctrl+alt+b",
    "command": "workbench.action.toggleAuxiliaryBar"
},
// 显示文件资源管理器
{
    "key": "ctrl+g e",
    "command": "workbench.files.action.focusFilesExplorer"
},
// 显示TODO Tree
{
    "key": "ctrl+g o",
    "command": "todo-tree-view.focus"
},
//global search
{
    "key": "ctrl+g f",
    "command": "workbench.action.findInFiles"
},
// 显示debug
{
    "key": "ctrl+g d",
    "command": "workbench.view.debug",
    "when": "viewContainer.workbench.view.debug.enabled"
},   
// 显示版本控制
{
    "key": "ctrl+g g",
    "command": "workbench.view.scm",
    "when": "workbench.scm.active"
},
// 打开最近记录
{
    "key": "ctrl+g h",
    "command": "workbench.action.openRecent"
},

常用快捷

以下紀錄使用 vscodevim 套件之後的快捷鍵，我的設定檔在上面。

在安裝 vscodevim 之後編輯區會出現三種模式: normal, visual,insert。
- 沒特別提到的都是在 normal 模式
- 使用 esc or ctrl + [ 退回 normal

編輯區域

左右編輯區切換: ctrl + number(1 or 2)
編輯區 tab 切換: ctrl + tab or ctrl + shift + tab
關閉 tab : ctrl + w or ctrl + k w 關閉所有的 tab

編輯區域快速定位

區塊跳轉:
- 跳轉funciotn / 跳轉class / md檔標題: ctrl + p 輸入 @ (alt + j or k 上下選擇)
上下滾動:
- 上下一行: j or k
- 上下半頁: ctrl + u or d(有些 vim 的翻頁因為上面的設定無法使用，可以依情況重設上面的設定)
- 上下 n 行: 數字 + j or 數字 + k
跳到特定行:
- : + 行號 or 行號 + gg or 行號 + G (取代 vscode 預設的 ctrl + g)
設定游標所在行的相對位置:
- 置中: zz
- 置頂 or 置底: zt or zb
程式碼摺疊
- ctrl k + ctrl number 選擇想要折疊的深度。
- ctrl k + ctrk j or z + shift m 全部展開。
- z + o 只展開游標所在區域(一層)。

Frank's Doc