したいこと
HTML ファイルを Neovim で編集しているときに、別の CSS ファイルで記述したクラス名を自動補完したい。
例えば、以下の styles.css ファイルで定義した .test-class クラスを以下の index.html を編集している状態で自動補完の候補として提示してほしい。
...
.test-class {
width: 200px;
}
...
...
<div class=".tes <--- ここまで入力した段階で自動補完のオプションを提示してほしい
...
自動補完については、HTML と CSS の LSP をインストールしていると、同タイプのバッファー（例えば、.html ファイルならば他の .html ファイル）にあるクラス名などは自動補完できますが、この場合はファイルタイプが異なるため、候補として提示されません。
HTML と CSS の LSP を連携させることができれば実現できそうですが、調べた限りではそのような情報は見当たりませんでした。
VSCode の場合
VSCode では、プラグイン IntelliSense for CSS class names in HTML でこの機能が実現されています。ソースコードを覗くと、CSS ファイルからクラスを抽出するパーサーを使っているようです。
Neovim でこのようなプラグインは見当たりませんでした。この VSCode のプラグインに倣えば、Neovim 用の同様のプラグインが作れそうですね。また今度試してみようと思います。
代替策
自分の場合は、小規模のプロジェクトで単一の CSS ファイルしかないので、そのファイルに記述されているクラス名を自動補完できれば十分です。こちらはこのような状況での対応策になります。
自動補完にプラグイン nvim-cmp を利用している場合、プラグイン cmp-buffer でバッファーの内容を候補に追加できます。
デフォルトでは扱っているバッファーのみが対象のようなので、開いているすべてのバッファーを対象にするために以下の option を nvim-cmp の setup() 関数を実行するときに指定します。
詳細は ドキュメント にあります。
require("cmp").setup({
...
sources = cmp.config.sources(
{
-- Prioritize snippets
{ name = "luasnip", priority = 5 },
-- Uses LSP to provide auto-completions for variable_names, function_names etc.
{ name = "nvim_lsp", priority = 3, max_item_count = 20 },
-- Auto-complete any file/directory path
{ name = "path", priority = 3 },
-- Auto-complete any word in open buffers (not only current buffer)
{
name = "buffer",
keyword_length = 3,
max_item_count = 3,
-- ここから
-- 開いているすべてのバッファーを対象とする
option = {
get_bufnrs = function()
return vim.api.nvim_list_bufs()
end,
},
-- ここまで
},
}
),
})
この設定をした上で、HTML ファイルと CSS ファイルの両方を開いていれば、両方のバッファーの内容が候補に提示されます。開いているバッファーは :buffer コマンドで確認できます。
自分の手元では次のように、CSS で定義している .test-class クラスを HTML ファイルの中で自動補完できました。
こちらの方法には上記の VSCode プラグインに対する優位点もあります。VSCode のプラグインでは HTML ファイル編集時に CSS ファイルで定義したクラス名を自動補完できますが、逆は対応していないようです。すなわち、HTML ファイルでクラスを先に指定し、その後、CSS ファイルでクラスを定義するときに、クラス名の自動補完は利用できません。
それに対し、こちらの代替案はそのような場合でも利用できます。
検証環境
念のため自分が利用しているバージョンをおいておきます。
- Neovim version --> NVIM v0.10.0-dev
- Autocomplete plugin --> nvim-cmp (Commit Id 538e37b)
- Autocomplete source --> cmp-buffer (Commit Id 3022dbc)
まとめ
長くなりましたが、要は nvim-cmp と cmp-buffer プラグインを利用して、開いているすべてのバッファーの単語を自動補完に候補に追加することで、CSS や HTML ファイルのクラス名を自動補完できるようにしました。