## 経緯
[[Volar]]の[[Hybrid Mode]]を無効化して、そのまま[[TypeScript]]や[[Vue]]で使っていたが、意図通り動かない問題がいくつか出てきたのでこの機会に有効化してみる。問題が解決しなくても移行できれば良い。
- [[📝NeovimでVueのtemplate内で補完候補を選択すると挿入場所がおかしい]]
## 現状
これを見る限り、[[Nuxt]]固有の問題なので解決はしなそうにも見える。。
| 問題 | Vue | Nuxt |
| --------------------------------- | -------- | -------- |
| 補完候補を選択すると挿入場所がおかしい | **発生する** | **発生する** |
| templateタグを修正してもdiagnosticが更新されない | 発生しない | **発生する** |
| 明示的に `<C-space>` で補完しないと属性が表示されない | 発生しない | **発生する** |
| カーソル位置が正確に把握できてなさそう?? | 発生しない | **発生する** |
## 現状の設定
[[Volar]]だけを使って以下のように設定している。
```lua
-- VueだけでなくTypeScriptやReactもVolarを使う
lspconfig.volar.setup({
capabilities = capabilities,
filetypes = { "typescript", "javascript", "javascriptreact", "typescriptreact", "vue" },
init_options = {
vue = {
hybridMode = false,
},
typescript = {
tsdk = os.getenv("HOME")
.. "/.local/share/mise/installs/npm-typescript/latest/lib/node_modules/typescript/lib/",
},
},
on_new_config = function(new_config, new_root_dir)
local lib_path = vim.fs.find("node_modules/typescript/lib", { path = new_root_dir, upward = true })[1]
if lib_path then
new_config.init_options.typescript.tsdk = lib_path
end
end,
root_dir = util.root_pattern(
"package.json",
"manifest.json" -- Chrome Extension
),
})
```
## Volarの設定
[[nvim-lspconfig]]のドキュメントを読む。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
nvim-lspconfig/doc/configs.md at master · neovim/nvim-lspconfig
</div>
<div class="link-card-v2-content">
Quickstart configs for Nvim LSP. Contribute to neovim/nvim-lspconfig development by creating an account on GitHu ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/8ab81534065fad6382dd07183f77100c4dd645674a10f386d8db8d4614bc0ecc/neovim/nvim-lspconfig" />
<a href="https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md"></a>
</div>
[volarの説明](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#volar)を見る。
> **Hybrid Mode (by default)**
> In this mode, the Vue Language Server exclusively manages the CSS/HTML sections. You need the ts_ls server with the @vue/typescript-plugin plugin to support TypeScript in .vue files. See ts_ls section for more information
これを見る限り、単純に [[Volar]] を使うだけでも `<script>` 以外の部分は動きそうである。逆に言うと、**この対応で[[#現状]]が回復する可能性は極めて低そう**。
とりあえず設定を軒並み消して試してみる。
```lua
lspconfig.volar.setup({
capabilities = capabilities,
})
```
`<style>` のclassへジャンプできなくなったりと、色々挙動が怪しくなった気がする...が途中なので一旦無視。
## ts_lsの設定
[ts_ls](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#volar) の設定をする。
> [!attention]
> [[tsserver]]とは別なので注意。`ts_ls` は [[TypeScript Language Server]]
> **Vue support**
> As of 2.0.0, Volar no longer supports TypeScript itself. Instead, a plugin adds Vue support to this language server.
>
> IMPORTANT: It is crucial to ensure that @vue/typescript-plugin and volar are of identical versions.
[[Volar]] ([[@vue language-server|@vue/language-server]]) のバージョン2からは[[TypeScript]]のサポートが外れている。代わりに[[@vue typescript-plugin|@vue/typescript-plugin]]を使う。現状の[[@vue language-server|@vue/language-server]]のバージョンは2.2.8なのでその方針でOK。
先ほどの[[Volar]]設定と合わせて
```lua
lspconfig.ts_ls.setup({
capabilities = capabilities,
init_options = {
plugins = {
{
name = "@vue/typescript-plugin",
location = os.getenv("HOME")
.. "/.local/share/mise/installs/npm-vue-typescript-plugin/latest/lib/node_modules/@vue/typescript-plugin ",
languages = { "javascript", "typescript", "vue" },
},
},
},
filetypes = {
"javascript",
"typescript",
"vue",
},
})
lspconfig.volar.setup({
capabilities = capabilities,
})
```
## 確認
変化があったかを確認する。
### 対応前
| 問題 | Vue | Nuxt |
| --------------------------------- | -------- | -------- |
| 補完候補を選択すると挿入場所がおかしい | **発生する** | **発生する** |
| templateタグを修正してもdiagnosticが更新されない | 発生しない | **発生する** |
| 明示的に `<C-space>` で補完しないと属性が表示されない | 発生しない | **発生する** |
| カーソル位置が正確に把握できてなさそう?? | 発生しない | **発生する** |
### 対応後
| 問題 | Vue | Nuxt |
| --------------------------------- | -------- | -------- |
| 補完候補を選択すると挿入場所がおかしい | **発生する** | **発生する** |
| templateタグを修正してもdiagnosticが更新されない | 発生しない | 発生しない |
| 明示的に `<C-space>` で補完しないと属性が表示されない | ??? | ??? |
| カーソル位置が正確に把握できてなさそう?? | **発生する** | **発生する** |
カーソル位置については悪化したのか不安定なのかは何とも言えない。`<C-space>` の補完属性表示も前は表示されていたのに出なくなったような気もする...(たまに押さなくても出ることもあって謎)。
:`template` タグを修正した場合は通知されるケースとされないケースがある。
- 通知される
- [[Nuxt]]を使っており、[[📘完全武装をしてNeovimでも安全で快適なNuxt3の開発をするのだ]] の設定を適応しているケース
- 適応していないケースは未確認
- Vueでカスタムコンポーネントの属性が不正/必須がない場合
- 通知されない
- Vueで『通知される』ケース以外
対応前は無反応だった[[Nuxt]]が一通り反応できるようになったが、逆に[[Vue]]の方が一部ケースでは反応しなくなった... というよりもともとだったのかも。。
## 所感
少なくとも **『templateタグを修正してもdiagnosticが更新されない』** 問題は緩和した。他の不備は最悪ここで拾えるのでこのためだけでも対応の甲斐はあった。
ただ、オートコンプリートの補完位置がおかしくなる状態で使い続けるのは少し辛いと感じる。この問題が解消するまでは[[VSCode]]を使った方がいいかもしれない。。