vim で markdown を書いているときに prettier で整形する (プラグイン使わずに) #Vim

この記事は ACCESS Advent Calendar 2018、第 1 日目の記事です。
どうも、いつも元気な @pankona です。今年もぼちぼちアドカレやっていきます！

何の話か

さて今日は、vim を使って markdown を書いているときに、prettier を使って整形するやり方 (プラグインを使わずに) をシェアしたいと思います。
ちなみに、neovim でも同じやり方で導入可能です。

やれるようになること

vim で markdown を書いているときに、保存と同時に自動的に prettier による整形をかける
- 全体にかけるのはイヤだ？であればちょっと設定を変えて指定した範囲だけを対象にすることもできるぞ

導入方法

prettier をインストールし、実行バイナリへパスを通しておく。
- prettier のインストール手順は公式ウェブページのインストール手順を参照しておくれ。すまない。
次に、vimrc (neovim の場合は init.vim) に以下を追記する。

" [markdown] configure formatprg
autocmd FileType markdown set formatprg=prettier\ --parser\ markdown

" [markdown] format on save
autocmd! BufWritePre *.md call s:mdfmt()
function s:mdfmt()
    let l:curw = winsaveview()
    silent! exe "normal! a \<bs>\<esc>" | undojoin |
        \ exe "normal gggqG"
    call winrestview(l:curw)
endfunction

書いている内容を軽く解説すると、

これは「開いているファイルが markdown であるとき、保存したときに自動で全体に prettier による整形をかける」という内容
全体にかけるのではなくて指定した部分だけ整形したい、みたいなときは、冒頭二行だけ書く
- gq[モーション] で、指定の箇所だけ整形することができる。この例では保存時に gggqG を実行し、全体に整形を適用している
- もしくは Visual Block で範囲指定した状態で gq、みたいな使い方でも良い
- 後述の「表に対する整形機能」は非常に強力 (と私は感じる) ので、表の整形にだけ使う、みたいのでもいいと思うよ！

実際の整形例

たとえば以下のような気合の入ったガタガタな markdown も...

# prettier test



* test

    - hogehoge




| table  | table              |
  | -- | --- |
  | abc  | abcdef               |
 | ghi jklmn | op  |


text text


text     text          text          text

保存一発で、以下のようになります。

# prettier test

- test

  - hogehoge

| table     | table  |
| --------- | ------ |
| abc       | abcdef |
| ghi jklmn | op     |

text text

text text text text

この例で整形された点は、

2 つ以上の改行が入っているところは 1 つに
リストを書くときのマーカーをハイフンに統一
リストの段を下げるときのスペースを 2 個に統一
英単語の前後のスペースは一個に統一
表をキレイに

といったところでしょうか。なかなか良い気がします！
特に最後の 表をキレイに みたいのはとても嬉しい気がしますけどどうですか。
この機能のためだけでも prettier を導入する甲斐があるんじゃないかと思ったりします。

留意する点

prettier での markdown 整形はちょっと好みの分かれそうな振る舞いがあって、

リスト (箇条書き) を書くときのマーカーがハイフンで統一される (アスタリスクは使えない)
リストの段を下げるとき、スペース 2 個に統一される (4 個とかにできない)
英単語の前後にはスペース 1 個挿入される

このへんは好みが分かれるかもしれないな、と思いました。

このへんはもしかしたら設定で変えられるのかもしれませんが、やり方を見つけられませんでした。
もしかしたら変えられないのかもしれない？ (2018 年 12 月現在)

vim plugin ？

本稿で記載している機能と同等以上のことを実現するための vim plugin (prettier/vim-prettier) が存在しています。
本稿が vim plugin を用いた手法を紹介していない理由は、

たまたま近所に vim plugin を絶対に入れない同僚がいたので、そういう vim plugin がキライなミニマリストな方には需要があるかもしれません。
一応、 vim plugin を入れるよりもちょっとだけ導入が素早い可能性があります (vim plugin のインストールを省略できるという意味で) 。

おわりに

vim で markdown を書いているときに prettier で整形する方法を紹介しました。いかがでしたでしょうか。
特に表の整形はホントに便利で感極まること請け合いです。ぜひお試しあれ！
見てくれた方の vim ライフ (あるいは markdown ライフ) が少しでも良いものになれば幸いです。

明日の ACCESS Advent Calendar 2018 は @soebosi の登板です。お楽しみに！