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 相关文章推荐
js 小数取整的函数
May 10 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
原生js实现简单轮播图
Oct 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
广告显示判断
2006/08/31 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
JS中的作用域链
2017/03/01 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
python去除所有html标签的方法
2015/05/05 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
django的ORM模型的实现原理
2019/03/04 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
python安装及变量名介绍详解
2020/12/12 Python
python爬虫如何解决图片验证码
2021/02/14 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
给医务人员表扬信
2014/01/12 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
高考标语大全
2014/06/05 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
倡议书范文大全
2015/04/28 职场文书
订货会主持词
2015/07/01 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
java项目构建Gradle的使用教程
2022/03/24 Java/Android
vue实现在data里引入相对路径
2022/06/05 Vue.js