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

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

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

nnoremap h <nop>
nnoremap l <nop>
nnoremap w  <nop>
nnoremap b  <nop>
nnoremap e  <nop>
nnoremap ge <nop>
vnoremap w  <nop>
vnoremap b  <nop>
vnoremap e  <nop>
vnoremap ge <nop>

変数名を置換する（打ち直す）｜cw{chars}<Esc>

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

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

Before

const hoge = 1;
console.log(hoge);

After

const piyo = 1;
console.log(piyo);

変数名を置換する（プットする）｜cw<C-r>0<Esc>

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

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

Before

const piyo = 1;
hoge += 1;
console.log(hoge);

After

const piyo = 1;
piyo += 1;
console.log(piyo);

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

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

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

Before

const hoge_piyo_fuga = 1;
hoge_piyo_fuga += 1;
console.log(hoge_piyo_fuga);

After

const hogePiyoFuga = 1;
hogePiyoFuga += 1;
console.log(hogePiyoFuga);

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

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

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

Before

const a = hoge;
const b = piyo;

After

const a = parseInt(hoge, 10);
const b = parseInt(piyo, 10);

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

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

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

Before

const compare = function(a, b) {
    return a - b;
};

array1.sort(compare);

After

array1.sort(function(a, b) {
    return a - b;
});

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

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

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

Before

const a = hoge - piyo;

After

const a = 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

const user = {name: "hoge", age: 20, address: "fuga"};

After

const user = {
    name: "hoge",
    age: 20,
    address: "fuga"
};

変数宣言を１行にまとめる｜jdWVkJF;r,

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

例えば

let a = 1;
let b = 1;
let c = 1;

を

let a = 1, b = 1, c = 1;

にします。

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

Before

let a = 1;
console.log(a);

let b = 1;
console.log(b);

let c = 1;
console.log(c);

After

let a = 1, b = 1, c = 1;
console.log(a);
console.log(c);
console.log(b);