Vim常用操作-合併行。

吳佰清發表於2017-11-27

剛接觸 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 在程式碼格式化時，都不會處理標籤的屬性。
我們只能通過游標換行，然後在按刪除的方式進行解決。
那麼接下來介紹的這個技巧，叫 “合併行”，能讓我們快速的解決這個問題。

 

操作步驟：
1. 按 ESC 進入 Normal 模式，移動遊標定位到第 2 行的位置。
2. 按 shift+j 就可以實現合併行的操作。

 

相關文章