vim-swapを使うとTailwind CSSのクラス書く時便利

vim-swapとは

引数や配列などの、区切られた要素を並び替える変える作業を便利にするVimのプラグインです。
https://github.com/machakann/vim-swap

例を見てみましょう。


g>と入力するだけで、カーソル下の要素my-autoと次の要素text-smが入れ替わりました。
同様にg<ではカーソル下とその前の要素が入れ替わります。

もう一つ例を見てみましょう。


gsと入力すると、要素の色や下線の追加等の変化が起こりました。これが、並び替えのモードです。
続いてhで｢カーソル下と前の要素入れ替え｣、
lで｢カーソル下と次の要素の入れ替え｣が起こります。
最後に、Escapeでこのモードを抜けます。

さらにもう一例。


gsで並び替えのモードに入り、gを入力しました。すると、選択範囲(GIFではオレンジの箇所)が広がりました。これがグループ化です。
あとは、hやlを入力すれば、グループごとまとめて入れ替えることができます。

他の詳しい動作については、ドキュメント(日本語と英語両方あり)を読みましょう。
要素の並び替えや、テキストオブジェクトとしての機能などがあります。

vim-swapの設定

引数や配列の入れ替えはデフォルトの設定のままでも可能です。
ここでは、上の3つのGIFで示したclass="hoge1 hoge2 hoge3"ような、｢class="と"で囲まれた空白区切りの要素｣の並び替えを実現する設定を示します。

以下を vimrc に書けば設定を追加できます。

let g:swap#rules = deepcopy(g:swap#default_rules)
let g:swap#rules += [{
    \   'filetype': ['html', 'vue', 'md'],
    \   'delimiter': ['\s'],
    \   'surrounds': ['class="', '"', 0],
    \ },{
    \   'filetype': ['html', 'vue', 'md'],
    \   'delimiter': ['\s'],
    \   'surrounds': ["class='", "'", 0],
    \ }]

最初にデフォルトの設定をコピーし、その後に自分の設定を追加しているだけです。
"filetype"で動作させたいファイルタイプ(書かなくてもOK)、
"delimiter"で空白を区切りとし、
"surrounds"で囲み文字を指定します。0はネストが無いことを表します(書かなくてもOK)。
"delimiter" や "surrounds" は正規表現で指定します。

最後に

例で示した3つのGIFはVueファイルに書いたTailwind CSSですが、内容は超適当です。
また、Vim で Tailwind CSS を書くときはiamcco/coc-tailwindcssを使っています。

ちなみに、coc-tailwindcssのtailwindCSS.headwind.sortTailwindClassesコマンドを使用すれば、classのソートはできます(正確にはheybourn/headwindの機能らしい)。
が、僕は宗教上の理由でvim-swapを使っています。