Vim快速合并行及vim 将文件所有行合并到一行


Posted in Javascript onNovember 27, 2017

VIM (Unix及类Unix系统文本编辑器)

Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性。VIM是自由软件。 Vim普遍被推崇为类Vi编辑器中最好的一个,事实上真正的劲敌来自Emacs的不同变体。1999 年Emacs被选为Linuxworld文本编辑分类的优胜者,Vim屈居第二。但在2000年2月Vim赢得了Slashdot Beanie的最佳开放源代码文本编辑器大奖,又将Emacs推至二线, 总的来看, Vim和Emacs在文本编辑方面都是非常优秀的

Vim快速合并行及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快速合并行及vim 将文件所有行合并到一行

操作步骤:

1. 按 ESC 进入 Normal 模式,移动游标定位到第 2 行的位置。

2. 按 shift+j 就可以实现合并行的操作。

PS:vim 将文件所有行合并到一行

在 Normal Mode下执行:

ggvGJ

gg 用于跳到行首

v 转换成 visual 模式

G 跳到最后一行

J 合并行

总结

以上所述是小编给大家介绍的Vim常用操作快速合并行功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 贪吃蛇实现代码
Nov 22 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 #Javascript
JavaScript实现修改伪类样式
Nov 27 #Javascript
Vue.js搭建移动端购物车界面
Jun 28 #Javascript
Vue实现购物车场景下的应用
Nov 27 #Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 #Javascript
vue购物车插件编写代码
Nov 27 #Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
用PHP调用数据库的存贮过程
2006/10/09 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Node.js学习入门
2017/01/03 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
学校宣传标语
2014/06/18 职场文书
2014年计生标语
2014/06/23 职场文书
捐助感谢信
2015/01/22 职场文书
监考失职检讨书
2015/01/26 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS