CHROMA

世の中の "当たり前" を確認する

マークアップや文章の編集をちょっと楽にする

Dev

Vim Advent Calendar 2014 19日目。

初めに、僕は普段主に HTML と CSS、それとブログ記事などの文章を Markdown で書いてる。

今回はこれらのコードを Vim で編集する中で、今まで不満に思いながらも放置していたことを解消したいと思う。

また、問題の解決にあたっては去年の Vim Advent Calender や Web 上に公開されているドキュメント、Vim に用意されているヘルプに大変お世話になった。感謝の念が絶えない。

指定範囲の折り畳み

コードの閲覧や編集中、特定の箇所以外のコードが視覚的に邪魔になることがある。そんなときには Vim の折り畳みを使おう。

.vimrc に以下を追記。

set fdm=indent

折り畳み範囲は {{{ を開始位置とし、}}} を終了位置として指定する。

<!-- Header {{{ -->
<header>
  <h1 class="logo"> ... </h1>
  <nav class="nav"> ... </nav>
</header>
<!-- }}} -->

各種コマンドで折り畳みの作成や削除、開閉を行う。

  • zf ... 作成
  • za ... 開閉
  • zd ... 削除

参考

ファイルのアウトラインを表示

HTML や JavaScript を書いているとき、ブログ記事を書いているときなどはアウトラインをどこかに表示したい。

これには unite-outline プラグインを使う。

.vimrc に以下を追記し、プラグインを使えるようにする。

NeoBundle 'h1mesuke/unite-outline'

アウトラインを表示する。

:Unite outline

垂直分割でアウトラインを表示させたい場合は -vertical オプションを付ける。

:Unite -vertical outline

参考

インデントの可視化

いらないかと思ってたけど、数ヶ月前自分が書いたファイルを最近になって開いてみるとインデントが正しく取れてないものがいくつもあった... 。編集中から気をつけるためにも、インデントを目で見てわかりやすくしておく。

indentLine プラグインを使う。.vimrc に追記。

NeoBundle 'Yggdroot/indentLine'

可視化したインデントのラインの色なども変更できるみたいだけど、今はデフォルトのもので特に不満がないのでこのままに。

参考

インデントの自動挿入

以下を .vimrc に追記。

set autoindent

以上... 。

参考

文字数のカウント

ビジュアルモードでカウントしたい範囲を選択し、g <CTRL-g> コマンドを使うと選択範囲の文字数をステータスラインに表示してくれる。

例えば「てきすとテキスト」という文字列をカウントした場合は以下のような結果が得られる。8 of 2740 Chars で文字数 8がカウントされたことがわかる。

Selected 1 of 133 Lines; 1 of 236 Words; 8 of 2740 Chars; 24 of 4936 Bytes

参考

HTML の開始タグと終了タグの移動

CSS や JavaScript ではほとんど { と } を % を使って移動をするだけなので問題ない。

しかし、これでは HTML を編集する場合などに開始タグと終了タグの移動ができないので vim-matchit を使う。

.vimrc に以下を追記。

NeoBundle 'tmhedberg/matchit'

昔入れてたこのプラグインは今年頭に一旦外したんだけど、HTML を編集するときはこれが無いとやっぱりつらい。改めて便利だと思った。

参考

ウィンドウの分割領域を少しずつ変更したい

ウィンドウ幅や高さをを少しだけ大きくしたり、小さくしたい時なんてのがある。<CTRL-w> { >, <, +, - } でこれはできるけど、幅や高さを少し変更するときに何度もコマンドを打つのはしんどい。

vim-submode というのを使うと微妙な分割領域を変更するのが大分楽になる。例えば <CTRL-w> > で Submode に入り、このモードに入っている間は > や < だけでウィンドウ幅の変更ができる。便利。

実際に vim-submode を使うには、プラグインの追加と合わせていくつかの設定を行う。

NeoBundle 'kana/vim-submode'

" vim-submode setting
call submode#enter_with('winsize', 'n', '', '<C-w>>', '<C-w>>')
call submode#enter_with('winsize', 'n', '', '<C-w><', '<C-w><')
call submode#enter_with('winsize', 'n', '', '<C-w>+', '<C-w>-')
call submode#enter_with('winsize', 'n', '', '<C-w>-', '<C-w>+')
call submode#map('winsize', 'n', '', '>', '<C-w>>')
call submode#map('winsize', 'n', '', '<', '<C-w><')
call submode#map('winsize', 'n', '', '+', '<C-w>-')
call submode#map('winsize', 'n', '', '-', '<C-w>+')

あと、vim-submode は関係ないけど、ファイルを開くときにウィンドウの領域を指定するには :vs や :sp に引数を持たせてあげれば良いみたい。CSS ファイルを狭いウィンドウで開きたいとかよくある。

:50vs style.css
:10sp article.md

参考