VS Codeの統合ターミナルとは？基本的な使い方を解説

Web制作やプログラミングでは、コマンドを実行するためにターミナルを使う場面が数多くあります。

従来はWindowsのコマンドプロンプトやPowerShell、macOSのターミナルを別ウィンドウで開く必要がありました。しかし、**Visual Studio Code（VS Code）**にはエディター内でそのまま利用できる「統合ターミナル（Integrated Terminal）」が搭載されています。

ファイル編集とコマンド実行を同じ画面で行えるため、開発効率を大きく向上させることができます。

この記事では、VS Codeの統合ターミナルの基本から、開き方、よく使う操作、便利な機能まで初心者向けにわかりやすく解説します。

VS Codeの統合ターミナルとは

VS Codeの統合ターミナルとは、VS Code内で直接コマンドを実行できる機能です。

通常のターミナルと同じようにコマンドを入力できますが、エディターと一体化しているため、画面を切り替える必要がありません。

例えば次のような作業をそのまま実行できます。

• Gitの操作
• npmコマンドの実行
• Viteの起動
• Node.jsの実行
• フォルダ移動
• ファイル確認

Web制作では毎日のように利用する機能です。

統合ターミナルを使うメリット

統合ターミナルには多くのメリットがあります。

エディターを離れずに作業できる

コードを書きながらその場でコマンドを実行できます。

画面を切り替える必要がないため、作業効率が向上します。

プロジェクトフォルダが最初から開かれている

VS Codeで開いているフォルダが、そのまま現在の作業フォルダになります。

例えば

my-project

を開いている場合は、最初からその場所でコマンドを実行できます。

npm install

や

npm run dev

などをすぐに実行できます。

GitやNode.jsとの相性が良い

近年のWeb制作では、

• Git
• npm
• Node.js
• Vite

などを使う機会が非常に多くあります。

これらはすべて統合ターミナルから実行できます。

関連記事

• Gitとは何か｜バージョン管理の基本概念をやさしく解説
• Node.jsとは？基本からわかりやすく解説
• npmとは？初心者向けに使い方をわかりやすく解説
• Viteとは？初心者向けに特徴や使い方を解説

統合ターミナルを開く方法

メニューから開く

以下のメニューを選択します。

ターミナル
↓
新しいターミナル

画面下部にターミナルが表示されます。

ショートカットキー

※「`（バッククォート）」キーを使用します。

ターミナルの表示・非表示

次のショートカットで表示・非表示を切り替えられます。

ターミナルでよく使うコマンド

ここでは初心者が最初に覚えておきたいコマンドを紹介します。

現在のフォルダを確認する

Windows

pwd

macOS/Linux

pwd

現在いるディレクトリが表示されます。

ファイル一覧を表示する

Windows

dir

macOS/Linux

ls

フォルダ内のファイル一覧を確認できます。

フォルダを移動する

cd フォルダ名

例

cd src

一つ上のフォルダへ戻る

cd ..

これは非常によく使います。

開発サーバーを起動する

Viteでは次のコマンドを実行します。

npm run dev

すると開発サーバーが起動します。

新しいターミナルを追加する方法

複数の作業を同時に行いたい場合は、新しいターミナルを追加できます。

例えば

• 開発サーバー
• Git操作

を別々に動かすこともできます。

追加方法

＋（新しいターミナル）

をクリックするだけです。

タブとして追加されます。

ターミナルを分割する

VS Codeではターミナルを左右に分割できます。

例えば

左側

npm run dev

右側

git status

のように並べて利用できます。

分割ボタンをクリックすると簡単に利用できます。

使用するシェルを変更する

VS Codeでは利用するシェルを変更できます。

代表的なものは次のとおりです。

状況に応じて切り替えて利用できます。

ターミナルを終了する方法

現在実行中の処理を終了する場合は、

Ctrl + C

を押します。

例えば

npm run dev

で起動した開発サーバーも停止できます。

その後、必要に応じてターミナルを閉じます。

統合ターミナルを使う際の注意点

正しいフォルダで実行する

コマンドは現在開いているフォルダに対して実行されます。

誤ったフォルダで実行すると、

package.json が見つかりません

などのエラーになることがあります。

コマンドの入力ミスに注意する

スペルミスや不要なスペースがあるとエラーになります。

エラーメッセージを確認しながら修正することが大切です。

実行中のターミナルを閉じない

開発サーバーやビルド処理の実行中にターミナルを閉じると、処理が停止します。

作業が終わってから終了するようにしましょう。

VS Codeの統合ターミナルは毎日使う機能

VS Codeの統合ターミナルは、Web制作やプログラミングでは欠かせない機能です。

主なポイントは以下のとおりです。

• VS Code内でコマンドを実行できる
• エディターを切り替える必要がない
• GitやNode.js、Viteとの相性が良い
• ターミナルの追加・分割も可能
• ショートカットを覚えると作業効率が向上する

初心者のうちは基本的なコマンドだけでも十分です。日々使い続けることで自然と操作に慣れ、開発効率も大きく向上していきます。

関連記事

• VS Codeとは？初心者向けに基本機能と使い方を解説
• 設定の同期：異なるPCでVS Codeの環境を完全に一致させる方法
• 【完全版】VS Codeの基本操作と作業効率を爆発的に上げるショートカットキー一覧
• Node.jsとは？基本からわかりやすく解説
• npmとは？初心者向けに使い方をわかりやすく解説
• Viteとは？初心者向けに特徴や使い方を解説
• Gitとは何か｜バージョン管理の基本概念をやさしく解説