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 在代碼格式化時,都不會處理標簽的屬性。
我們只能通過光標換行,然后在按刪除的方式進行解決。
那么接下來介紹的這個技巧,叫 “合並行”,能讓我們快速的解決這個問題。

 

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM