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-indent-object - vim 缩进对象
      • 删除函数
    • vim的宏操作
    • 调用vscode命令
  • vscode

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

快速删除一个函数

# 开发利器:快速删除一个函数

在之前的练习中,我们曾学习过 p 这个代指段落的文本对象,所以想到要删除一个函数我们可能会先想到用它来实现,比如 dap 如此这般;但因为段落的定义是空行之间的内容为不同段落,这在一些情况下无法满足我们删除一个函数的需求,如:

const test = (a = 1) => {
  console.log(a)
  a = 2
  
  setTimeout(() => {
    console.log(a)
  }, 500);
}
1
2
3
4
5
6
7
8

我们可以注意到,在函数内部有一个空行,这时我们在空行的上方或者下方使用 dap,则只会删除一半的函数。那有没有更好的方法呢?那肯定是有的,不过我们要先来了解一下 % 命令和 vim-indent-object。

# % - 匹配括号

在 vim 中,我们可以通过 % 来匹配括号,即括号 ()、中括号 []、大括号 {},当我们的光标在括号上时,我们使用 % 可以跳到与当前括号成对的另外一个括号上。

# vim-indent-object - vim 缩进对象

这个是 vim 自带的一个扩展插件,该插件基于缩进级别定义了一个新的文本对象 i;即我们可以使用它来基于缩进进行一些操作,如 >ii 可以把同一个缩进级别的内容全部往右移动一个缩进(中间的 i 是指 inner)。

# 删除函数

通过我们上面提到的两个指令,我们就可以来研究一下怎么删除一下函数了;对于大部分使用缩进的来规范语法结构的语言如 Python 、JavaScript 等,它们的函数也是有着明显的缩进规律的,这时,我们可以使用 daI 来实现删除函数,但前提是光标在函数的内部;但如果如下面这种情况:

  const test1 = (a = 1) => {
    console.log(a)
    a = 11
    
    setTimeout(() => {
      console.log(a)
    }, 500);
  }

  const test2 = (a = 2) => {
    console.log(a)
    a = 22
    
    setTimeout(() => {
      console.log(a)
    }, 500);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果光标在 test1 或 test2 函数名那一行并使用 daI,则会把两个函数都删除;因为对于这两个函数来说,它们有同样的缩进级别。当然,在大部分情况下,daI 都是够用了的;为了让我们用得更顺手一些,我们可以把 ai 映射成 aI:

在 setting.json 中添加设置:

  "vim.operatorPendingModeKeyBindings": [
    {
      "before": ["a", "i"],
      "after": ["a", "I"]
    }
  ],
  "vim.visualModeKeyBindings": [
    {
        "before": ["a", "i"],
        "after": ["a", "I"]
    },        
  ]
1
2
3
4
5
6
7
8
9
10
11
12

这样我们在可视化模式或者操作待决模式(operator pending mode)时可以直接使用 i 代替 I。

而为了弥补上面提到的 vim-indent-object 的短板,我们还可以通过 % 配合 <Leader> 来实现删除函数;首先,对于光标在函数名所在行时(如上面提到的例子),我们可以使用 V 来选中当前行,然后需要把光标移动行末,即 $,这时光标在花括号上,再键入 %,这时候就可以选中到函数的闭合符处,最后键入 d,即可把函数删除;总的指令就是 V$%d。但是这么长一个命令未免太麻烦,这时我们就可以用 <Leader> 来映射:

在 setting.json 中添加设置

  "vim.normalModeKeyBindings": [
    {
      "before": ["<Leader>", "d", "f"],
      "after": ["V", "$", "%", "d"]
    },
  ],
1
2
3
4
5
6

这样当我们光标在函数名那一行时就可以通过 <Leader> + df 来快速删除一个函数了。再加上前面提到的光标在函数内部时的删除命令,基本可以应付大部分的情况了。

编辑 (opens new window)
#Vim
上次更新: 2025/04/18, 01:42:12
窗口管理大法
vim的宏操作

← 窗口管理大法 vim的宏操作→

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