VS CodeのTypeScript拡張機能が突然動かなくなった時の解決法

Tasuke Hub管理人

東証プライム市場上場企業エンジニア

情報系修士卒業後、大手IT企業にてフルスタックエンジニアとして活躍。 Webアプリケーション開発からクラウドインフラ構築まで幅広い技術に精通し、複数のプロジェクトでリードエンジニアを担当。技術ブログやオープンソースへの貢献を通じて、日本のIT技術コミュニティに積極的に関わっている。

🎓情報系修士🏢東証プライム上場企業💻フルスタックエンジニア📝技術ブログ執筆者

VS CodeのTypeScript拡張機能が突然動かなくなる問題

TypeScriptで開発を行っていると、ある日突然VS Codeの拡張機能が動かなくなることがあります。コード補完が効かなくなったり、型エラーが表示されなくなったり、ジャンプ機能が使えなくなったりすると、開発効率が大幅に低下してしまいます。

この問題は、多くの開発者が一度は経験するものですが、原因がわかりにくいため解決に時間がかかることがあります。特に複数のプロジェクトを並行して進めている場合や、チームで開発している場合に起きやすい問題です。

本記事では、VS CodeのTypeScript拡張機能が突然動かなくなった時の診断方法と、具体的な解決策を紹介します。すぐに試せる対処法から、根本的な解決方法まで段階的に説明していきます。

// こんな状況に陥っていませんか？
// - 赤い波線が表示されない
// - コード補完の候補が出てこない
// - 定義へのジャンプ機能が動かない
// - エラーメッセージが「TypeScript language features are disabled」と表示される

TypeScript拡張機能が効かなくなる一般的な原因

VS CodeのTypeScript拡張機能が動かなくなる原因はいくつかありますが、主に以下のような問題が考えられます：

設定ファイルの競合: プロジェクトごとの設定とグローバル設定が競合している
キャッシュの破損: VS CodeやTypeScriptのキャッシュが破損している
TypeScriptのバージョン不一致: グローバルにインストールされたTypeScriptと、プロジェクトでインストールされたTypeScriptのバージョンが異なる
tsconfig.jsonの問題: 設定ファイルの構文エラーや不適切な設定
拡張機能の競合: インストールされている他の拡張機能と競合している

特に多いのは、複数のプロジェクトを切り替えながら作業しているときに発生するバージョン不一致や設定ファイルの競合です。

以下のようなエラーメッセージが出ている場合は、TypeScript拡張機能が正しく動作していないサインです：

[ts] Cannot find module 'xxx'.
[ts] Could not find a declaration file for module 'xxx'.
TypeScript language features are disabled

また、コードに明らかな型エラーがあるにもかかわらず、赤い波線が表示されない場合も問題が発生している可能性が高いです。

設定ファイルの競合を解決する方法

VS CodeとTypeScriptの設定ファイルの競合は、拡張機能が動かなくなる最も一般的な原因の1つです。この問題を解決するために、以下の手順を試してみましょう。

1. VS Codeの設定ファイルを確認する

まず、VS Codeのユーザー設定とワークスペース設定を確認します。特にTypeScriptに関連する設定がないか確認しましょう。

Ctrl + ,（または Cmd + ,）で設定を開く
右上の「{}」アイコンをクリックして、JSONファイルとして設定を編集する
以下のようなTypeScript関連の設定があるか確認する

// settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  // その他のTypeScript関連設定
}

2. tsconfig.jsonの確認と修正

次に、プロジェクトのtsconfig.jsonファイルを確認します。以下のような基本的な設定が正しいことを確認しましょう。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

特に注意すべき点は以下です：

includeとexcludeのパターンが正しいか
compilerOptionsの設定が他のプロジェクトと大きく異なっていないか
JSONの構文エラーがないか（カンマの抜け漏れなど）

3. 設定ファイルのクリーンアップ

もし問題が解決しない場合は、以下の手順で設定ファイルをクリーンアップしてみましょう：

.vscodeフォルダを一時的にリネームする（例：.vscode_backup）
VS Codeを再起動する
問題が解決した場合は、元の.vscodeフォルダから必要な設定のみを新しい.vscodeフォルダに移行する

# コマンドラインでの操作例
mv .vscode .vscode_backup
mkdir .vscode
# 必要なファイルのみをコピー
cp .vscode_backup/launch.json .vscode/

ワークスペースとグローバル設定の優先順位を正しく設定する

VS Codeでは、設定に優先順位があります。一般的に、ワークスペース設定はユーザー設定よりも優先されます。これによって、複数のプロジェクト間を行き来するときに問題が発生することがあります。

1. TypeScriptバージョンの選択をプロジェクトごとに設定する

プロジェクトごとにTypeScriptバージョンを明示的に指定することが重要です。以下の手順で設定しましょう：

VS Codeでプロジェクトを開く
コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）を開く
「TypeScript: Select TypeScript Version...」と入力して選択
「Use Workspace Version」を選択

これにより、プロジェクトごとにインストールされたTypeScriptバージョンが使用されるようになります。

// プロジェクト内にインストールされたTypeScriptのバージョンを確認
// package.jsonの一部
{
  "devDependencies": {
    "typescript": "^4.9.5",
    // その他の依存関係
  }
}

2. ワークスペース設定ファイルの作成

プロジェクトルートの.vscodeフォルダにsettings.jsonファイルを作成し、プロジェクト固有の設定を追加します：

// .vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.preferences.importModuleSpecifier": "relative",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

3. グローバル設定とワークスペース設定の違いを理解する

設定に問題がある場合は、VS Codeの設定エディタで「User」と「Workspace」の違いを確認することが重要です：

