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 相关文章推荐
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
jquery常用的12个小功能
Jul 22 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP中的session安全吗?
2016/01/22 PHP
Yii2如何批量添加数据
2016/05/17 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
工作推荐信范文
2014/05/10 职场文书
党建工作经验交流材料
2014/05/25 职场文书
酒店员工培训方案
2014/06/02 职场文书
奥林匹克的口号
2014/06/13 职场文书
大专学生求职自荐信
2014/07/06 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
5.12护士节活动总结
2015/02/10 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
Python必备技巧之字符数据操作详解
2022/03/23 Python