学习Vim合并行的方法和技巧

小豚豚豚鼠 發表於 2023-8-19 00:00:00

<p>
刚接触 vim 会觉得它的学习曲线非常陡峭，要记住很多命令。所以这个系列的分享，不会<br>
教你怎么配置它，而是教你怎么快速的使用它。</p>
<p>
在开发时为了代码美观，经常会把属性用换行的方式显示。</p>
<div class="jb51code">
<div>
<div class="syntaxhighlighterxhtml" id="highlighter_979750">
<div class="toolbar">
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="gutter">
<div class="line number1 index0 alt2">
1</div>
<div class="line number2 index1 alt1">
2</div>
<div class="line number3 index2 alt2">
3</div>
<div class="line number4 index3 alt1">
4</div>
<div class="line number5 index4 alt2">
5</div>
<div class="line number6 index5 alt1">
6</div>
<div class="line number7 index6 alt2">
7</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
<code class="xhtml plain"><</code><code class="xhtml keyword">el-dialog</code>
</div>
<div class="line number2 index1 alt1">
<code class="xhtml spaces"> </code><code class="xhtml color1">title</code><code class="xhtml plain">=</code><code class="xhtml string">"批量编辑所属组织"</code>
</div>
<div class="line number3 index2 alt2">
<code class="xhtml spaces"> </code><code class="xhtml color1">:visible.sync</code><code class="xhtml plain">=</code><code class="xhtml string">"isshow"</code>
</div>
<div class="line number4 index3 alt1">
<code class="xhtml spaces"> </code><code class="xhtml color1">:before-close</code><code class="xhtml plain">=</code><code class="xhtml string">"beforeclose"</code>
</div>
<div class="line number5 index4 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain">></code>
</div>
<div class="line number6 index5 alt1">
<code class="xhtml plain">...</code>
</div>
<div class="line number7 index6 alt2">
<code class="xhtml plain"></</code><code class="xhtml keyword">el-dialog</code><code class="xhtml plain">></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
这种场景适用于标签属性少，代码量也少的情况。</p>
<p>
如果标签突然增多，阅读起来就会很不方便。比如下面这样：</p>
<div class="jb51code">
<div>
<div class="syntaxhighlighterxhtml" id="highlighter_320050">
<div class="toolbar">
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="gutter">
<div class="line number1 index0 alt2">
1</div>
<div class="line number2 index1 alt1">
2</div>
<div class="line number3 index2 alt2">
3</div>
<div class="line number4 index3 alt1">
4</div>
<div class="line number5 index4 alt2">
5</div>
<div class="line number6 index5 alt1">
6</div>
<div class="line number7 index6 alt2">
7</div>
<div class="line number8 index7 alt1">
8</div>
<div class="line number9 index8 alt2">
9</div>
<div class="line number10 index9 alt1">
10</div>
<div class="line number11 index10 alt2">
11</div>
<div class="line number12 index11 alt1">
12</div>
<div class="line number13 index12 alt2">
13</div>
<div class="line number14 index13 alt1">
14</div>
<div class="line number15 index14 alt2">
15</div>
<div class="line number16 index15 alt1">
16</div>
<div class="line number17 index16 alt2">
17</div>
<div class="line number18 index17 alt1">
18</div>
<div class="line number19 index18 alt2">
19</div>
<div class="line number20 index19 alt1">
20</div>
<div class="line number21 index20 alt2">
21</div>
<div class="line number22 index21 alt1">
22</div>
<div class="line number23 index22 alt2">
23</div>
<div class="line number24 index23 alt1">
24</div>
<div class="line number25 index24 alt2">
25</div>
<div class="line number26 index25 alt1">
26</div>
<div class="line number27 index26 alt2">
27</div>
<div class="line number28 index27 alt1">
28</div>
<div class="line number29 index28 alt2">
29</div>
<div class="line number30 index29 alt1">
30</div>
<div class="line number31 index30 alt2">
31</div>
<div class="line number32 index31 alt1">
32</div>
<div class="line number33 index32 alt2">
33</div>
<div class="line number34 index33 alt1">
34</div>
<div class="line number35 index34 alt2">
35</div>
<div class="line number36 index35 alt1">
36</div>
<div class="line number37 index36 alt2">
37</div>
<div class="line number38 index37 alt1">
38</div>
<div class="line number39 index38 alt2">
39</div>
<div class="line number40 index39 alt1">
40</div>
<div class="line number41 index40 alt2">
41</div>
<div class="line number42 index41 alt1">
42</div>
<div class="line number43 index42 alt2">
43</div>
<div class="line number44 index43 alt1">
44</div>
<div class="line number45 index44 alt2">
45</div>
<div class="line number46 index45 alt1">
46</div>
<div class="line number47 index46 alt2">
47</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
<code class="xhtml plain"><</code><code class="xhtml keyword">template</code><code class="xhtml plain">></code>
</div>
<div class="line number2 index1 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table</code>
</div>
<div class="line number3 index2 alt2">
<code class="xhtml spaces"> </code><code class="xhtml color1">:data</code><code class="xhtml plain">=</code><code class="xhtml string">"tabledata"</code>
</div>
<div class="line number4 index3 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain">border</code>
</div>
<div class="line number5 index4 alt2">
<code class="xhtml spaces"> </code><code class="xhtml color1">style</code><code class="xhtml plain">=</code><code class="xhtml string">"width: 100%"</code><code class="xhtml plain">></code>
</div>
<div class="line number6 index5 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code>
</div>
<div class="line number7 index6 alt2">
<code class="xhtml spaces">  </code><code class="xhtml plain">fixed</code>
</div>
<div class="line number8 index7 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"date"</code>
</div>
<div class="line number9 index8 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"日期"</code>
</div>
<div class="line number10 index9 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"150"</code><code class="xhtml plain">></code>
</div>
<div class="line number11 index10 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number12 index11 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code>
</div>
<div class="line number13 index12 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"name"</code>
</div>
<div class="line number14 index13 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"姓名"</code>
</div>
<div class="line number15 index14 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"120"</code><code class="xhtml plain">></code>
</div>
<div class="line number16 index15 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number17 index16 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code>
</div>
<div class="line number18 index17 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"province"</code>
</div>
<div class="line number19 index18 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"省份"</code>
</div>
<div class="line number20 index19 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"120"</code><code class="xhtml plain">></code>
</div>
<div class="line number21 index20 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number22 index21 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code>
</div>
<div class="line number23 index22 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"city"</code>
</div>
<div class="line number24 index23 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"市区"</code>
</div>
<div class="line number25 index24 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"120"</code><code class="xhtml plain">></code>
</div>
<div class="line number26 index25 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number27 index26 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code>
</div>
<div class="line number28 index27 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"address"</code>
</div>
<div class="line number29 index28 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"地址"</code>
</div>
<div class="line number30 index29 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"300"</code><code class="xhtml plain">></code>
</div>
<div class="line number31 index30 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number32 index31 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code>
</div>
<div class="line number33 index32 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"zip"</code>
</div>
<div class="line number34 index33 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"邮编"</code>
</div>
<div class="line number35 index34 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"120"</code><code class="xhtml plain">></code>
</div>
<div class="line number36 index35 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number37 index36 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code>
</div>
<div class="line number38 index37 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">fixed</code><code class="xhtml plain">=</code><code class="xhtml string">"right"</code>
</div>
<div class="line number39 index38 alt2">
<code class="xhtml spaces">  </code><code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"操作"</code>
</div>
<div class="line number40 index39 alt1">
<code class="xhtml spaces">  </code><code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"100"</code><code class="xhtml plain">></code>
</div>
<div class="line number41 index40 alt2">
<code class="xhtml spaces">  </code><code class="xhtml plain"><</code><code class="xhtml keyword">template</code> <code class="xhtml color1">scope</code><code class="xhtml plain">=</code><code class="xhtml string">"scope"</code><code class="xhtml plain">></code>
</div>
<div class="line number42 index41 alt1">
<code class="xhtml spaces">  </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-button</code> <code class="xhtml plain">@</code><code class="xhtml color1">click</code><code class="xhtml plain">=</code><code class="xhtml string">"handleclick(scope.row)"</code> <code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code> <code class="xhtml color1">size</code><code class="xhtml plain">=</code><code class="xhtml string">"small"</code><code class="xhtml plain">>查看</</code><code class="xhtml keyword">el-button</code><code class="xhtml plain">></code>
</div>
<div class="line number43 index42 alt2">
<code class="xhtml spaces">  </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-button</code> <code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code> <code class="xhtml color1">size</code><code class="xhtml plain">=</code><code class="xhtml string">"small"</code><code class="xhtml plain">>编辑</</code><code class="xhtml keyword">el-button</code><code class="xhtml plain">></code>
</div>
<div class="line number44 index43 alt1">
<code class="xhtml spaces">  </code><code class="xhtml plain"></</code><code class="xhtml keyword">template</code><code class="xhtml plain">></code>
</div>
<div class="line number45 index44 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number46 index45 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table</code><code class="xhtml plain">></code>
</div>
<div class="line number47 index46 alt2">
<code class="xhtml plain"></</code><code class="xhtml keyword">template</code><code class="xhtml plain">></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
所以我们就需要把标签和属性变为一行。</p>
<div class="jb51code">
<div>
<div class="syntaxhighlighterxhtml" id="highlighter_384232">
<div class="toolbar">
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="gutter">
<div class="line number1 index0 alt2">
1</div>
<div class="line number2 index1 alt1">
2</div>
<div class="line number3 index2 alt2">
3</div>
<div class="line number4 index3 alt1">
4</div>
<div class="line number5 index4 alt2">
5</div>
<div class="line number6 index5 alt1">
6</div>
<div class="line number7 index6 alt2">
7</div>
<div class="line number8 index7 alt1">
8</div>
<div class="line number9 index8 alt2">
9</div>
<div class="line number10 index9 alt1">
10</div>
<div class="line number11 index10 alt2">
11</div>
<div class="line number12 index11 alt1">
12</div>
<div class="line number13 index12 alt2">
13</div>
<div class="line number14 index13 alt1">
14</div>
<div class="line number15 index14 alt2">
15</div>
<div class="line number16 index15 alt1">
16</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
<code class="xhtml plain"><</code><code class="xhtml keyword">template</code><code class="xhtml plain">></code>
</div>
<div class="line number2 index1 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table</code> <code class="xhtml color1">:data</code><code class="xhtml plain">=</code><code class="xhtml string">"tabledata"</code> <code class="xhtml plain">border </code><code class="xhtml color1">style</code><code class="xhtml plain">=</code><code class="xhtml string">"width: 100%"</code><code class="xhtml plain">></code>
</div>
<div class="line number3 index2 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code> <code class="xhtml plain">fixed </code><code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"date"</code> <code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"日期"</code> <code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"150"</code><code class="xhtml plain">> </</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number4 index3 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code> <code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"name"</code> <code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"姓名"</code> <code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"120"</code><code class="xhtml plain">> </</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number5 index4 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code> <code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"province"</code> <code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"省份"</code> <code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"120"</code><code class="xhtml plain">> </</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">> </code>
</div>
<div class="line number6 index5 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code> <code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"city"</code> <code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"市区"</code> <code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"120"</code><code class="xhtml plain">> </</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number7 index6 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code> <code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"address"</code> <code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"地址"</code> <code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"300"</code><code class="xhtml plain">> </</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number8 index7 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code> <code class="xhtml color1">prop</code><code class="xhtml plain">=</code><code class="xhtml string">"zip"</code> <code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"邮编"</code> <code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"120"</code><code class="xhtml plain">> </</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number9 index8 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-table-column</code> <code class="xhtml color1">fixed</code><code class="xhtml plain">=</code><code class="xhtml string">"right"</code> <code class="xhtml color1">label</code><code class="xhtml plain">=</code><code class="xhtml string">"操作"</code> <code class="xhtml color1">width</code><code class="xhtml plain">=</code><code class="xhtml string">"100"</code><code class="xhtml plain">></code>
</div>
<div class="line number10 index9 alt1">
<code class="xhtml spaces">  </code><code class="xhtml plain"><</code><code class="xhtml keyword">template</code> <code class="xhtml color1">scope</code><code class="xhtml plain">=</code><code class="xhtml string">"scope"</code><code class="xhtml plain">></code>
</div>
<div class="line number11 index10 alt2">
<code class="xhtml spaces">  </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-button</code> <code class="xhtml plain">@</code><code class="xhtml color1">click</code><code class="xhtml plain">=</code><code class="xhtml string">"handleclick(scope.row)"</code> <code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code> <code class="xhtml color1">size</code><code class="xhtml plain">=</code><code class="xhtml string">"small"</code><code class="xhtml plain">>查看</</code><code class="xhtml keyword">el-button</code><code class="xhtml plain">></code>
</div>
<div class="line number12 index11 alt1">
<code class="xhtml spaces">  </code><code class="xhtml plain"><</code><code class="xhtml keyword">el-button</code> <code class="xhtml color1">type</code><code class="xhtml plain">=</code><code class="xhtml string">"text"</code> <code class="xhtml color1">size</code><code class="xhtml plain">=</code><code class="xhtml string">"small"</code><code class="xhtml plain">>编辑</</code><code class="xhtml keyword">el-button</code><code class="xhtml plain">></code>
</div>
<div class="line number13 index12 alt2">
<code class="xhtml spaces">  </code><code class="xhtml plain"></</code><code class="xhtml keyword">template</code><code class="xhtml plain">></code>
</div>
<div class="line number14 index13 alt1">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table-column</code><code class="xhtml plain">></code>
</div>
<div class="line number15 index14 alt2">
<code class="xhtml spaces"> </code><code class="xhtml plain"></</code><code class="xhtml keyword">el-table</code><code class="xhtml plain">></code>
</div>
<div class="line number16 index15 alt1">
<code class="xhtml plain"></</code><code class="xhtml keyword">template</code><code class="xhtml plain">></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
</div>
<p>
多数 ide 在代码格式化时，都不会处理标签的属性。</p>
<p>
我们只能通过光标换行，然后在按删除的方式进行解决。</p>
<p>
那么接下来介绍的这个技巧，叫 “合并行”，能让我们快速的解决这个问题。</p>
<p>
<img title="学习Vim合并行的方法和技巧" alt="学习Vim合并行的方法和技巧" src="https://zhuji.jb51.net/uploads/img/202305/e929c158aefb54eb1860f9c7c5131c59.jpg"></p>
<p>
其实我们可以看出来，这个vim合并行，就好比是代码格式化一样的，让写出的代码更加容易读，格式更加好看，如果大家还有其他问题，可以在下面留言区讨论。</p>
<p>
原文链接：http://www.cnblogs.com/wubaiqing/p/7903244.html</p>

頁: [1]

琼殿技术论坛's Archiver

学习Vim合并行的方法和技巧