Ctrl + ,（または Cmd + ,）で設定を開く
検索ボックスに「typescript」と入力
設定の左側に「User」または「Workspace」というラベルが表示される
競合している設定がないか確認

競合を解決するには、グローバル設定（User）をデフォルト値に戻し、必要な設定はワークスペース設定（Workspace）でのみ行うようにするとトラブルが減ります。

キャッシュとテンポラリファイルをクリアする手順

キャッシュの破損はTypeScript拡張機能が正常に動作しなくなる原因の1つです。以下の手順でキャッシュをクリアしましょう。

1. VS Codeのキャッシュをクリアする

まず、VS Codeのキャッシュをクリアします：

VS Codeを閉じる
以下のフォルダを削除する（OSによって場所が異なります）

Windows:

# VS Codeの一時ファイルを削除
Remove-Item -Recurse -Force "$env:APPDATA\Code\Cache"
Remove-Item -Recurse -Force "$env:APPDATA\Code\CachedData"
Remove-Item -Recurse -Force "$env:APPDATA\Code\CachedExtensions"

macOS:

# VS Codeの一時ファイルを削除
rm -rf ~/Library/Application\ Support/Code/Cache
rm -rf ~/Library/Application\ Support/Code/CachedData
rm -rf ~/Library/Application\ Support/Code/CachedExtensions

Linux:

# VS Codeの一時ファイルを削除
rm -rf ~/.config/Code/Cache
rm -rf ~/.config/Code/CachedData
rm -rf ~/.config/Code/CachedExtensions

2. TypeScriptの一時ファイルをクリアする

次に、TypeScriptの一時ファイルをクリアします：

# プロジェクトルートで実行
rm -rf node_modules/.cache

3. JavaScript/TypeScriptサーバーをリセットする

VS Code内でTypeScriptサーバーをリセットします：

コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）を開く
「TypeScript: Restart TS Server」と入力して選択

これで言語サーバーが再起動され、多くの問題が解決します。

4. VS Code拡張機能のキャッシュをクリアする

特定の拡張機能が問題を引き起こしている可能性がある場合は、以下の手順を試してください：

VS Codeを閉じる
拡張機能フォルダを一時的にリネームする

Windows:

Rename-Item "$env:USERPROFILE\.vscode\extensions" "$env:USERPROFILE\.vscode\extensions_backup"

macOS:

mv ~/.vscode/extensions ~/.vscode/extensions_backup

Linux:

mv ~/.vscode/extensions ~/.vscode/extensions_backup

VS Codeを起動し、必要な拡張機能を再インストールする

全ての拡張機能を再インストールするのが面倒な場合は、元のフォルダを戻して、TypeScript関連の拡張機能のみを再インストールすることもできます。

// 問題が解決したかテストするためのサンプルコード
interface User {
  id: number;
  name: string;
  email: string;
}

// これでコード補完や型チェックが正常に機能するはずです
const user: User = {
  id: 1,
  name: "山田太郎",
  email: "yamada@example.com"
};

TypeScriptのバージョン不一致を解消する方法

TypeScriptのバージョン不一致は、拡張機能が動作しなくなる最も一般的な原因の1つです。特に複数のプロジェクトを切り替えながら作業する場合に問題が発生します。

1. インストールされているTypeScriptのバージョンを確認する

まず、グローバルとプロジェクトローカルにインストールされているTypeScriptのバージョンを確認します：

# グローバルにインストールされたTypeScriptのバージョンを確認
tsc -v

# プロジェクトにインストールされたTypeScriptのバージョンを確認
npx tsc -v

結果が異なる場合、バージョン不一致が問題の原因かもしれません。

2. プロジェクトごとのTypeScriptバージョンを使用するように設定する

VS Codeで特定のプロジェクトのTypeScriptバージョンを使用するように設定します：

// .vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib"
}

また、VS Codeのコマンドパレットから「TypeScript: Select TypeScript Version...」を選択し、「Use Workspace Version」を選ぶこともできます。

3. バージョンを統一する

もし頻繁に問題が発生する場合は、グローバルとローカルのTypeScriptバージョンを統一することを検討してください：

# グローバルにインストールされたTypeScriptを更新
npm uninstall -g typescript
npm install -g typescript@4.9.5  # プロジェクトで使用しているバージョンを指定

# あるいは、プロジェクトのTypeScriptを更新
npm uninstall typescript
npm install typescript@4.9.5 --save-dev

バージョンを統一すると、切り替え時の問題が減ります。

4. TypeScriptバージョンの競合を診断する

VS Codeには、TypeScriptバージョンの競合を診断するための機能があります：

コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）を開く
「TypeScript: Open TS Server Logs」と入力して選択
ログ内のエラーや警告を確認

// 以下のようなメッセージがログに出ていないか確認
// [Info  - 10:15:42] Using TypeScript version from ...
// [Error  - 10:15:43] Cannot find module ...

5. プロジェクト間を移動する際のベストプラクティス

プロジェクト間を頻繁に移動する場合、以下のベストプラクティスを守ることで問題を減らせます：

各プロジェクトにTypeScriptをローカルにインストールする
.vscode/settings.json ファイルでプロジェクト固有の設定を行う
プロジェクトごとに個別のVS Codeウィンドウを使用する（新しいウィンドウで開く）
プロジェクト間の移動後にTypeScriptサーバーを再起動する

// 問題が解決しない場合は、プロジェクトのTypeScriptバージョンを更新してみましょう
// package.jsonの例
{
  "devDependencies": {
    "typescript": "^4.9.5",  // 最新の安定版に更新
    // その他の依存関係
  }
}

以上の対処法を試しても問題が解決しない場合は、VS Codeのアンインストールと再インストールを検討してください。その際、ユーザー設定もリセットすると、より確実に問題を解決できる可能性があります。