js css html

掌握文本对象

2022-08-07  本文已影响0人  sweetBoy_9126

是什么

是一个结构化的可以快速选择的范围

语法

operator + 内部/外部 + 文本对象

比如:

const a = (num: number) => {}

对于上面的代码 我们使用 c + i + (
我们就可以删除括号里的 num: number 然后进入 insert 模式
如果使用 c + a + (
就会删除包括括号在内的部分

可视化模式 + 内部/外部 + 文本对象

比如:v + i + (
选中的同样是 num: number

注意

我们匹配的是包含当前光标的最近一层的文本对象,也就是说哪个文本对象内有光标就匹配哪个文本对象
比如:

export const Test = ({
  setup(props) {
    return () => {}
  }
})

我们的光标在setup 上,它的文本对象是 (,那么我们就需要找到包含 setup 最近的一个 (,也就是

({
  setup(props) {
    return () => {}
  }
})

而如果我们的光标在 props 里,那么包含 props 的 ( 就是 (props)

内部

i
不包括文本对象本身

外部

a
包括文本对象本身

对象

w

一个单词
如果配合 operaor 或者 可视化模式 + i + w 选中的是当前单词
如果是 a + w 有两种情况
1). 如果单词后面有空格选 中当前单词和后面的空格
2). 如果单词后面没空格前面有空格选中的是前面的空格和当前单词

推荐使用 i + w

( 或 )

一对括号

b

一对括号

[ 或 ]

一对 []

{ 或 }

一对块 {}

B

一对块 {}

< 或 >

一对 <>
主要用来修改 html 标签

t

当前光标所在的标签里的内容
比如

<div class="a">
  <div>a</div>
</div>

当我们的光标在 <div class="a"> 这一行的时候使用d+ i + t 就会选中这个标签内的内容也就是 <div>a</div>
使用d + a + t 会包含当前行的标签本身

'

一对单引号

"

一对双引号

`

一对 `

s

一个句子
在 vim 中只有后面是 . 或者 ! 或者 ?它才会把它当做句子
比如

this ia a juzi.
this is a juzi!
this is a juzi?

p

一个段落
段落之间用空行隔开
使用 i + p 选中当前段落
使用 a + p 选中当前段落和段落下的空行

vim-textobj-arguments 选中一个函数的入参

ia

当前参数,不包含分隔符
等价于 iw
比如

function (age, name) {}

光标在 name 内就是选中 name

aa

包含分隔符
光标在 name 内就是选中 , name
相比 aw 会都选中一个逗号

技巧

删除一个参数:daa
修改一个参数:cia

vim-textobj-entire

d+ae

删除当前文件内的所有内容

d+ie

删除当前文件内的所有内容,但是不包含前后的空格

上一篇 下一篇

猜你喜欢

热点阅读