Vim で最高の HTML 開発環境 (+Bootstrap) を整えよう

ひさびさに Vim 活をして、Vim で最高の HTML 環境を整えました。 HTML は今までほぼ何も設定してなかったのですが、久々に設定を弄ってみたら、便利なプラグインがたくさんあることに気付きました。軽くまとめてみたいと思います。

プラグインなしでのテクニックまとめ

ついでなのでプラグインを入れなくても使えるテクニックもまとめときます。

dit: タグ内を空にしてカーソルをタグの中へ移動
cit: タグ内を空にしてカーソルをタグの中へ移動 (＋クリップボードへコピー)
vit: タグ内の文字列を選択
dat: タグを削除
属性間のカーソル移動: W/B/E (正確には空白区切りで移動)

mattn/emmet-vim

あまりにも有名なので紹介だけ。使いこなせてませんが、特に便利なのは以下かなあ。

ul>li*    # 各行をリストに
ul>li*10  # リストをいっぱい作る
<C-y>d    # タグ選択
<C-y>k    # タグ削除

prabirshrestha/vim-lsp, neoclide/coc.nvim

LSP を利用した補完も、あまりにも有名なので紹介だけ。 prabirshrestha/vim-lsp, neoclide/coc.nvim なら HTML/CSS の補完もサポートしています。

andymass/vim-matchup

開始タグから終了タグへジャンプできるようになります。その逆ももちろん可能。様々な言語に利用できます。

sukima/xmledit

開始タグから終了タグへジャンプできるようになります。上記と被ってますが、他にも色々な機能 (下) があるため、HTML に限って言えばこちらのほうが便利です。一緒に入れても競合しない感じなので、そのまま入れてる。

選択状態で <Leader>x  # 選択タグをタグで囲む、属性も入力可能
<Leader>5  # 開始タグから終了タグへジャンプ
<Leader>%  # 開始タグから終了タグへジャンプ
<Leader>d  # タグ削除, etc.

othree/xml.vim

上記よりもっと高機能な編集機能があります。個人的イチオシはこれ。

<Leader>c  # タグ名を変更
<Leader>d  # タグを削除
選択状態で <Leader>v  # 選択範囲をタグで囲む

ArunSahadeo/Webval

W3C Validator API で Validation Check ができます。

vim-syntastic/syntastic

常にチェックするのであれば、Syntastic を使うと良いと思います。設定は以下のような感じ。チェックツールの設定 (htmlhint) 部分は公式を参考に。

Plug 'vim-syntastic/syntastic'
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
let g:syntastic_html_checkers = ['htmlhint']

tpope/vim-surround

文字列を " や ' で囲ったり削除したり、囲ったものを変更したりします。他には machakann/vim-sandwich も有名。

rhysd/vim-operator-surround

vim-surround より直感的に、文字列を " や ' で囲ったり削除したり、囲ったものを変更したりします。以下の設定で便利と思いますが、もっと高度な設定をしている人もいる。

Plug 'rhysd/vim-operator-surround'
Plug 'rhysd/vim-textobj-anyblock'
Plug 'kana/vim-textobj-user'
Plug 'kana/vim-operator-user'
map <silent>sa <Plug>(operator-surround-append)
map <silent>sd <Plug>(operator-surround-delete)
map <silent>sr <Plug>(operator-surround-replace)
nmap <silent>sdd <Plug>(operator-surround-delete)<Plug>(textobj-anyblock-a)
nmap <silent>srr <Plug>(operator-surround-replace)<Plug>(textobj-anyblock-a)

jvanja/vim-bootstrap4-snippets

Twitter Bootstrap をスニペットで超簡単に入力できるようになります。今までスニペットを使いこなせたことがなかったけど、このプラグインを入れて初めて、スニペットが便利だと思いました。こうやって使うんだなあ。公式の紹介画像 (下) のような自動補完の設定方法が最初よくわからなかったので、そこだけまとめておきます。

vim-lsp + asyncomplete.vim な人は以下のように設定できます。 coc.nvim な人も、ここには書きませんが簡単に設定できるみたい。スニペットの補完入力が不要ならばもっとシンプルな設定になりますが、補完入力は欲しいですよね。

let g:python3_host_prog = $PYENV_ROOT . '/shims/python3'

:

Plug 'prabirshrestha/vim-lsp'
Plug 'prabirshrestha/async.vim'
Plug 'prabirshrestha/asyncomplete.vim'
let g:asyncomplete_auto_popup = 0
Plug 'prabirshrestha/asyncomplete-lsp.vim'

Plug 'SirVer/ultisnips'
Plug 'honza/vim-snippets'
let g:UltiSnipsExpandTrigger=""
let g:UltiSnipsJumpForwardTrigger=""
let g:UltiSnipsJumpBackwardTrigger=""
let g:UltiSnipsEditSplit="vertical"
if has('python3')
  Plug 'SirVer/ultisnips'
  Plug 'honza/vim-snippets'
  Plug 'prabirshrestha/asyncomplete-ultisnips.vim'
endif
Plug 'thomasfaingnaert/vim-lsp-snippets'
Plug 'thomasfaingnaert/vim-lsp-ultisnips'

:

if has('python3')
  let g:UltiSnipsExpandTrigger=""
  call asyncomplete#register_source(asyncomplete#sources#ultisnips#get_source_options({
        \ 'name': 'ultisnips',
        \ 'whitelist': ['*'],
        \ 'completor': function('asyncomplete#sources#ultisnips#completor'),
        \ }))
endif

jvanja/vim-bootstrap4-snippets は欲を言えば、候補が多すぎて大変なのが玉に瑕だけど、よく使うところだけ覚えれば、かなり楽になります。設定してみて「なにこれ凄い！」と久々に感じました。やっぱり Vim は最高ですね。

ところで coc.nvim は言語サポートが凄いことになってきてて、coc-angular とか coc-flutter とか出てきている。 LSP はメソッドには強そうだけど、HTML みたいなテンプレート形式にはどうなるのだろうか。今後が気になる。

marmooo's blog

2019年12月23日月曜日