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

    • 起步
    • 相关命令的知识
    • 认识vim语法
    • 删改重做命令提升效率
    • 认识可视化模式
      • 可视化模式
      • 使用
      • 技巧
      • 拓展
      • 小练习
    • 什么是文本对象
    • 快速移动
    • 掌握搜索命令
    • vim-easymotion
    • 数字与'.'的威力
    • 多文件跳转
    • vim-surround
    • 字符替换和多文本选中
    • 大小写、注释与提示
    • 窗口管理大法
    • 快速删除一个函数
    • vim的宏操作
    • 调用vscode命令
  • vscode

  • 《Vim》学习笔记
  • vim
maoyln
2022-06-09
目录

认识可视化模式

# 渐入佳境:认识可视化模式

# 可视化模式

  • 字符可视化模式(Characterwise visual mode):文本选择是以字符为单位,命令 v (命令模式下)
  • 行可视化模式(Linewise visual mode):文本选择是以行为单位,命令 V (命令模式下)
  • 块可视化模式(Blockwise visual mode):文本选择是以块为单位(非代码块,指一个矩形区域内的文本,多光标),命令 Ctrl + v (命令模式下)

通过以上三种方式进入可视化模式后,底部会显示 -- visual -- 字样(vscode中);对于不同的可视化模式,可以直接输入另外两种可视化模式的命令直接切换模式,如 v → V 可以直接从字符可视化模式切换到行可视化模式,如此类推。

退出命令:

  • esc / Ctrl + [:通用退出命令
  • v / V / Ctrl + v:使用某个命令进入了可视化模式则可以通过相同的命令退出,但是由于不同的可视化模式可以直接切换,所以如果切换多了自己可能也忘记是在哪个模式下了,所以推荐用通用退出命令

# 使用

  • v / V / Ctrl + v + 范围 / 位置:如 v + e 则是选中到单词结尾,诸如此类,可以搭配前面提到的 w b h j ... 等等的命令
  • 可视化模式下 o:切换光标位置,此时会在选中区域的头和尾之间切换

# 技巧

  • 多行修改:如果我们要统一修改多行的内容,可以用 Ctrl + v 选中多行后,通过 I 或 A 进行前插入或后插入
  • 通过可视化模式复制的内容,其实是暂存在了 vim 的寄存器中(d c 等操作其实也是,所以在 d 后,你也可以用 p 粘贴出来),而我们的 command + c 复制的内容则和 vim 无关,也就意味着,我们可以通过这两种不同的指令同时复制不同的内容而不会冲突,在某些场景下可以起到不错的辅助

# 拓展

还记得我们前面配置 H 和 L 来快速移动光标到行首行尾吗,在可视化模式中你会发现无法使用如 vL vH 这样的命令,这是因为我们 H L 的映射是在 normal mode 下的,我们需要在 vscode 的 setting.json 中添加如下配置:

"vim.visualModeKeyBindings": [
  {
      
    "before": ["H"],
    "after": ["^"]
  },
  {
    "before": ["L"],
    "after": ["g", "_"]
  },
  {
    "before": ["J"],
    "after": ["5", "j"]
  },
  {
    "before": ["K"],
    "after": ["5", "k"]
  }
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 小练习

1. 复制以下单词:

javascript

python

java

swift

2. 把以下所有句子的第一个单词改为 Just Vim It

this is a simple easy vim tutorial
this is a simple easy vim tutorial
this is a simple easy vim tutorial
this is a simple easy vim tutorial
this is a simple easy vim tutorial
this is a simple easy vim tutorial
this is a simple easy vim tutorial
this is a simple easy vim tutorial
this is a simple easy vim tutorial

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
编辑 (opens new window)
#Vim
上次更新: 2025/04/18, 01:42:12
删改重做命令提升效率
什么是文本对象

← 删改重做命令提升效率 什么是文本对象→

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