VIM | 折叠、变量重名与格式化

892 阅读3分钟

日常开发过程中,往往离不开下面的3个功能:格式化、变量重名以及代码折叠,之前使用Vscode内置命令处理这块的内容,对应的快捷键如下:

  • 格式化:shift+alt+f
  • 折叠代码:ctrl+alt+[
  • 变量重名:f2

如果需要通过vim来触发这些Vscode的内置命令,也有比较简单的方式,下面就来介绍下吧!

折叠代码

首先是折叠代码,折叠代码在vim中本身就有比较成熟的方案,这里先看看主要对应的命令吧! 主要命令:

  • zoo代表open表示打开,打开折叠的代码
  • zO:把光标所在的可折叠区域及其内部可折叠的内容递归地展开起来
  • zcc代表close关闭,表示折叠代码,如果前面加数字,则把该区域外的对应层数都折叠起来
  • zC:把光标所在的可折叠区域及其内部可折叠的内容递归地折叠起来
  • za:类似切换开关的存在,展开或折叠当前可折叠区域,如果当前是折叠状态的就打开,如果当前是打开状态的就折叠代码
  • zf[motion]f代表fold折叠,后面可以跟上对应的motion或者文本对象,下面是一些使用案例
    • zfG:当前行折叠置文件结尾
    • zfa{/zfaB:折叠{}中间的内容

非必要(了解):

  • :[range]fo[ld]:命令版本的折叠,fold中的ld可以省略不写,range表示的是范围
    • 注意:Vscode的vim插件没有实现该功能,如果使用了方法会弹出错误提示

image.png

  • zM:关闭文件中的所有折叠
  • zR:打开文件中的所有折叠

折叠代码后的问题:

20240809\_092002.gif

如果你有使用过vim中的折叠代码,那么一定会遇到如果在折叠后的代码,如果此时将光标向下移动,折叠的代码就会自动展开,实际上vscode的vim插件有提供对应的解决方案,具体如下: image.pngsettings.json中添加配置:

{
	...
	"vim.foldfix"true
}

这样就不会出现折叠代码因为j/k上下移动导致自动展开的问题了。

20240809\_093146.gif

该配置选项的副作用,如果使用5j或者5k对光标进行垂直方向上的移动,移动的步骤越多出现的延时越长,具体可以参考官方的issue,所以要不要打开该配置项可以自行斟酌

33058116-078b951e-ce5c-11e7-9466-76c2c39cc398.gif

通过easymotion进行折叠

可以配置<Leader>+[进行代码的折叠,根据上文,此时如果没有开Foldfix,一旦我们把光标往下移动,折叠的代码就又被展开了,这样使用体验并不好,但是可以用一些技巧来改善部分场景下折叠后的使用体验,比如在js文件中可以利用$%组合的命令,将光标移动到行尾所在的括号,通过%移动到匹配的另一个括号上,这样就可以避免代码块直接展开了,对应配置如下:

...,
"vim.normalModeKeyBindingsNonRecursive": [
	...,
	{
		"before": ["<leader>", "["],
		"commands": [
			{
				"command": "editor.fold"
			},
			{
				"command": "vim.remap",
				"args": {
					"after": ["$", "%"]
				}
			}
		]
	},
]

格式化代码

通过easymotion调用vscode格式化的命令

首先查看格式化命令的命令id,打开按键设置,复制对应的id:

image.png

复制出来该命令的id为editor.action.formatDocument,现在到settings.json中进行配置,添加如下配置项目:

...,
"vim.normalModeKeyBindingsNonRecursive": [
	...,
	{
		"before": ["<leader>", "f", "d"],
		"commands": ["editor.action.formatDocument"] 
	}
],

现在使用<Leader>+f+d就可以进行代码格式化了

变量重名

通过easymotion触发vscode中重名的动作

和上面一样在“键盘快捷方式”中复制重名的命令id,配置到配置到settings.json中就可以了!

"vim.normalModeKeyBindingsNonRecursive": [
	// 变量重命名
	{
		"before": ["<leader>", "r", "n"],
		"commands": ["editor.action.rename"]
	},
],

参考资料