學習Vim合并行的方法和技巧

2024-09-01 13:53:26

字體：大中小

來源：轉載

供稿：網友

剛接觸 Vim 會覺得它的學習曲線非常陡峭，要記住很多命令。所以這個系列的分享，不會
教你怎么配置它，而是教你怎么快速的使用它。

在開發時為了代碼美觀，經常會把屬性用換行的方式顯示。

<el-dialog :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,合并行