[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。

はじめに

vue公式の拡張機能のバージョンアップにより、VSCodeで開発するときに推奨される拡張機能や設定に変更がありました。

非推奨の設定のままの人は、多分以下のような通知が出てると思うので、直しましょう。

今までの推奨設定

Vue - Officialをインストールする
TypeScript Vue Plugin (Volar)をインストールする
テイクオーバーモードを有効にする

今後の推奨設定

Vue - Officialをインストールする

新しく設定する人がやること

Vue - Officialのインストール

Vue - Officialをインストールする

今までの推奨設定をしていた人がやること

TypeScript Vue Plugin (Volar)のアンインストール

TypeScript Vue Plugin (Volar)が非推奨になったので無効に、もしくはアンインストールします。
Volarの機能自体が非推奨になったわけではなく、Vue Language Featuresに機能が統合されたため、インストールが非推奨になりました。

1. 拡張機能で「TypeScript Vue Plugin (Volar)」を検索
2. 無効もしくはアンインストールする。
   

テイクオーバーモードを無効にする

今まではVolarとVSCodeに組み込まれているTypeScriptの言語サービスが競合しパフォーマンスが低下する可能性があったため、組み込みサービスを無効化するテイクオーバーモードという機能がありました。
今回のアップデートではそのままでもテイクオーバーモードと同じパフォーマンスを持つようになっため、設定が不要になりました。

1. 拡張機能で検索フォームで@builtin typescriptを検索する。

2. 「TypeScript と JavaScript の言語機能」の歯車ボタンをクリックする

3. 無効（テイクーオーバーモードが有効）になっていたら、有効にするをクリックする。