【徹底解説】Visual Studio CodeでTypeScriptファイルのエラーを完全網羅！開いているファイルだけじゃない、あのエラーもこれで解決！
Visual Studio Codeで開いていないTypeScriptファイルのエラーを表示する方法
しかし、デフォルト設定では、VSCodeは開いているファイルのみを解析し、開いていないファイルのエラーは表示されません。これは、プロジェクトの大規模な場合は特に、問題となる可能性があります。
幸いなことに、VSCodeの設定を調整して、開いていないファイルのTypeScriptエラーを表示することができます。以下に、2つの方法を紹介します。
方法 1：タスクを使用する
.vscodeフォルダにtasks.jsonファイルを作成します。- 以下の内容を
tasks.jsonファイルに追加します。
{
"version": "2.0.0",
"tasks": [
{
"label": "TypeScriptコンパイル",
"command": "tsc",
"problemMatcher": [
{
"pattern": {
"message": "$c"
},
"owner": "typescript",
"severity": "error"
}
],
"runOptions": {
"runOn": ["save", "watch"]
},
"type": "task"
}
]
}
- VSCodeで、「表示」 > 「コマンドパレット」 を開きます。
- 「タスク: タスクの実行」 と入力し、 Enter キーを押します。
- 「TypeScriptコンパイル」 タスクを選択します。
これで、ファイルを保存するたびに、またはVSCodeの監視機能が有効になっている場合は、VSCodeがプロジェクト内のすべてのTypeScriptファイルをコンパイルし、開いていないファイルのエラーを表示します。
方法 2：設定を使用する
- VSCodeで、「コード」 > 「設定」 を開きます。
- 「TypeScript」 と検索します。
- 「TypeScript: プロジェクト内のすべてのファイルのチェック」 設定を 「true」 に設定します。
この設定を有効にすると、VSCodeはプロジェクト内のすべてのTypeScriptファイルを起動時にスキャンし、エラーを表示します。
- 上記の方法は、VSCodeの最新バージョンで動作することを確認しています。古いバージョンを使用している場合は、設定やコマンドが異なる場合があります。
{
"version": "2.0.0",
"tasks": [
{
"label": "TypeScriptコンパイル",
"command": "tsc",
"problemMatcher": [
{
"pattern": {
"message": "$c"
},
"owner": "typescript",
"severity": "error"
}
],
"runOptions": {
"runOn": ["save", "watch"]
},
"type": "task"
}
]
}
VSCodeには、開いていないファイルのエラー検出機能を強化する拡張機能がいくつかあります。人気のある拡張機能には、以下のようなものがあります。
これらの拡張機能は、VSCode Marketplaceから無料でインストールできます。
コマンドラインツールを使用する
TypeScript コンパイラである tsc コマンドラインツールを使用して、プロジェクト内のすべてのファイルをコンパイルし、エラーを表示することもできます。これを行うには、次のコマンドを実行します。
tsc --check
このコマンドは、すべてのTypeScriptファイルをコンパイルし、エラーが発生した場合はエラーメッセージを表示します。
ビルドツールを使用する
Gulp、Grunt、または Webpackなどのビルドツールを使用して、プロジェクトをコンパイルすることもできます。これらのツールには、通常、TypeScript エラー検出機能が含まれています。
最適な方法を選択する
使用する方法は、プロジェクトのニーズと好みによって異なります。小規模なプロジェクトの場合は、tasks.json ファイルを使用する方法が簡単かもしれません。大規模なプロジェクトまたは複雑な設定を使用している場合は、拡張機能またはビルドツールを使用する方がよい場合があります。
reactjs typescript visual-studio-code
