## 事象
プロジェクトにインストールしている[[TypeScript]]ではなく、グローバルの[[TypeScript]]を見てしまっていそう。
`nvim/after/lsp/vtsls.lua`
```lua
local vue_language_server_path = os.getenv("HOME")
.. "/.local/share/mise/installs/npm-vue-language-server/latest/lib/node_modules/@vue/language-server"
local vue_plugin = {
name = "@vue/typescript-plugin",
location = vue_language_server_path,
languages = { "vue" },
configNamespace = "typescript",
}
return {
workspace_required = true,
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,
},
},
},
typescript = {
preferences = {
importModuleSpecifier = "non-relative",
},
},
javascript = {
preferences = {
importModuleSpecifier = "non-relative",
},
},
},
filetypes = { "typescript", "javascript", "javascriptreact", "typescriptreact", "vue" },
}
```
### 環境
| 対象 | バージョン |
| ------------------ | -------------------- |
| [[macOS]] | 15.7.4 |
| [[Neovim]] | 1.2.5 |
| [[nvim-lspconfig]] | `d8bf4c4` |
| [[vtsls]] | 0.3.0 |
| [[TypeScript]] | `6.0.0-dev.20260302` |
## 原因
[[vtsls.autoUseWorkspaceTsdk]]が有効になっていないため。指定しなければデフォルトは `false`。
```console
$ vtsls --print-config-schema | jq '.properties.["vtsls.autoUseWorkspaceTsdk"]'
{
"default": false,
"type": "boolean",
"description": "Automatically use workspace version of TypeScript lib on startup. By default, the bundled version is used for intelliSense."
}
```
## 解決方法
以下2つを有効にする。
- [[vtsls.autoUseWorkspaceTsdk]]
- [[vtsls.tsserver.globalPlugins.enableForWorkspaceTypeScriptVersions]]
- [[@vue typescript-plugin|@vue/typescript-plugin]]を使っていないなら不要
```diff
local vue_plugin = {
name = "@vue/typescript-plugin",
location = vue_language_server_path,
languages = { "vue" },
configNamespace = "typescript",
+ enableForWorkspaceTypeScriptVersions = true,
}
```
```diff
settings = {
vtsls = {
+ autoUseWorkspaceTsdk = true,
tsserver = {
globalPlugins = {
vue_plugin,
},
},
},
```
## 参考
> [!left-bubble] ![[chappy-mini.webp]]
> • 原因はこの設定にあります。vtsls には Vue plugin は渡せていますが、「ワークスペースのTypeScript を使う」設定が入っていません。
>
> 今の設定だと vtsls はデフォルトで bundled/global 側の TypeScript を使います。vtsls --print-config-schema でも vtsls.autoUseWorkspaceTsdk のデフォルトは false です。なので pnpm check が
[email protected] を使えていても、LSP は別の TS を見ている、という状態になります。
>
> 追加すべき設定はまずこれです。
> ```lua
> settings = {
> vtsls = {
> autoUseWorkspaceTsdk = true,
> tsserver = {
> globalPlugins = {
> vue_plugin,
> },
> },
> },
> typescript = {
> tsdk = "./node_modules/typescript/lib",
> preferences = {
> importModuleSpecifier = "non-relative",
> },
> },
> javascript = {
> preferences = {
> importModuleSpecifier = "non-relative",
> },
> },
> }
> ```
> ポイントは 2 つです。
>
> - vtsls.autoUseWorkspaceTsdk = true
> - typescript.tsdk = "./node_modules/typescript/lib"
>
> 通常は前者だけでも足りますが、typescript6 のような先行版を確実に踏ませたいなら後者も入れて明示した方が安定です。
>
> [!left-bubble] ![[chappy-mini.webp]]
> • 原因はほぼこれです。vtsls の globalPlugins は、workspace の TypeScript を使うとデフォルトで無効になります。
>
> vtsls の schema にそのまま書かれていて、enableForWorkspaceTypeScriptVersions の説明は次で
> す。
>
> - By default, global plugins won't be enabled when workspace version of tsdk is used. Set
> to true to switch this behavior.
>
> つまり今回の流れはこうです。
>
> - autoUseWorkspaceTsdk = true を入れた
> - vtsls がプロジェクト側の TypeScript を使うようになった
> - その結果 @vue/typescript-plugin が globalPlugins 扱いのまま無効になった
> - .vue の `<script>` 部分が解釈されなくなった
>
> 対処は vue_plugin にこれを足すことです。
> ```lua
> local vue_plugin = {
> name = "@vue/typescript-plugin",
> location = vue_language_server_path,
> languages = { "vue" },
> configNamespace = "typescript",
> enableForWorkspaceTypeScriptVersions = true,
> }
> ```
> 要するに、今回必要なのは
>
> - vtsls.autoUseWorkspaceTsdk = true
> - vtsls.tsserver.globalPlugins[].enableForWorkspaceTypeScriptVersions = true
>
> のセットです。
>
> 補足すると、Nuxt 4 側で typescript が workspace に入っていない、または root_dir が Nuxt のルートを外している場合も似た症状になります。ただ、今回の症状変化は autoUseWorkspaceTsdk を入れた瞬間に起きているので、第一原因は plugin 無効化でまず間違いありません。