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 相关文章推荐
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
详解利用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
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
js的2种继承方式详解
2014/03/04 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python中functools模块的常用函数解析
2016/06/30 Python
python的依赖管理的实现
2019/05/14 Python
通过Python实现一个简单的html页面
2020/05/16 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
长青弘远的面试题
2012/06/09 面试题
信息学院毕业生自荐信范文
2014/03/04 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
导游词之潮音寺
2019/09/26 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技