Neovimのbuiltin LSPとVolarを使ってVueのタグ補完をケバブケースにする

はじめに

最近 Vue のコードをNeovimと、 Language Server Protocol（LSP）にVolarを使っています。Vue2 のときは、Veturを使っていたのですが、公式で Volar をおすすめしているので乗り換えました。

しかし、Volar だと Vetur のときと違って一部の挙動が意図したものと違う箇所がありました。特に気になったのが、タグ名を書く時にケバブケース（kebab-case）で補完候補を出してほしいというのがありました。どうにかケバブケースで補完できるようになったので紹介します。

今回紹介するのはcoc-volarを使った説明ではありません（自分が coc を使ってないため…）。

ツール	バージョン
nvim	0.9.2
Volar(vue-language-server)	1.8.8
nvim-lspconfig	わからない

設定方法

先に動いた設定を紹介します。この設定を書いたら動きました。

local lsp_config = require("lspconfig")

lsp_config.volar.setup({
  settings = {
    vue = {
      complete = {
        casing = {
          tags = "kebab",
        },
      },
    },
  },
})

設定に至るまでに参考にしたもの

同じような悩み（Neovim でケバブケースにしたい）を抱えている人がいるらしくVolar の公式リポジトリにいくつか issue があがっていました。（参考 1、参考 2）

こちらの issueによると、LSP の規格にworkspace/configurationというものがあり、ここに設定のリクエストを送るとケバブケースになってくれるみたいな説明がありました（issue に書かれている設定をしても自分は動きませんでした…）。

Neovim の LSP の公式ドキュメントを見ると、settingsという項目に適切な設定を渡せばworkspace/configurationの設定ができそうに感じました。

settings: Map with language server specific settings. These are returned to the language server if requested via workspace/configuration. Keys are case-sensitive.

設定する場所はわかったのですが、Volar の何を設定すればケバブケースになるか分からなかったので、VSCode で提供しているVolar 公式プラグインの設定や、nvim-lspconfig の Volar の設定方法、ドキュメントを見ました。

VSCode の設定はぱっと見で分かりませんでしたが、VSCode の設定でkebabと検索したらそれっぽいものがでてきて、設定項目をkebabにしたら VSCode 上ではケバブケースになりました。settings.jsonを見ても、それっぽい設定が追加されていたのでそれを Lua にしました（後から気づいたのですが、coc-volarの方にもそれっぽい説明がありました）。

VSCodeで検索したときのスクショ

{
  "vue.complete.casing.tags": "kebab"
}

おまけ

あと、Neovim で LSP のデバッグをするときは、デバッグベルをdebugにするとログが全部出てくるのでおすすめです。ログファイルの場所は、:LspLogで直接開くか、:LspInfoで LSP の状態確認画面を開いた時にLanguage client log:のような箇所があってそこに書いているパスを開くと見れます。

vim.lsp.set_log_level("debug")

最後に

GitHub 上でvolar kebab + 言語を Lua に絞って検索しても良い感じに設定しきれず苦労しましたが、なんとかケバブケースで Vue のタグ補完をすることが出来ました。

Neovim の LSP の設定箇所や、設定したい LS の公式 VSCode プラグインの設定を見ればなんでも応用できそうだな〜と思いました。コツは掴んだので、次からはもう少し簡単に設定できそうです。あと Neovim は公式ドキュメントが結構充実していていいなと思いました。

はじめに

設定方法

設定に至るまでに参考にしたもの

おまけ

最後に

参考サイト