Quantcast
Channel: Vimタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 5608

Vimに慣れるためのミニドリル

$
0
0

主にJavaScriptのコーディング用としてVimを使い始めたのですがなかなか操作に慣れなかったので、空き時間に練習するための題材を考えてみました。実際のコーディング時に役に立つかどうかは微妙ですが、とりあえず指の運動にはなりそうです。

なお、個人的に横移動は全て fでやるように矯正したかったので、それ以外の横移動はつぶしています。

nnoremaph<nop>nnoremapl<nop>nnoremapw<nop>nnoremapb<nop>nnoremape<nop>nnoremap ge <nop>vnoremapw<nop>vnoremapb<nop>vnoremape<nop>vnoremap ge <nop>

変数名を置換する(打ち直す)|cw{chars}<Esc>

ある変数名を変更したい、という場面です。

開始カーソル位置は、1行目の先頭です。
私は、fh*Ncwpiyo<Esc>n.で練習しています。

Before
consthoge=1;console.log(hoge);
After
constpiyo=1;console.log(piyo);

変数名を置換する(プットする)|cw<C-r>0<Esc>

ある変数名を変更したい、という場面です。
ただし、変更後の変数名は既にヤンク済みで、それをプットしたいという場合です。

開始カーソル位置は、1行目の先頭です。
私は、fpyejFh*Ncw<C-r>0<Esc>n.で練習しています。

Before
constpiyo=1;hoge+=1;console.log(hoge);
After
constpiyo=1;piyo+=1;console.log(piyo);

スネークケースからキャメルケースに|f_qmxgUlq

スネークケースにしていた変数をキャメルケースに変更したい、という場面です。

開始カーソル位置は、1行目の先頭です。
私は、fh*Nf_qmxgUlq;@myiwncw<C-r>0<Esc>n.で練習しています。
なお、gUl~としたほうが手っ取り早いですが、打ちにくいです(私の場合)。

Before
consthoge_piyo_fuga=1;hoge_piyo_fuga+=1;console.log(hoge_piyo_fuga);
After
consthogePiyoFuga=1;hogePiyoFuga+=1;console.log(hogePiyoFuga);

変数をなにかで囲う|cw{chars}<C-r><C-o>"{chars}<Esc>

変数を、記号や関数などで囲いたい、という場面です。

開始カーソル位置は、1行目の先頭です。
私は、fhcwparseInt(<C-r><C-o>", 10)<Esc>jFp.で練習しています。

Before
consta=hoge;constb=piyo;
After
consta=parseInt(hoge,10);constb=parseInt(piyo,10);

関数全体を選択する|vf{]}

関数定義の全体を選択したい、という場面です。

開始カーソル位置は、1行目の先頭です。
私は、fc*Nffvf{]}dnviwpNdjで練習しています。
なお、]}%としたほうが手っ取り早いですが、打ちにくいです(私の場合)。

Before
constcompare=function(a,b){returna-b;};array1.sort(compare);
After
array1.sort(function(a,b){returna-b;});

離れた2つの単語を入れ替える|demmf{char}viwp`mP

2つの「離れた」単語を入れ替えたい、という場面です。

開始カーソル位置は、行の先頭です。
私は、fhdemmfpviwp`mPで練習しています。

Before
consta=hoge-piyo;
After
consta=piyo-hoge;

複数行をブロックで囲う|V>O{chars}<Esc>`>o{chars}<Esc>

いくつかの行をif文などのブロックで囲いたい、という場面です。

開始カーソル位置は、行の先頭です。
私は、jVj>Oif (fuga) {<Esc>`>o}<Esc>で練習しています。
方法はいくつも考えられますが、個人的には、囲いたい部分をビジュアルモードで選択することから始める方法が視覚的に分かりやすいと思います。

Before
hoge=1;piyo=1;foo=1;bar=1;
After
hoge=1;if(fuga){piyo=1;foo=1;}bar=1;

ifブロックをコピーしたelseを追加する|f{yaBgPI else <Esc>

もともとif文があり、中身が似たようなelseを追加したい、という場面です。

開始カーソル位置は、行の先頭です。
私は、f{yaBgPI else <Esc>j<C-a>で練習しています。

Before
if(fuga){hoge=0;}
After
if(fuga){hoge=0;}else{hoge=1;}

オブジェクトリテラルを縦書き?にする|f,a<C-j><Esc>viBs<C-j><C-r>"<C-j><Esc>

正しい用語が分からないのですが、JavaScriptのオブジェクトリテラルの書き方を、

a={hoge:1,piyo:2};

から

a={hoge:1,piyo:2};

にしたい、という場面です。

開始カーソル位置は、行の先頭です。
私は、f,a<C-j><Esc>;.viBs<C-j><C-r>"<C-j><Esc>で練習しています。

Before
constuser={name:"hoge",age:20,address:"fuga"};
After
constuser={name:"hoge",age:20,address:"fuga"};

変数宣言を1行にまとめる|jdWVkJF;r,

複数行に書いていた変数宣言を1行にまとめたい、という場面です。

例えば

leta=1;letb=1;letc=1;

leta=1,b=1,c=1;

にします。

開始カーソル位置は、先頭行の最初の文字です。
私は、jjdd.j..kk"1P.u.dWj.VkkJF;r,;.で練習しています。

Before
leta=1;console.log(a);letb=1;console.log(b);letc=1;console.log(c);
After
leta=1,b=1,c=1;console.log(a);console.log(c);console.log(b);

Viewing all articles
Browse latest Browse all 5608

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>