Maoyl's blog Maoyl's blog
首页
  • 前端基础

    • HTML
    • CSS
    • CSS动画
    • JavaScript文章
    • stylus
  • 性能优化

    • 《性能优化》笔记
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《JavaScript设计模式》笔记
    • 《TypeScript 从零实现 axios》
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架

    • Vue相关
    • React相关
  • 前端监控

    • 前端监控简介
  • 学习笔记

    • 《Vue》笔记
    • 《React》笔记
    • 小程序学习笔记
  • 后端基础

    • Nodejs
  • 学习笔记

    • 数据结构
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网页性能
  • 学习笔记

    • 《Git》学习笔记
    • 《Vim》学习笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

maoyln

日日行,不怕千万里
首页
  • 前端基础

    • HTML
    • CSS
    • CSS动画
    • JavaScript文章
    • stylus
  • 性能优化

    • 《性能优化》笔记
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《JavaScript设计模式》笔记
    • 《TypeScript 从零实现 axios》
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架

    • Vue相关
    • React相关
  • 前端监控

    • 前端监控简介
  • 学习笔记

    • 《Vue》笔记
    • 《React》笔记
    • 小程序学习笔记
  • 后端基础

    • Nodejs
  • 学习笔记

    • 数据结构
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网页性能
  • 学习笔记

    • 《Git》学习笔记
    • 《Vim》学习笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 简介

  • vim

  • vscode

    • 文本与窗口的基本操作
    • vscode多窗口操作
    • 全局搜索命令
    • 开发常用小技巧
    • vscode挖掘快捷键场景
    • vscode git 操作
    • snippet 代码片段
    • 代码重构工具
    • VSpaceCode 插件
      • 安装及初始配置
      • 修改原有配置
      • 自定义
  • 《Vim》学习笔记
  • vscode
maoyln
2022-07-05
目录

VSpaceCode 插件

# 包罗万键:VSpaceCode 插件

训练进行到这里,大部分日常的使用场景和功能我们基本都配置了对应的一些快捷键,或者知道如何不通过鼠标去达到目的;而今天我们来了解学习 VSpaceCode 插件,通过它,可以让我们的组合键覆盖得更广阔全面。至于怎么个覆盖,装完插件再慢慢道来。

VSpaceCode 与 Whichkey

二者是同一家出品,而且功能上基本一致;VSpaceCode 插件主要面向 Vim 使用者;而 Whichkey 更适用于普通用户; 而且他们的文档 (opens new window)也已经合并在一起。

# 安装及初始配置

点击直达下载 (opens new window)或在 vscode 的拓展中搜索 VSpaceCode 安装;

安装完后,查看文档 (opens new window),可以发现文档中提到了两个配置文件 setting.jsonc (opens new window) 与 keybindings.jsonc (opens new window);分别对应了 vim 中绑定 VSpaceCode 的激活命令以及在 vscode 中编辑窗之外的其他窗口 VSpaceCode 的激活命令;当然除了激活命令之外,我们还可以看到文档的这两个文件里面都配置了很多命令,其实都是一些扩展了其他功能的命令,我们暂时不需要,所以可以先不配置;而可以看到,两个文件中默认的激活命令是:

// keybinds.jsonc
{
  "key": "space",
  "command": "vspacecode.space",
  "when": "activeEditorGroupEmpty && focusedView == '' && !whichkeyActive && !inputFocus"
},
1
2
3
4
5
6
// setting.jsonc
"vim.normalModeKeyBindingsNonRecursive": [
  {
    "before": ["<space>"],
    "commands": ["vspacecode.space"]
  },
],
"vim.visualModeKeyBindingsNonRecursive": [
  {
    "before": ["<space>"],
    "commands": ["vspacecode.space"]
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13

可以看到,默认的配置是使用空格激活;但是我们配置的 vim 的 <Leader> 也是 space 键(如果你和我一样的配置,如果不是则无需接下来的改键),这时候我们就要重新配置激活按键,而我改成了 space + ;,这样的按起来也比较顺手。如下:

// keybinds.jsonc
{
  "key": "space+;",
  "command": "vspacecode.space",
  "when": "activeEditorGroupEmpty && focusedView == '' && !whichkeyActive && !inputFocus"
},
// Trigger vspacecode when sidebar is in focus
{
  "key": "space+;",
  "command": "vspacecode.space",
  "when": "sideBarFocus && !inputFocus && !whichkeyActive"
},
1
2
3
4
5
6
7
8
9
10
11
12
// setting.jsonc
"vim.normalModeKeyBindingsNonRecursive": [
  {
    "before": ["<space>", ";"],
    "commands": ["vspacecode.space"]
  },
],
"vim.visualModeKeyBindingsNonRecursive": [
  {
    "before": ["<space>", ";"],
    "commands": ["vspacecode.space"]
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13

这样我们就可以愉快地使用 VSpaceCode 了。

现在我们激活它,会在 vscode 上面弹出输入框,并且在待选列表中有很多功能,每条记录都有一个符号前缀,在键盘上输入该前缀,就可进入该功能;比如激活插件后我们输入 g,则进入了 git 的功能模块中,则会列出可执行的操作,继续点击对应操作的前缀,则可以执行该操作;这就是 VSpaceCode 的使用逻辑。简单来说就是我们可以通过所见即所点的模式进行纯键盘的操作(和 chrome 的 vim 插件 vimium-c 一样的思想)。

# 修改原有配置

# 自定义

拓展

编辑 (opens new window)
#Vim
上次更新: 2025/04/18, 01:42:12
代码重构工具

← 代码重构工具

最近更新
01
GSAP动画库——如何高效写动画
04-17
02
自适应方案PxToRem
09-10
03
性能优化-requestAnimationFrame
08-10
更多文章>
Theme by Vdoing | Copyright © 2019-2025 备案号:京ICP备19058102号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式