学习Vim合并行的方法和技巧

 更新时间:2017年11月27日 11:33:35   投稿:laozhang  
这篇文章主要介绍了学习Vim合并行的方法以及代码实现过程,值得参考,一起来学习下。

刚接触 Vim 会觉得它的学习曲线非常陡峭,要记住很多命令。所以这个系列的分享,不会
教你怎么配置它,而是教你怎么快速的使用它。

在开发时为了代码美观,经常会把属性用换行的方式显示。

<el-dialog 
 title="批量编辑所属组织" 
 :visible.sync="isShow" 
 :before-close="beforeClose"
 >
...
</el-dialog>

这种场景适用于标签属性少,代码量也少的情况。

如果标签突然增多,阅读起来就会很不方便。比如下面这样:

<template>
 <el-table
 :data="tableData"
 border
 style="width: 100%">
 <el-table-column
  fixed
  prop="date"
  label="日期"
  width="150">
 </el-table-column>
 <el-table-column
  prop="name"
  label="姓名"
  width="120">
 </el-table-column>
 <el-table-column
  prop="province"
  label="省份"
  width="120">
 </el-table-column>
 <el-table-column
  prop="city"
  label="市区"
  width="120">
 </el-table-column>
 <el-table-column
  prop="address"
  label="地址"
  width="300">
 </el-table-column>
 <el-table-column
  prop="zip"
  label="邮编"
  width="120">
 </el-table-column>
 <el-table-column
  fixed="right"
  label="操作"
  width="100">
  <template scope="scope">
  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
  <el-button type="text" size="small">编辑</el-button>
  </template>
 </el-table-column>
 </el-table>
</template>

所以我们就需要把标签和属性变为一行。

<template>
 <el-table :data="tableData" border style="width: 100%">
 <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column>
 <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
 <el-table-column prop="province" label="省份" width="120"> </el-table-column> 
 <el-table-column prop="city" label="市区" width="120"> </el-table-column>
 <el-table-column prop="address" label="地址" width="300"> </el-table-column>
 <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
 <el-table-column fixed="right" label="操作" width="100">
  <template scope="scope">
  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
  <el-button type="text" size="small">编辑</el-button>
  </template>
 </el-table-column>
 </el-table>
</template>

多数 IDE 在代码格式化时,都不会处理标签的属性。

我们只能通过光标换行,然后在按删除的方式进行解决。

那么接下来介绍的这个技巧,叫 “合并行”,能让我们快速的解决这个问题。

其实我们可以看出来,这个VIM合并行,就好比是代码格式化一样的,让写出的代码更加容易读,格式更加好看,如果大家还有其他问题,可以在下面留言区讨论。

相关文章

  • 浅谈Flink容错机制之作业执行和守护进程

    浅谈Flink容错机制之作业执行和守护进程

    Flink容错机制主要有作业执行的容错以及守护进程的容错两方面,前者包括Flink runtime的ExecutionGraph和Execution的容错,后者则包括JobManager和TaskManager的容错
    2021-06-06
  • centos中yum命令删除还原的补救方法介绍

    centos中yum命令删除还原的补救方法介绍

    Yum: 即Yellowdog Update Modifier,是一种基于rpm的包管理工具,这篇文章主要给大家介绍了关于在centos中yum命令删除还原的补救方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • Linux中进程在后台可靠运行的方法总结

    Linux中进程在后台可靠运行的方法总结

    本篇文章主要给大家介绍了Linux中进程在后台可靠运行的方法以及示例代码分析,一起学习参考下吧。
    2017-12-12
  • Linux安装Oracle出现乱码怎么解决

    Linux安装Oracle出现乱码怎么解决

    Linux系统下Oracle经常会出现乱码,不管是安装还是使用过程中都会出现中文乱码。这是因为Linux系统中缺少了某些字体,只要安装了这些字体,就能解决这个问题了
    2016-02-02
  • Linux中hexdump命令用法

    Linux中hexdump命令用法

    这篇文章主要介绍了Linux中hexdump命令用法,并给大家例举了命令输出结果,有兴趣的学习下吧。
    2017-12-12
  • Linux使用粘滞位 (t-bit)共享文件的方法教程

    Linux使用粘滞位 (t-bit)共享文件的方法教程

    在 Linux 系统中,共享文件是日常管理和协作中的常见任务,而粘滞位(Sticky Bit 或 t-bit)是实现共享目录安全性的重要工具之一,本文将带您详细了解如何在 Linux 中共享文件并配置粘滞位来保护共享资源的安全,需要的朋友可以参考下
    2024-12-12
  • Linux进程地址空间详解

    Linux进程地址空间详解

    在C语言编程中,内存管理是一个重要的环节,本文详细解析了C语言中的内存区域划分,包括栈区、堆区、全局区等,并探讨了fork函数的遗留问题,即如何出现一个变量同时等于0又大于0的情况,此外,文章还深入讨论了进程地址空间的概念
    2024-10-10
  • 详解在LINUX上部署带有JAR包的JAVA项目

    详解在LINUX上部署带有JAR包的JAVA项目

    这篇文章主要介绍了详解在LINUX上部署带有JAR包的JAVA项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Ubuntu18.04安装vsftpd的实现代码

    Ubuntu18.04安装vsftpd的实现代码

    这篇文章主要介绍了Ubuntu18.04安装vsftpd的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Linux下利用unzip命令如何解压多个文件详解

    Linux下利用unzip命令如何解压多个文件详解

    这篇文章主要给大家介绍了关于在Linux下利用unzip命令如何解压多个文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-09-09

最新评论