vscode + vim 全键盘操作(三)

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

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

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

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

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

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

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

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

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

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

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

不过我觉得还是太慢，按键太多了，所以我在 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 光标就能切换到下方的窗口给了，演示如下(为了演示，我分割了四个编辑器组)

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

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

json 复制代码

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

演示效果如下：

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

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

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

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