Vim 在 VSCode 中的实践

472 阅读3分钟

本篇文章适用于之前用过 neovim 等工具,对 vim 有一定的了解,熟悉 vim 的基础操作的同学。

为什么选择 VSCode 而非 Neovim 之流

我之前用过 neovim 以及一些其他各种各样的开箱即用的 Vim 编辑器,花了不少时间,最后被它各种复杂的配置消磨了耐性,最终回归 VSCode,就是图一个简单。

下面这几个地方花了我不少时间

  • 炫酷的样式
  • 新语言的 lsp 配置
  • 各种插件的配置 —— 太多了
  • debug —— 体验很差
  • 多端同步编程环境

而我几乎没有用过像是自定义脚本函数作为辅助这等高端操作,VSCode 的 vim 插件已经能够满足我关于 vim 的需求了。

后面会列出我这类 vim 玩家常用的vim 操作与 key map。

准备

插件安装:

  • vim
  • Vim Theme

image.png

image.png

注意

  • Mac 平台的 vim 插件有一些代码需要执行

image.png

  • windows 平台需要在一会的配置中调整一些 handleKeys 选项

image.png

  • VSCode 本身的快捷键可能与将要设置的快捷键冲突,需要注意检查。
  • 建议将配置保存在用户配置中,这样会方便多端同步配置。

基础配置

vim 插件中实际上已经给出了一个实例,复制到 setting.json 中即可,下面是除了键盘映射之外的基础配置,我针对 Mac 环境做了一些调整。

{  
    "editor.renderWhitespace": "boundary", // 显示空白字符(空格和制表符
    "vim.hlsearch": true, // 搜到的结果一直高亮显示
    "vim.easymotion": true, // 文件内快速跳转插件 (jump everywhere)
    "vim.sneak": true, // s<char><char> 跳转到下面第一次出现指定两个字符的地方
    "vim.useSystemClipboard": true, // 使用系统剪贴板
    "vim.leader": ";", // leader键
    "editor.lineNumbers": "relative", // 采用相对行号
    
    "vim.incsearch": true,  
    "vim.useCtrlKeys": true,  

  
    "// To improve performance",  
    "extensions.experimental.affinity": {  
        "vscodevim.vim": 1  
    }  
}

  • 注意leader键的设置

键盘映射

  • 需要在对应的模式下设置键盘映射,同样功能的键盘映射可能需要在多种模式下进行设置
  • 注意设置映射的时候,快捷键是同时按下,还是一个一个按下
    • 同时按下比如 <C-j> 就是同时按下 ctrl + j
    • 一个一个按下 [":", "v", "s", "<Enter>"],不能写成 [":vs"]
  • 除了将一些键位映射到 vim,还可以映射到 VSCode 的一些操作
    • 比如 editor.fold 这是 VSCode 自带的折叠代码块功能。
    • 比如 "workbench.action.files.save" 保存文件
   "vim.insertModeKeyBindings": [
        // 取代 esc 键
        {
            "before": ["j", "j"],
            "after": ["<Esc>"]
        }
    ],
    "vim.normalModeKeyBindings": [],
    "vim.normalModeKeyBindingsNonRecursive": [
        // 跳转到对应的代码块闭合符号: [ ]  { }
        // b —— block 表示代码块
        {
            "before": ["<leader>", "b"],
            "after": ["%"]
        },
        // 右侧分屏 sv _ split vertical 纵向分屏
        {
            "before": ["<leader>", "s", "v"],
            "after": [":", "v", "s", "<Enter>"]
        },
        // 下侧分屏 sp _ split 切分
        {
            "before": ["<leader>", "s", "p"],
            "after": [":", "s", "p", "<Enter>"]
        },
        // 在分屏之间跳转
        // 跳转到上面的分屏
        {
            "before": ["<leader>", "k"],
            "after": ["<C-w>", "k"]
        },
        // 跳转到下面的分屏, 也可跳转到终端
        {
            "before": ["<leader>", "j"],
            "after": ["<C-w>", "j"]
        },
        // 跳转到左面的分屏,也可跳转到文件目录
        {
            "before": ["<leader>", "h"],
            "after": ["<C-w>", "h"]
        },
        // 跳转到右面的分屏
        {
            "before": ["<leader>", "l"],
            "after": ["<C-w>", "l"]
        },
        // 快速跳转多行
        {
            "before": ["<C-j>"],
            "after": ["1", "0", "j"]
        },
        {
            "before": ["<C-k>"],
            "after": ["1", "0", "k"]
        },
        // 折叠当前代码块,折叠之后,光标移动会让代码块展开
        {
            "before": ["<leader>", "z"],
            "commands": [
                {
                    "command": "editor.fold",
                    "args": []
                }
            ]
        },
        // 保存当前文件
        {
            "before": ["leader", "w"],
            "commands": ["workbench.action.files.save"]
        },
        // 移到行首H, 移到行尾L
        {
            "before": ["H"],
            "after": ["^"]
        },
        {
            "before": ["L"],
            "after": ["$"]
        }
    ],
    // 选择模式下
    "vim.visualModeKeyBindingsNonRecursive": [
        // 跳转到对应的代码块闭合符号: [ ]  { }
        // b —— block 表示代码块
        {
            "before": ["<leader>", "b"],
            "after": ["%"]
        },
        // 上移;下移;方便快速选中多行
        {
            "before": ["<C-j>"],
            "after": ["1", "0", "j"]
        },
        {
            "before": ["<C-k>"],
            "after": ["1", "0", "k"]
        },
        // 光标左移、右移到尽头
        {
            "before": ["H"],
            "after": ["^"]
        },
        {
            "before": ["L"],
            "after": ["$"]
        }

    ]

实际上没多少个键位,但是已经基本囊括了我的工作中的绝大部分情况。剩下的就是使用 VSCode 自身的快捷键以及 vim 本身的功能来进行了,我觉得那些键位还算简单,不用再进行调整了。有的使用频率相当低的操作就直接使用鼠标了。

End!

上面就是简单的 vim 配置过程了。不过仅仅是上面的内容还远远不够组成一套工作流。不过工作流这种东西比较私人,在评论区里面交流吧,键盘敲累了。