vscode + vim 全键盘操作(三)

大家好啊,我是枫哥。今天继续来给大家分享 vscode + vim 全键盘专栏的第三篇文章,主要来说明一下我日常在使用 vscode 编码时,是如何快速切换不同面板的。看完这篇文章,你将学习到以下内容。

  1. 如何快速打开当前组件下的样式文件;
  2. 光标如何在两个编辑器组中切换;
  3. 如何在终端和编辑器中切换;
  4. 如何快速在水平、垂直窗口分割当前文件;

1. 如何快速打开当前组件下的样式文件

在日常开发前端工作时,如果采用的是组件和样式分离的模式。那么通常一个组件会包含两个文件,index.tsxindex.less,当然也可能是 jsx或者 css

当我们在编写组件时,往往需要同时写 dom元素部分,然后再写 css部分。

我的做法是将 tsx文件放在左边,less文件放在右边,两边对照着来写。

当你通过command + p搜索打开一个新的组件后,如果你想在水平窗口打开这个组件对应的样式文件,该怎么做呢?

你可以继续使用 command + p输入关键字搜索,但是这样比较低效。

我是这样来操作的,当前光标是在组件的 tsx文件上的,按下 ctrl + e切换到资源管理器,然后按 k选中上一个文件,也就是 css文件,接着按下 ctrl + enter,操作完成后就能在水平窗口打开样式文件了,演示如下

可以看到操作还是非常丝滑的~

2. 光标如何在两个编辑器组中切换

拿上面的示例来说,我们如何在 tsxcss文件中切换光标呢?我想大多数人可能是用鼠标切换文件的吧。

因为我们安装了 vim插件,所以我们可以直接利用 vim的切换窗口快捷键来实现

<ctrl+w> h 切换到左侧的窗口
<ctrl+w> l 切换到右侧的窗口
<ctrl+w> j 切换到下方的窗口
<ctrl+w> k 切换到上方的窗口

不过我觉得还是太慢,按键太多了,所以我在 vimrc中配置了一下映射

arduino 复制代码
map <C-j> <C-W>j
map <C-k> <C-W>k
map <C-h> <C-W>h
map <C-l> <C-W>l

解释一下,比如第一行就是把 j 操作映射给 ,这样只要按下 ctrl + j 光标就能切换到下方的窗口给了,演示如下(为了演示,我分割了四个编辑器组)

3. 如何在终端和编辑器中切换

vscode虽然有自带的切换到终端的快捷键,但是切换过去后,就没法回到代码里了。所以我新增了一个快捷键 ctrl + t可以用于在终端和代码区域内来回切换,方便我们在写代码的时候去执行命令。

只需要在 keybindings.json中增加如下配置

json 复制代码
  // 实现在终端和编辑器中切换
  {
    "key": "ctrl+t",
    "command": "workbench.action.terminal.focus",
    "when": "!terminalFocus && editorFocus"
  }

演示效果如下:

4. 如何快速在水平、垂直窗口分割当前文件

如果一个文件很长时,我们需要对照上下文来编写代码,这时可以在两个编辑器组中都打开这个文件,一边写代码,一边参考。

vscode内置了一个快捷键 command + ,用于把当前文件在水平分割窗口打开,你可以直接用。

但是我个人因为用惯了 vim模式,所以喜欢输入冒号进入命令模式,然后输入 vs来水平分割,输入sp来垂直分割,演示效果如下:

总结

这篇文章主要分享了我日常使用 vscode + vim 全键盘操作的一部分操作,希望能对你有所帮助~如果你对这方面感兴趣的话,可以持续关注我的文章。

往期文章

相关推荐
晚秋大魔王13 小时前
C# 添加图标
c#·visual studio code
长安第一美人4 天前
Qt中2个.app源文件之间函数与变量的互相调用
开发语言·c++·嵌入式硬件·qt·visual studio code
一梦南柯8 天前
开发新体验:基于Ollama+deepseek打造私有化代码助手
人工智能·visual studio code·deepseek
敲敲敲敲暴你脑袋8 天前
vue3中ref响应式变量为什么script中要用.value,而template模板中不需?
javascript·vue.js·visual studio code
红虾程序员11 天前
CSS盒子模型详解
前端·pycharm·intellij-idea·css3·html5·visual studio code
天机️灵韵12 天前
Continue 与 CodeGPT 插件 的对比分析
ide·visualstudio·intellij-idea·visual studio code
Lorcian15 天前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
Lorcian21 天前
web前端11--伪类与过渡
前端·css·笔记·html5·visual studio code
惜.己23 天前
鸿蒙仓颉环境配置(仓颉SDK下载,仓颉VsCode开发环境配置,仓颉DevEco开发环境配置)
vscode·华为·harmonyos·visual studio code·仓颉
小兵张健24 天前
cursor 使用教程(07) —— 内嵌对话框
程序员·visual studio code·visual studio