vscode + vim 全键盘配置(一)

作为一个 vim 多年用户,前后使用过 vim,neovim,lazyvim,spacevim 等多种编辑器,但是最终还是回归到 vscode。原因嘛,主要是不想折腾了,vim 可以高度自由的定制功能,但是需要花费大量的时间,也有较高的学习成本,而且一旦插件经常会有一些兼容性的问题,所以过一段时间可能就需要更新一次配置。

另外,新公司给配了 macbook m2 款,vscode 的性能也就不再是问题了,所以我现在 coding 是以 vscode 为主,neovim 为辅。

这篇文章大概介绍一下我的一些常用的 vscode + vim 配置及快捷键,如果对这方面的内容感兴趣的话,可以在评论区回复 1,我会考虑出一个专栏来写继续更新更详细的配置及操作

前置插件

  1. vim
  2. codeium
  3. github theme(非必需)

vim 入门教程

安装好 vim 后,在终端输入如下指令,进入官方教程,跟着步骤学完后,会让你对 vim 有一个基本的认识并且知道一些简单的移动、修改操作

bash 复制代码
vimtutor

vimrc 配置

在根目录下新建 .vscodevimrc 文件,

bash 复制代码
touch ~/.vscodevimrc

加入如下内容

bash 复制代码
" 相对行号
set rnu

" 跳转到行的开头
nnoremap H ^
" 跳转到行的结尾
nnoremap L $
" 跳转到匹配括号
nnoremap M %

" 窗口移动
map <C-j> <C-W>j
map <C-k> <C-W>k
map <C-h> <C-W>h
map <C-l> <C-W>l

" 编辑器内 Tab 切换
noremap <leader>1 1gt
noremap <leader>2 2gt
noremap <leader>3 3gt

光标移动

1. 行内移动

h 向左移动一个字符
l 向右移动一个字符
H 移动到行开头(依赖 vimrc 配置)
L 移动到行结尾(依赖 vimrc 配置)
% 跳转到匹配符号(依赖 vimrc 配置),如光标在{,按下后可以跳转到对应的}
w 移动到下个单词的开头
W 移动到下个单词的开头,忽略中间标点
b 移动到上个单词的开头
B 移动到上个单词的开头,忽略中间标点
e 移动到下个单词的末尾,如果当前光标在单词上,则移动到该单词的结尾
E 移动到下个单词的末尾,如果当前光标在单词上,则移动到该单词的结尾,忽略中间标点

Tips: w、b、e 操作前都可以加上 n,比如:3w,表示同时按下 3 次 w

2. 行内移动到指定字符

  1. f + 字符 表示移动到行内当前光标后面的第一个字符,F + 字符则为反向;
  2. t + 字符 表示移动到行内当前光标后面的第一个字符的前一个位置,T + 字符则为反向;

示例,如以下代码光标在行头,我想快速跳转到字符 1 的位置,则按下 f1 即可

javascript 复制代码
setCount(count + 1);

3. 以行为单位移动

k 移动到上一行
j 移动到下一行

4. 以屏幕为单位移动

zt 光标所在字符不动,将当前行移动到屏幕顶部
zz 光标所在字符不动,将当前行移到屏幕中间
zb 光标所在字符不动,将当前行移到屏幕底部
ctrl + f 向下翻页,移动一整个屏幕
ctrl + b 向上翻页,移动一整个屏幕

5. 使用 easymotion 插件跳转到任意位置

在 settings.json 中增加如下配置:

json 复制代码
"vim.leader": " ",
"vim.vimrc.enable": true,
"vim.easymotion": true,
"vim.normalModeKeyBindings": [
	{
		"before": ["leader", "j"],
		"after": ["leader", "leader", "w"]
	},
	{
		"before": ["leader", "k"],
		"after": ["leader", "leader", "b"]
	},    
]

如下操作

窗口操作

ctrl + l 移动到右侧的窗口
ctrl + h 移动到左侧的窗口
ctrl + 1 移动到当前编辑器组的第一个 tab
ctrl + 2 移动到当前编辑器组的第二个 tab
ctrl + ` 切换到终端

资源管理器

为了实现全键盘操作资源管理器,需要在 keybindings.json 中加入如下配置

json 复制代码
// 全局配置
{
	"key": "ctrl+e",
	"command": "workbench.view.explorer",
	"when": "viewContainer.workbench.view.explorer.enabled"
},
// --- 资源管理器中对文件或目录的操作
// 新建文件
{
	"key": "a",
	"command": "explorer.newFile",
	"when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus ",
	"args": {
		"isCaseSensitive": true
	}
},
// 新建目录
{
	"key": "f",
	"command": "explorer.newFolder",
	"when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
},
// 刷新资源管理器
{
	"key": "r",
	"command": "workbench.files.action.refreshFilesExplorer",
	"when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
},
// 重命名文件或目录
{
	"key": "r",
	"command": "renameFile",
	"when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
},
// 删除文件或目录
{
	"key": "d",
	"command": "deleteFile",
	"when": " explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus "
},
// 剪切文件或目录
{
	"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"
}

Tips: 按下 ctrl + e 可以从编辑区切换到资源管理器,再按一次可以回到上次编辑的位置

代码辅助

强烈推荐 codeium,免费且适用于多个不同的编辑器,官网:codeium.com/

vscode 恢复默认设置

  1. /Users/用户名/.vscode
  2. /Users/用户名/Library/Application Support/Code

问题

  1. 开启 vim 后 vscode 闪退,尝试回退 vscode 版本解决;
相关推荐
高山我梦口香糖15 分钟前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_7482352418 分钟前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240251 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar1 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人2 小时前
前端知识补充—CSS
前端·css
GISer_Jing2 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245522 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v2 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing2 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js