VSCodeのIntellisenseがNextjs 13のapp/**/page.tsxで効かない問題

TL;DR

default exportをワンライナーで書かなければ大丈夫です。

// NG
export default function HogeNG() {
}

//OK
function Hoge() {
}

export default Hoge

このように、分けて書けばIntellisenseが復活します。

以下詳細です。

どういう問題？

1. Nextjs 13にてApp directoryを有効にする
2. /app/**/page.tsxにてdefault exportをワンライナーで書く
3. intellisenseが効かない！

という問題です。

おま環かと思って調べまくりましたが、既にissueが建ってました。

https://github.com/vercel/next.js/issues/44291

なんで起こるの？

Nextjs 13にてApp directoryを有効にすると、強制的に下記の設定が書き込まれます。

.vscode/settings.json

{
    // IntelliSense に使用する、TypeScript インストールの下にある tsserver および lib*.d.ts ファイルのフォルダー パスを指定します。
    "typescript.tsdk": "node_modules\\typescript\\lib",

    // ワークスペースで Intellisense 用に構成されている TypeScript バージョンを使用することについてユーザーへの確認を有効にします。
    "typescript.enablePromptUseWorkspaceTsdk": true
}

これらの設定によって、VSCodeが参照するTypeScriptがグローバルからtypescript.tsdkに指定されたものになるようです。

RemVN氏が言うには

maybe a bug from custom typescript plugin of nextjs

との事です。おま環じゃなかった！

解決策は？

default exportをワンライナーで書かない事です。

// NG
export default function HogeNG() {
}

//OK
function Hoge() {
}

export default Hoge

ちなみに、.vscode/settings.jsonを消したり設定変更すりゃいいじゃん！と思って

• .vscode/settings.jsonの削除
• 設定のコメントアウト
• 設定の変更

をやりましたがnextjsを実行する度に強制上書きでした。ぐぬぬ。