要約
Visual Studio Code(以下VS Code)で以下のメッセージが出てTypeScriptのコード補完が効かなくなりました。
To enable project-wide JavaScript/TypeScript language features,
exclude large folders with source files that you do not work on.
TypeScriptのコード補完をする対象ファイルのサイズが大きすぎたようで、tsconfigで大きいサイズのファイル（今回だとnuxtのoutput）をexcludeしたら治りました。
{
// ...
// @ext:vscode.typescript-language-features
// ファイルサイズがTypeScriptのコード補完できるサイズを超えているというエラーの回避用
+"exclude": [
+ "output/public/_nuxt/",
+ ]
}
エラー解決の手順
- JavaScript,TypeScriptのコード補完を有効にするために、作業しないソースファイルがある大きなフォルダーを除外してくださいという通知がでる
- VS Codeで
@ext:vscode.typescript-language-featuresの設定を変更し、tsserverのlogファイルを出力する - logからファイルサイズ超過の原因となるファイルを特定
- 該当ファイルを
tsconfigでexclude
経緯
1. ファイルが大きすぎて補完が効かないというエラーが発生
VS Codeで編集していると、以下のメッセージが出てきました。
To enable project-wide JavaScript/TypeScript language features,
exclude large folders with source files that you do not work on.
プロジェクト全体のJavaScript/TypeScript言語機能を有効にするためには、作業しないソースファイルがある大きなフォルダーを除外してくださいというメッセージでした。
2. typescript-language-featuresのlogを出力する
調べたところ、TypeScriptのリポジトリで今回の問題に対する議論が上がっており、結論、VS Codeに組み込まれているtypescript-language-featuresが原因であることがわかりました。
tsserverのlog出力と確認手順
上記リンク先にも記載がありますが補足します。
初めに、VS Code右上の三点リーダーからconfigure editorを選択し、検索バーに@ext:vscode.typescript-language-features logと入力します。
次に、tsserverのlogを出す設定をします。初期設定ではTypeScript>Tsserver:logがoffになっているのでnormalを選択してください。
最後に、tsserverのlogがどこに出力されているかを特定します。VS Codeのterminal画面にOUTPUTがあるので、そこでTypeScriptを選択すると、tsserver.logが見つかります。
3. tsserver.logでエラーの原因を特定
先ほど見つけたtsserver.logを確認します。まず、Could not find source fileが出ており、tsserverがファイルが読み込めていないことが確認できました。
Error: Could not find source file:
'/Users/name/project/client/componenTypeScript/atom/InputField/index.vue'.
続けて、以下のようにNon TS file size exceeded limitが確認できました。この後に続くフォルダーがエラーメッセージの原因だと考えられます。
今回はnuxtをbuildした後のファイル（output/public/_nuxt）がtsserverで読み込む対象に含まれており、読み込み可能なファイルサイズを超えてしまいました。
Info 12 [09:58:13.648] Non TS file size exceeded limit (21175977).
Largest files: /Users/name/project/client/output/public/_nuxt/BYFg9WlK.js:555803,
/Users/name/project/client/output/public/_nuxt/CFAdppzp.js:555803,
/Users/name/project/client/output/public/_nuxt/JazV3xHV.js:555803,
/Users/name/project/client/output/public/_nuxt/V42d_FHD.js:555803,
/Users/name/project/client/output/public/_nuxt/i7pFhaQ6.js:555803
4. tsconfig.jsonでファイルサイズが大きなファイルをtsserverの監視対象から除外
TypeScriptのlanguage serverがtsconfigから設定を読み込んでいるlog
Info 28 [09:58:19.567] getConfigFileNameForFile:: File: Grid.story.vue ProjectRootPath: client:: Result: /Users/name/project/client/tsconfig.json
Info 29 [09:58:19.567] getConfigFileNameForFile:: File: Grid/index.vue ProjectRootPath: client:: Result: /Users/name/project/client/tsconfig.json
Info 30 [09:58:19.567] getConfigFileNameForFile:: File:BasicPlanConfirm/index.test.TypeScript ProjectRootPath: client:: Result: /Users/name/project/client/tsconfig.json
先ほど、Non TS file size exceeded limitの原因がoutput/public/_nuxtであることが分かりました。logを見るとtsserverはtsconfigで設定を読み込んでいることが分かったので、対象となるファイルをexcludeしました。
tsconfig.json
+ "exclude": [
+ "output/public/_nuxt/",
+ ]
これで無事補完が効くようになりました！
Discussion