きっかけ

研修でNuxtの開発を行った際、NeovimのLSPのセットアップで多少苦戦したので備忘録として残しておきます。

余談ですが、ちょっと前にCorvusSKKを導入しました。

前提条件

表題の通り、今回はbuilt-in LSPを使用するので、以下のプラグインが導入されていることを前提とします。

neovim/nvim-lspconfig
williamboman/mason.nvim
williamboman/mason-lspconfig.nvim

とりあえずLSPを入れる

とりあえず、開発を快適に行うためにVueとTypeScriptのLSPをインストールします。

:MasonInstall vue-language-server typescript-language-server

mason-lspconfig.nvimの方で(setup_handlersとかで)LSPを自動で設定するようにしていれば、<template>や<style>内では入力補完が効くようになります。しかし、<script>タグ内でTypeScriptを書こうとすると、途端に補完が効かなくなるという事象が発生します。何なら警告表示も出ないです。

VueでTypeScriptのプラグインを使えるようにする

そもそもこの問題が起こる原因は、現行のVolarではTypeScriptのサポートが別のプラグインへと移行しているためです。そこで、nvim-lspconfigの設定で、Vueのプラグインを有効化します。

この方法はnvim-lspconfigのserver_configurations.mdにも掲載されていますが、これをそのまま行うには@vue/typescript-pluginをグローバルにインストールしなければなりません。グローバルの環境が汚れるのは可能な限り避けたいので、mason経由でセットアップします。

masonでvolarを入れると、typescript-pluginも一緒に入ります。↓のようにすることで、mason経由でインストールしたプラグインの場所を取得することができます。

require("mason-registry").get_package("vue-language-server"):get_install_path() .. "/node_modules/@vue/language-server/node_modules/@vue/typescript-plugin"

これを、lspconfigのserver_configurations.mdを見ながらいい感じに↓のように設定すると、.vueファイルの<script>内でも入力補完やDiagnostics表示が使えるようになります。

require("mason-lspconfig").setup_handlers({
        -- ...configs for other LSP
        
        ["tsserver"] = function()
          -- ↓先述
          local vue_typescript_plugin = require("mason-registry").get_package("vue-language-server"):get_install_path() .. "/node_modules/@vue/language-server/node_modules/@vue/typescript-plugin"

          lspconfig["tsserver"].setup({
            init_options = {
              plugins = {
                {
                  name = "@vue/typescript-plugin",
                  location = vue_typescript_plugin,
                  languages = { "javascript", "typescript", "vue" },
                },
              },
            },
          })
        end,
      })