MENU
contact

VSCodeのTypeScript拡張機能について

VSCode

採用はこちら

目次

VSCodeはTypeScriptを標準サポートしている

VSCodeはTypeScriptとの相性が非常によく、追加の拡張機能をインストールしなくても、基本的なTypeScript開発機能を利用できます。

VSCodeにはJavaScript／TypeScript向けの言語サポートが標準搭載されており、.tsや.tsxファイルを開くだけで、コード補完や型情報の表示、エラー表示、定義ジャンプなどを利用できます。

そのため、TypeScriptを使うためだけに専用の拡張機能を追加する必要は基本的にありません。

実際の開発では、VSCode標準のTypeScript機能を中心にして、ESLintやPrettierなど必要な拡張機能を追加していく構成がおすすめです。

VSCodeにはTypeScriptコンパイラは含まれていない

注意したいのは、VSCodeにTypeScriptの言語サポートは含まれているものの、TypeScriptコンパイラであるtscそのものは含まれていない点です。

TypeScriptをコンパイルしたり、プロジェクト全体の型チェックを行ったりする場合は、通常はプロジェクトにTypeScriptをインストールします。

npm install -D typescript

インストール後は、次のコマンドでTypeScriptのバージョンを確認できます。

npx tsc --version

つまり、VSCodeのTypeScript機能と、npmからインストールするTypeScript本体は分けて考える必要があります。

VSCode標準のTypeScript機能

VSCodeには、TypeScript開発でよく利用する機能があらかじめ搭載されています。

簡単な開発であれば、標準機能だけでも十分に作業できます。

IntelliSenseによるコード補完

VSCodeではIntelliSenseによる高度なコード補完を利用できます。

たとえば、次のように文字列型の変数を定義します。

const username: string = "Taro";

username.

username.まで入力すると、toUpperCaseやincludes、replaceなど、文字列型で利用できるメソッドが補完候補として表示されます。

関数についても、引数の型や戻り値などを確認できます。

function add(a: number, b: number) {
  return a + b;
}

