NeovimでDeno + Vueを開発

はじめに

久しぶりにVueの開発をしたいなと思い、Neovim(nvim)で立ち上げたところCould not find vtsls or ts_ls lsp client, vue_lsと表示されうまく立ち上がりませんでした。

原因を切り分けるために色々調べると、DenoでVueの開発環境を作成したプロジェクトだとうまく動いてないことが分かりました。

今回は自分が試して動いた設定を紹介します。設定したコードを見たい方はdot_filesとして公開しているので、こちらのcommitを参考にして下さい。

ツールのバージョン

MasonでLSを入れて、nvim-lspconfigを使って設定を書いてます。今回使用している各ツールのバージョンは以下の通りです。

ツール	バージョン
nvim	v0.11.5
nvim-lspconfig	57e5a8a(commitバージョン)
@vue/language-server(vue_ls)	3.2.1
vtsls	0.3.0

設定

nvimのバージョンがv0.11.5で新しい設定方法を使えるので今回はそちらを使います。新しい設定方法ではlspディレクトリに各LSPの設定ファイルを追加します。

さらに今回は、nvim-lspconfigを使っているのでlua/lsp に設定を書くのではなく、after/lsp に設定を書きます。afterに追加しないとlua/lsp の設定を読み込んだ後にnvim-lspconfigの設定で上書きされて、自分の設定が有効になりません。

.
├── after
    └── lsp
        └── vtsls.lua

新しい設定ではLS名+.lua で設定ファイルを追記すれば勝手に読み込まれます。今回はvtslsを使うので、ファイル名はvtsls.luaになります。

vtsls.luaの設定はこちらです。

local vue_language_server_path = vim.fn.expand("$MASON/packages")
  .. "/vue-language-server"
  .. "/node_modules/@vue/language-server"

local tsserver_filetypes = { "typescript", "javascript", "javascriptreact", "typescriptreact", "vue" }

local vue_plugin = {
  name = "@vue/typescript-plugin",
  location = vue_language_server_path,
  languages = { "vue" },
  configNamespace = "typescript",
}

return {
  root_dir = function(bufnr, on_dir)
    local root_markers = { "package.json", "tsconfig.json", "jsconfig.json" }
    local project_root = vim.fs.root(bufnr, root_markers)
    on_dir(project_root)
  end,
  settings = {
    vtsls = {
      tsserver = {
        globalPlugins = {
          vue_plugin,
        },
      },
    },
  },
  filetypes = tsserver_filetypes,
}

ポイントはroot_dir です。公式wikだとroot_markers で指定しているのですが、どうやら、どこかのバージョンでroot_dirに指定が変わったようです（参考）。

vue_lsの設定はnvim-lspconfigが自動で読み込んでくれるので今回は設定を追加しませんでした。

終わりに

LSとしてvue_lsとvtslsを使って、Deno + Vue をnvim上で開発できるようにしました。nvimの新しい設定方法に慣れておらず、afterに設定を追加してなかったり、roo_markes を使っていたので全然動かなかったのですがやっと補完が効くようになりました。

開発環境も整ったのでこれからVueの開発を進めていきたいと思います。

はじめに

ツールのバージョン

設定

終わりに

参考文献