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 版本解决;
相关推荐
小磊哥er5 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子6 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆11 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山19 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45328 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^29 分钟前
条件渲染 v-show与v-if
前端
棉花糖超人37 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
小小小小宇8 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊8 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习9 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss