Volar 2 + nvimでVue開発

はじめに

nvimを使ってVue3の開発をしていたところ、いつの間にかscript内のJavaScriptの補完がうまく効かなくなっていました。

どうやら、VueのLanguage ServerであるVolarのバージョンが2に上がったタイミングで補完がうまく動かなくなっているようでした。

動くように設定をしてみたので今回はそれについて書きたいと思います。

今回使ったツールのバージョンたちです。

使っているツール	バージョン
nvim	0.9.5
vue	3.3.4
mason-lspconfig.nvim	21d33d6
mason.nvim	3b5068f
nvim-lspconfig	b0749f9

動かした方法

コードを先に見たい方はこちらのcommitを参考にしてください。

tsserverをVueファイルを開いた時に起動するように設定しました。また、起動と同時に@vue/typescript-pluginをtsserverのプラグインとして読み込むようにしています。

mason.nvimに@vue/typescript-pluginのインストール候補が出てこなかった（2024-03-14現在）ので、手動でグローバルにインストールしました。

npm install -g @vue/typescript-plugin

グローバルにインストールしたら、tsserverでプラグインのパスを教えるために、どこにインストールされているかパスをチェックします。

自分はHomebrewでインストールしたnpmを使っているので、opt/homebrew配下にありました。パスを調べるコマンドも載せておきます。

npm list -g --depth=0

次にtsserverに設定をします（自分の設定ファイルから抜き出したものなので、もしかしたらカッコの位置などがずれているかもです）。

local lsp_config = require("lspconfig")
local mason_lspconfig = require("mason-lspconfig")
local capabilities = require("cmp_nvim_lsp").default_capabilities()
mason_lspconfig.setup()
mason_lspconfig.setup_handlers({
  function(server_name)
    local server_config = { capabilities = capabilities }
    if server_name == "tsserver" then
      server_config.init_options = {
        plugins = {
          {
            name = "@vue/typescript-plugin",
            location = "/opt/homebrew/lib/node_modules/@vue/typescript-plugin",
            languages = { "javascript", "typescript", "vue" },
          },
        },
      }
      server_config.filetypes = {
        "javascript",
        "typescript",
        "vue",
      }
      server_config.root_dir = lsp_config.util.root_pattern("package.json")
    end
    lsp_config[server_name].setup(server_config)
  end,
})

locationのパスは自分の環境によって設定を変えてみてください。Homebrewでインストールしたnpmを使っている人は同じパスっぽそうです。

これでVueファイルを開いたらtsserverが一緒に動いて、script内で補完が出るようになっているはずです。Language Serverの状態は:LspInfoで確認できます。

動作確認したのはVue3なので、Vue2だと追加で設定が必要かもです。

終わりに

Volarのバージョン2をnvimで動かすようにしました。Volarの動かし方がわからない間は、VS Codeに浮気をしていましたが、これでまたnvimでVue開発をできるようになりました！

はじめに

動かした方法

終わりに

参考文献