この状態でadd(と入力すれば、引数としてnumber型が2つ必要であることをVSCode上で確認できます。

型エラーをリアルタイムで確認できる

TypeScriptの型エラーもVSCode上で確認できます。

たとえば、次のコードではnumber型の変数に文字列を代入しています。

let age: number = 20;

age = "20";

このようなコードを書くと、VSCode上で型エラーが表示されます。

プログラムを実行する前に問題を発見できるため、バグの防止に役立ちます。

自動インポート

VSCodeでは、別ファイルで定義されている関数やクラス、型などを自動的にインポートできます。

たとえば、別ファイルで次の関数を定義しているとします。

export function getUser() {
  return {
    name: "Taro",
  };
}

別のファイルでgetUserを入力し、補完候補を選択すると、必要に応じて次のようなコードが自動的に追加されます。

import { getUser } from "./user";

ファイル数が多いTypeScriptプロジェクトでは、特に便利な機能です。

定義へ移動できる

TypeScript開発では、関数やクラス、型の定義場所を確認する機会が多くあります。

VSCodeでは、対象のシンボルを選択してF12を押すことで定義元へ移動できます。

右クリックして「Go to Definition」を選択する方法もあります。

大規模なプロジェクトでコードを読み解く際に非常に便利です。

参照先を確認できる

関数や変数、クラスがどこから使用されているか確認する機能も用意されています。

右クリックして「Find All References」を実行すると、対象のシンボルが利用されている場所を一覧で確認できます。

コードを修正する際の影響範囲を把握するのに役立ちます。

Rename Symbolで名前を安全に変更できる

VSCodeでは、変数や関数、クラスなどの名前を安全に変更できます。

対象を選択してF2を押すと、関連する参照箇所をまとめて変更できます。

単純な文字列置換とは異なり、TypeScriptの構造を理解したうえで変更できるため、リファクタリングで便利です。

リファクタリング機能を利用できる

VSCodeにはTypeScript向けのリファクタリング機能も搭載されています。

コードを選択してCtrl + .を押すことで、利用可能なクイックフィックスやリファクタリング候補を表示できます。

たとえば、処理を関数へ切り出したり、定数へ抽出したりできます。

TypeScript開発でおすすめのVSCode拡張機能

VSCode標準のTypeScript機能だけでも開発できますが、実務ではいくつかの拡張機能を追加すると、より快適になります。

代表的なのは、次の拡張機能です。

拡張機能主な役割必要性
ESLint静的解析・コード品質チェック高い
Prettierコードフォーマット高い
Error Lensエラーや警告を見やすくする任意
Pretty TypeScript ErrorsTypeScriptエラーを読みやすくする任意
JavaScript and TypeScript Nightly次期TypeScriptを試す上級者向け

ESLint

ESLintは、TypeScript開発で特に利用されることが多い拡張機能です。

拡張機能IDは次の通りです。

dbaeumer.vscode-eslint

ESLintは、コードを静的解析して、潜在的な問題やコーディングルール違反を検出します。

ESLintの役割

TypeScriptは主に型の整合性を確認する仕組みです。

一方、ESLintはコード品質や書き方のルールをチェックします。

たとえば、未使用の変数を検出したり、特定の書き方を禁止したりできます。

大まかに整理すると、次のようになります。

TypeScript
→ 型解析・型チェック

ESLint
→ 静的解析・コーディングルール・一部の自動修正

両者は役割が異なるため、組み合わせて使用するのが一般的です。

TypeScriptプロジェクトにESLintを導入する

プロジェクト側にESLintをインストールする場合は、次のようなコマンドを使用できます。

npm install -D eslint typescript-eslint

現在のESLintではFlat Configが中心となっており、eslint.config.jsやeslint.config.mjsなどを使って設定するケースが増えています。

VSCodeのESLint拡張機能は、プロジェクトにインストールされているESLintと連携して、エディタ上へ問題を表示します。

Prettier

Prettierは、コードを自動的に整形するフォーマッターです。

拡張機能IDは次の通りです。

esbenp.prettier-vscode

TypeScriptだけでなく、JavaScript、JSX、JSON、CSS、HTML、Markdownなどにも対応しています。

Prettierでコードを自動整形する

たとえば、次のようなコードがあるとします。

function add(a:number,b:number){return a+b}

Prettierを使えば、次のような形へ自動整形できます。

function add(a: number, b: number) {
  return a + b;
}

手作業でインデントやスペースをそろえる必要がなくなるため、チーム開発でもコードの見た目を統一しやすくなります。

保存時に自動フォーマットする

VSCodeでは、ファイル保存時にPrettierを自動実行できます。

settings.jsonに次のような設定を追加します。

{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

ReactやNext.jsなどでTSXを使用する場合は、typescriptreactも設定すると便利です。

{
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Prettierをプロジェクトにもインストールする

チーム開発では、VSCode拡張機能だけでなく、Prettier本体をプロジェクトへインストールしてバージョンを固定すると環境差を減らしやすくなります。

npm install -D --save-exact prettier

参考サイト

VSCode+TypeScript+ESLint+Prettierの環境立ち上げ方法まとめ #YARN – Qiita

Error Lens

Error Lensは、VSCode上のエラーや警告を見やすくする拡張機能です。

拡張機能IDは次の通りです。

usernamehw.errorlens

通常のVSCodeでは、問題のあるコードに波線が表示され、カーソルを合わせることでエラー内容を確認できます。

Error Lensを使用すると、診断メッセージがコードの行付近へ直接表示されるため、問題を把握しやすくなります。

TypeScriptだけでなく、ESLintなどが出す診断情報も見やすくできる点が特徴です。

必須ではありませんが、TypeScript初心者には特に使いやすい拡張機能です。

Pretty TypeScript Errors

Pretty TypeScript Errorsは、TypeScriptのエラーメッセージを読みやすくするための拡張機能です。

拡張機能IDは次の通りです。

yoavbls.pretty-ts-errors

TypeScriptでは、ジェネリクスや複雑な型定義を使用すると、エラーメッセージが長くなることがあります。

Pretty TypeScript Errorsを導入すると、型情報をシンタックスハイライトしたり、複雑なエラーを整理して表示したりできます。

ReactやNext.jsなどで高度な型を扱う場合には便利です。

ただし、基本的なTypeScript開発に必須というわけではありません。

JavaScript and TypeScript Nightly

Microsoftは「JavaScript and TypeScript Nightly」という拡張機能も提供しています。

拡張機能IDは次の通りです。

ms-vscode.vscode-typescript-next

この拡張機能は、通常のTypeScript開発向けというより、次期バージョンのTypeScriptを試したい開発者向けです。

typescript@nextを試せる

JavaScript and TypeScript Nightlyを使用すると、開発中のtypescript@nextをVSCodeのTypeScript言語サービスとして利用できます。

そのため、新しいTypeScript機能を正式リリース前に試したい場合に便利です。

一方、通常のWeb制作やReact、Next.js、Node.js開発であれば、基本的にインストールする必要はありません。

TypeScript 7とVSCode

2026年7月にはTypeScript 7が正式リリースされました。

TypeScript 7では、コンパイラや言語ツールの基盤がGoによるネイティブ実装へ移行しています。

TypeScript 7では大幅な高速化が進んでいる

Microsoftによると、TypeScript 7では大規模プロジェクトのフルビルドにおいて、TypeScript 6と比較して約8〜12倍程度高速になるケースがあります。

ただし、すべてのプロジェクトやすべての処理が必ず同じ倍率で高速になるわけではありません。

そのため、「TypeScript 7は必ず10倍速い」と断定するよりも、「プロジェクトによっては大幅な高速化が期待できる」と理解するのが適切です。

VSCode側でも、新しいTypeScript言語サービスを活用することで、コード補完や型解析、プロジェクト解析などの高速化が期待できます。

VSCodeでTypeScriptのバージョンを選択する方法

TypeScript開発では、VSCodeが使用するTypeScriptのバージョンにも注意が必要です。

VSCodeにはTypeScriptの言語サービスが組み込まれていますが、プロジェクト側にもTypeScriptをインストールできます。

npm install -D typescript

Use Workspace Versionを選択する

プロジェクト側のTypeScriptをVSCodeで使用したい場合は、コマンドパレットを開きます。

Windowsでは、次のショートカットを使用できます。

Ctrl + Shift + P

次に、次のコマンドを検索します。

TypeScript: Select TypeScript Version

そして、プロジェクトにインストールされているTypeScriptを使う場合は「Use Workspace Version」を選択します。

チーム開発では、プロジェクトのpackage.jsonで管理されているTypeScriptバージョンを使用した方が、開発環境の差を減らしやすくなります。

TypeScript開発でおすすめのsettings.json

TypeScript開発を快適にするため、VSCodeのsettings.jsonを設定しておくのもおすすめです。

たとえば、次のような設定があります。

{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },

  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  "typescript.updateImportsOnFileMove.enabled": "always",

  "typescript.suggest.autoImports": true,

  "typescript.inlayHints.parameterNames.enabled": "literals",

  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,

  "typescript.inlayHints.variableTypes.enabled": true
}

保存時にPrettierとESLintを利用できる

この設定では、TypeScriptやTSXファイルを保存した際にPrettierでコードを整形できます。

また、ESLintの自動修正にも対応できます。

ただし、ESLintとPrettierの両方に同じフォーマット処理を担当させると、設定が競合する場合があります。

基本的には、次のように役割を分けると管理しやすくなります。

ESLint
→ コード品質やルールのチェック

Prettier
→ コードの見た目を整える

TypeScript拡張機能を入れすぎないことも重要

VSCodeには非常に多くのTypeScript関連拡張機能がありますが、必要以上にインストールする必要はありません。

似た役割の拡張機能を複数入れると、設定が競合する可能性があります。

たとえば、複数のフォーマッターを同時に有効にすると、保存時に異なる整形処理が実行される場合があります。

補完系の拡張機能についても、VSCode標準のTypeScript機能と重複するケースがあります。

そのため、まずは標準機能を使い、不足している機能だけ拡張機能で追加するのがおすすめです。

TypeScript初心者におすすめの構成

これからVSCodeでTypeScriptを始める場合は、拡張機能を大量にインストールする必要はありません。

まずは次の構成で十分です。

VSCode標準TypeScript機能
+
ESLint
+
Prettier

必要に応じて、次の拡張機能を追加します。

Error Lens
Pretty TypeScript Errors

JavaScript and TypeScript Nightlyは、最新のTypeScript機能を試したい場合にだけ利用するとよいでしょう。

各ツールの役割を整理する

それぞれの役割を整理すると、次のようになります。

VSCode標準TypeScript
→ コード補完・型情報・定義ジャンプ・リファクタリング

TypeScript
→ 型解析・型チェック・コンパイル

ESLint
→ 静的解析・コード品質チェック

Prettier
→ コードフォーマット

Error Lens
→ エラーや警告を見やすく表示

Pretty TypeScript Errors
→ 複雑なTypeScriptエラーを読みやすく表示

この違いを理解しておくと、必要な拡張機能を判断しやすくなります。

まとめ

VSCodeはTypeScriptの言語サポートを標準搭載しているため、TypeScriptを書くためだけの専用拡張機能は基本的に必要ありません。

標準状態でも、コード補完、型情報の表示、型エラーの確認、自動インポート、定義ジャンプ、参照検索、Rename、リファクタリングなどを利用できます。

ただし、VSCodeにはTypeScriptコンパイラtscそのものは含まれていないため、実際のプロジェクトでは次のようにTypeScriptをインストールして管理する方法が一般的です。

npm install -D typescript

さらに実務では、ESLintとPrettierを組み合わせると、コード品質とフォーマットを効率よく管理できます。

基本構成としては、次の組み合わせがおすすめです。

VSCode標準TypeScript
+
TypeScript
+
ESLint
+
Prettier

そのうえで、エラー表示を改善したい場合はError Lens、複雑な型エラーを読みやすくしたい場合はPretty TypeScript Errorsを追加するとよいでしょう。

2026年にはTypeScript 7も正式リリースされ、コンパイラや言語ツールのネイティブ化による大幅な高速化も進んでいます。

TypeScript開発では、拡張機能を大量に導入するよりも、VSCode標準機能をベースとして、本当に必要なツールだけを追加する構成が扱いやすくおすすめです。

以上、VSCodeのTypeScript拡張機能についてでした。

最後までお読みいただき、ありがとうございました。

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VSCodeのTypeScript拡張機能について
目次