Maoyl's blog Maoyl's blog
首页
  • 前端基础

    • HTML
    • CSS
    • CSS动画
    • JavaScript文章
    • stylus
  • 性能优化

    • 《性能优化》笔记
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《JavaScript设计模式》笔记
    • 《TypeScript 从零实现 axios》
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架

    • Vue相关
    • React相关
  • 前端监控

    • 前端监控简介
  • 学习笔记

    • 《Vue》笔记
    • 《React》笔记
    • 小程序学习笔记
  • 后端基础

    • Nodejs
  • 学习笔记

    • 数据结构
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网页性能
  • 学习笔记

    • 《Git》学习笔记
    • 《Vim》学习笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

maoyln

日日行,不怕千万里
首页
  • 前端基础

    • HTML
    • CSS
    • CSS动画
    • JavaScript文章
    • stylus
  • 性能优化

    • 《性能优化》笔记
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《JavaScript设计模式》笔记
    • 《TypeScript 从零实现 axios》
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架

    • Vue相关
    • React相关
  • 前端监控

    • 前端监控简介
  • 学习笔记

    • 《Vue》笔记
    • 《React》笔记
    • 小程序学习笔记
  • 后端基础

    • Nodejs
  • 学习笔记

    • 数据结构
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网页性能
  • 学习笔记

    • 《Git》学习笔记
    • 《Vim》学习笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 简介

  • vim

  • vscode

    • 文本与窗口的基本操作
      • 窗口焦点切换
      • 移动光标与查看
      • 文件操作
    • vscode多窗口操作
    • 全局搜索命令
    • 开发常用小技巧
    • vscode挖掘快捷键场景
    • vscode git 操作
    • snippet 代码片段
    • 代码重构工具
    • VSpaceCode 插件
  • 《Vim》学习笔记
  • vscode
maoyln
2022-06-25
目录

文本与窗口的基本操作

# 乘胜追击:文件与窗口基础操作

vim 的部分已经结束,相信坚持到这里的朋友基本已经对 vim 有了基本(或更多)的了解,也已经可以在日常的开发中巴适地使用 vim 的操作命令来完成大部分的 coding 工作(如果你也是如我一般认真坚持了 18 天的话;我在到今天为止,在日常的 coding 中百分之 90 的时间双手是在键盘上的,而且随着对键位及快捷键的熟悉,coding 过程中的思维也愈加地集中,不容易被打断)。但是对于 vscode 来说,vim 是服务于或优势于编辑,而更多地对于 vscode 的使用操作,我们当然也是应该去学习、掌握,这样才可以让 vscode 之中 vim 之外的部分使用得更加丝滑。

既然如此,我们就乘胜追击,了解更多关于 vscode 本身的操作命令、快捷键。

# 窗口焦点切换

在之前的课程-15.窗口管理中,我们学习了 vim 的窗口管理的一些命令,当光标在编辑窗口时,我们通过 shift + ctrl + h / l 来使光标在左右窗口移动焦点,不过在使用的过程中这个快捷键还是比较不顺手,毕竟要按三个键,而且 vim 的命令只能在编辑窗使用,如果我们当前焦点在终端这类的时候,就无法使用 vim 的命令切换焦点了;而对于我们日常来说,需要聚焦到侧边的资源管理器的情况是很常有的,我们急需一个更方便好用的组合键达到这个目的;而 vscode 中,其实是有这个快捷键的,就是 shift + command + e,既然如此,在结合我们前面-18.调用vscode命令提到的方式,如此这般,就可以在 keybindings.json 中映射:

...
{
  "key": "ctrl+;",
  "command": "workbench.view.explorer", // `shift` + `command` + `e` 组合键对应的 命令ID(Command ID)
}
...
1
2
3
4
5
6

这样,我们就可以在任何时候都可以快速地聚焦到资源管理器了。与之相同的,聚焦编辑窗也是与聚焦资源管理器一样甚至更大的需求,同样 vscode 原本也有这个功能的组合键,就是 command + 1 (workbench.action.focusFirstEditorGroup),我们也可以把它重新映射一下:

{
  "key": "ctrl+'",
  "command": "workbench.action.focusFirstEditorGroup",
}
1
2
3
4

这样,我们就可以在任何时候快速聚焦到编辑窗中了。

我的做法

其实配置完 ctrl + ; 后你会发现,当焦点在资源管理器时,如果使用这个快捷键,焦点会跳到编辑窗,这就意味着我们可以使用这个快捷键在这两个区域切换焦点;这时你可能会问,那终端与其他部分的焦点切换呢?我的做法是不用 vscode 的终端,直接打开自带的命令行工具或自己的其他命令行工具(比如我用 warp),一劳永逸,所有在跑的项目都在同一个地方查看,更方便管理。

去 TM 的终端!

# 移动光标与查看

在我们习惯了 vim 的 hjkl 后,在资源管理器中上下切换文件焦点是很简单并且自然而然的事情。

  • jk:上下切换文件焦点
  • h:聚焦当前文件所在的文件夹并且折叠收起该文件夹
  • l:在编辑窗打开该文件

# 文件操作

在日常使用中,我们常常需要新建文件或者文件夹;而对于我们使用了 vim 的 vscode,又可以分成三个不同的情况:

  • 聚焦在资源管理器时:此时,我们可以配置个快捷键来新建文件或文件夹,在 keybindings.json 添加:
...
{
  "key": "a", // 新建文件
  "command": "explorer.newFile",
  "when": "filesExplorerFocus && !inputFocus"
},
{
  "key": "shift+a", // 新建文件夹
  "command": "explorer.newFolder",
  "when": "filesExplorerFocus && !inputFocus"
},
...
1
2
3
4
5
6
7
8
9
10
11
12

这里的 when 条件其实是指:当前的 vscode 焦点要在侧边栏的资源管理器中,且不是在输入框聚焦的情况下;后者是为了限制在编辑文件或文件夹名称时这两快捷键不可触发。

  • 聚焦在编辑窗时:此时我们可以在 setting.json 配置如下组合键来达到同样效果:
"vim.normalModeKeyBindingsNonRecursive": [
  ...
  {
    "before": ["<Leader>", "n", "d"],
    "commands": ["explorer.newFolder"]
  },
  {
    "before": ["<Leader>", "n", "f"],
    "commands": ["explorer.newFile"]
  },
  ...
]
1
2
3
4
5
6
7
8
9
10
11
12
  • 除了以上两种情况时:而除了使用前面两种方式,vscode 也提供一个全局新建文件的命令 command + n,这时会新建一个没有扩展名的空白文件,而且只能在保存时才能把文件保存到想要的路径下。

除了新建,删除和重命名也有对应的快捷键(聚焦资源管理器并选中):

  • command + delete:删除文件
  • enter:重命名文件

删除文件改建:

  { // 删除文件改建
    "key": "d",
    "command": "deleteFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
  },

1
2
3
4
5
6

删除文件按键比较远,顾改建为r; 重命名enter用起来很方便,而且已经习惯了,所以就不做修改了。

编辑 (opens new window)
#Vim
上次更新: 2025/04/18, 01:42:12
调用vscode命令
vscode多窗口操作

← 调用vscode命令 vscode多窗口操作→

最近更新
01
GSAP动画库——如何高效写动画
04-17
02
自适应方案PxToRem
09-10
03
性能优化-requestAnimationFrame
08-10
更多文章>
Theme by Vdoing | Copyright © 2019-2025 备案号:京ICP备19058102号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式