VSCodeの統合ターミナルとは、VSCodeの画面内でPowerShellやコマンドプロンプト、Git Bash、Bash、Zshなどのシェルを操作できる機能です。
通常であれば、コードを編集するエディターとコマンドを入力するターミナルを別々に開く必要があります。
しかし、VSCodeの統合ターミナルを使えば、コードを書きながら同じ画面内でコマンドを実行できます。
たとえば、以下のような作業が可能です。
- Gitコマンドを実行する
- PythonやNode.jsのプログラムを実行する
- npmやpipでパッケージをインストールする
- CやC++のプログラムをコンパイルする
- 開発サーバーを起動する
- テストを実行する
- Dockerコマンドを実行する
- ファイルやフォルダを操作する
VSCodeでプログラミングをする場合、統合ターミナルは頻繁に使用する重要な機能のひとつです。
VSCodeで統合ターミナルを開く方法
メニューから開く
もっとも分かりやすい方法は、VSCode上部のメニューから統合ターミナルを開く方法です。
「ターミナル」メニューから「新しいターミナル」を選択すると、画面下部に統合ターミナルが表示されます。
また、「表示」メニューから「ターミナル」を選択して表示することもできます。
英語表示の場合は、以下のメニューです。
Terminal
→ New Terminalまたは、
View
→ Terminalショートカットで開く
WindowsやLinuxでは、以下のショートカットでターミナルの表示・非表示を切り替えられます。
Ctrl + `「`」はバッククォートと呼ばれる記号です。
新しいターミナルを追加する場合は、以下のショートカットを利用できます。
Ctrl + Shift + `macOSではキー操作が異なるため、必要に応じてVSCodeの「キーボード ショートカット」から確認するとよいでしょう。
コマンドパレットから開く
VSCodeのコマンドパレットから統合ターミナルを操作することもできます。
WindowsやLinuxでは、以下のショートカットでコマンドパレットを開きます。
Ctrl + Shift + Pその後、「Terminal」などと入力すると、ターミナルに関する各種コマンドを検索できます。
統合ターミナルの基本的な使い方
現在の作業フォルダを確認する
VSCodeでフォルダやワークスペースを開いた状態で新しいターミナルを起動すると、通常は開いているワークスペースを基準としたディレクトリから開始します。
たとえば、以下のフォルダをVSCodeで開いているとします。
C:\Users\user\Documents\my-projectPowerShellでは、次のように表示される場合があります。
PS C:\Users\user\Documents\my-project>PowerShellやBashなどでは、現在のディレクトリを以下のコマンドで確認できます。
pwdなお、開始ディレクトリは設定やワークスペース構成によって変わることがあります。
ファイルやフォルダの一覧を確認する
PowerShellでは、以下のコマンドで現在のディレクトリにあるファイルやフォルダを確認できます。
dirまたは、
Get-ChildItemGit Bash、Bash、Zshなどでは、一般的に以下を使用します。
lsここで重要なのは、dirやlsはVSCode独自のコマンドではないという点です。
現在使用しているPowerShellやBashなどのシェルが提供しているコマンドです。
ディレクトリを移動する
ディレクトリを移動するときは、一般的にcdコマンドを使用します。
たとえば、srcフォルダへ移動する場合は以下のように入力します。
cd src1つ上の階層へ戻る場合は、以下のようにします。
cd ..このように、統合ターミナルでは通常のターミナルと同じ感覚でファイルやディレクトリを操作できます。
統合ターミナルでプログラムを実行する方法
Pythonを実行する
Pythonがインストールされている環境では、以下のようにPythonファイルを実行できます。
python main.py環境によっては、以下のようにpython3を使用します。
python3 main.pyNode.jsを実行する
Node.jsがインストールされている場合は、以下のようにJavaScriptファイルを実行できます。
node app.jsnpmを使用するプロジェクトでは、以下のようなコマンドも利用できます。
npm installnpm run devC++をコンパイルする
g++が利用できる環境では、以下のようにC++ファイルをコンパイルできます。
g++ main.cpp -o mainWindowsでは、生成された実行ファイルを次のように実行する場合があります。
.\main.exemacOSやLinuxでは、以下のように実行できます。
./mainただし、Python、Node.js、Git、g++などはVSCodeに標準搭載されているわけではありません。
これらのコマンドを使用するには、対応するソフトウェアを別途インストールし、必要に応じてPATHを設定する必要があります。
統合ターミナルでGitを使う方法
Gitの状態を確認する
Gitがインストールされていれば、VSCodeの統合ターミナルからGitコマンドを実行できます。
現在の変更状況を確認するには、以下を使用します。
git status変更をステージングする
すべての変更をまとめてステージングする場合は、以下を使用します。
git add .ただし、git add .を使うと意図していないファイルまで追加されることがあります。
実行する前にgit statusで対象ファイルを確認しておくと安心です。
コミットする
ステージングした変更をコミットする場合は、以下のように入力します。
git commit -m "Update files"リモートリポジトリへ送信する
コミットした内容をリモートリポジトリへ送信する場合は、以下を使用します。
git push統合ターミナルを使えば、コードの編集からGit操作までをVSCodeの画面内で完結できます。
複数のターミナルを使う方法
新しいターミナルを追加する
VSCodeでは、複数のターミナルを同時に起動できます。
ターミナルパネルにある「＋」ボタンをクリックすると、新しいターミナルを追加できます。
たとえば、Web開発では以下のように使い分けることができます。
ターミナル1：npm run dev
ターミナル2：Git操作
ターミナル3：テスト実行1つのターミナルで開発サーバーを動かしたまま、別のターミナルでGitやテストを実行できるため便利です。
ターミナルごとに用途を分ける
複数のターミナルを使う場合は、役割を分けておくと管理しやすくなります。
たとえば、以下のような使い方ができます。
Frontend
Backend
Git
Testターミナルの名前を変更しておくと、どのターミナルで何をしているのか把握しやすくなります。
ターミナルを分割する方法
ターミナルを左右に分ける
VSCodeでは、ターミナルを分割して複数表示できます。
ターミナルパネルの分割ボタンをクリックするか、右クリックメニューから分割操作を実行できます。
WindowsやLinuxでは、標準設定で以下のショートカットを利用できます。
Ctrl + Shift + 5たとえば、次のようなレイアウトにできます。
┌──────────────────────┐
│ エディター │
├──────────┬───────────┤
│ Terminal │ Terminal │
│ npm dev │ git status│
└──────────┴───────────┘フロントエンドとバックエンドを同時に起動するときなどに便利です。
PowerShellやGit Bashへ切り替える方法
使用するシェルを変更する
Windowsでは、環境に応じて以下のようなシェルを利用できます。
- PowerShell
- Command Prompt
- Git Bash
- WSL
ただし、すべての環境で必ず表示されるわけではありません。
PCにインストールされていて、VSCodeが検出できたシェルが候補として表示されます。
デフォルトのシェルを変更する
毎回同じシェルを使用したい場合は、デフォルトプロファイルを変更すると便利です。
コマンドパレットを開きます。
Ctrl + Shift + P続いて、以下を検索します。
Terminal: Select Default Profileその後、使用したいシェルを選択します。
設定後に新しいターミナルを開くと、選択したシェルが使用されます。
統合ターミナルを閉じる方法
ターミナルを非表示にする
以下のショートカットを押すと、ターミナルパネルの表示・非表示を切り替えられます。
Ctrl + `ただし、この操作はターミナル自体を終了するものではありません。
あくまで画面から一時的に隠す操作です。
ターミナルのプロセスを終了する
ターミナルそのものを終了したい場合は、ターミナルパネルにあるゴミ箱アイコンなどを使用します。
「ターミナルを隠すこと」と「ターミナルのプロセスを終了すること」は別の操作なので注意が必要です。
実行中のコマンドを停止する方法
Ctrl + Cで停止する
開発サーバーなどを実行すると、コマンドが終了せず動き続けることがあります。
たとえば、以下のようなコマンドです。
npm run devpython server.py多くのCLIプログラムや開発サーバーは、以下の操作で停止できます。
Ctrl + Cただし、Ctrl + CはVSCode独自の停止機能ではありません。
ターミナル上で実行中のプロセスに割り込みを送る操作であり、プログラムによって挙動が異なる場合があります。
過去のコマンドを再利用する方法
上矢印キーで履歴を呼び出す
PowerShellやBashなど、多くのシェルでは上矢印キーを押すと過去に入力したコマンドを呼び出せます。
たとえば以前、以下を実行していたとします。
npm run build上矢印キーを押すことで、同じコマンドを再表示して再実行できます。
この履歴機能は主にシェル側の機能です。
Ctrl + ↑とCtrl + ↓でコマンド位置を移動する
VSCodeのShell Integrationが有効な場合、WindowsやLinuxでは以下のキー操作でターミナル上のコマンド位置を移動できます。
Ctrl + ↑
Ctrl + ↓これは単純な入力履歴の切り替えとは異なります。
ターミナルの出力履歴上で、以前実行したコマンドの位置へ移動するための機能です。
Shell Integrationとは
コマンドや作業ディレクトリを認識する機能
Shell Integrationとは、VSCodeとシェルの連携を強化する仕組みです。
利用できる環境では、VSCodeがターミナル内で実行したコマンドや現在の作業ディレクトリなどを認識できるようになります。
その結果、以下のような機能を利用しやすくなります。
- 実行したコマンドの検出
- コマンドの成功・失敗の判定
- コマンド間の移動
- 現在の作業ディレクトリの検出
- ターミナルリンクの解決
- Quick Fix
ただし、使用するシェルや環境によってShell Integrationの対応状況や利用できる機能は異なります。
ターミナルに表示されたファイルやURLを開く方法
ファイルパスを開く
統合ターミナルにファイルパスが表示された場合、VSCodeがリンクとして認識することがあります。
たとえば、以下のような表示です。
src/app.js:25:10対応している場合は、リンクを選択することで該当ファイルや行付近を開けます。
URLをブラウザで開く
開発サーバーを起動すると、以下のようなURLが表示されることがあります。
http://localhost:3000VSCodeの統合ターミナルでは、こうしたURLをリンクとしてブラウザで開けます。
特定のフォルダでターミナルを開く方法
エクスプローラーから開く
VSCodeのエクスプローラーで任意のフォルダを右クリックし、「Open in Integrated Terminal」を選択すると、そのフォルダを基準に統合ターミナルを開けます。
たとえば、以下の構成だったとします。
project
├─ frontend
└─ backendbackendフォルダからターミナルを開けば、最初からbackendを作業ディレクトリとして利用できます。
毎回cd backendと入力する必要がないため便利です。
ターミナルをエディター領域へ移動する方法
ターミナルをタブとして表示する
VSCodeの統合ターミナルは、画面下部だけでなくエディター領域へ移動して表示できます。
ターミナルをエディター領域へドラッグするなどして、通常のファイルタブと同じように配置できます。
たとえば、以下のようなレイアウトにできます。
┌──────────────┬──────────────┐
│ main.js │ Terminal │
│ │ │
│ コード │ npm run dev │
│ │ │
└──────────────┴──────────────┘ターミナルの出力を大きく表示したい場合に便利です。
PowerShell・Command Prompt・Git Bashはどれを使えばよいか
PowerShell
PowerShellは、Windows環境で標準的に利用しやすいシェルです。
以下のようなPowerShell独自のコマンドを使用できます。
Get-ChildItemGet-Locationもちろん、GitやNode.jsなどがインストールされていれば、以下のようなコマンドも利用できます。
git status
node app.js
npm installCommand Prompt
Command Promptは、従来からWindowsで利用されているコマンドライン環境です。
以下のようなコマンドを使用します。
dir
cd
clsWindows向けのバッチファイルを扱う場合などには現在でも利用されます。
Git Bash
Git Bashは、Git for Windowsなどと一緒に利用できるシェルです。
以下のようなLinux系のコマンドを使いやすいのが特徴です。
ls
pwd
rm
cp
mvLinuxやmacOS向けの手順に近い形で操作したい場合に便利です。
WSL
WSLは、Windows上でLinux環境を利用するための仕組みです。
Linuxサーバーを前提とした開発や、Linux向けのコマンドやツールを多用する場合に便利です。
どのシェルが最適かは開発環境によって異なります。
チーム開発では、プロジェクトで指定されている環境に合わせるのが基本です。
統合ターミナルが開かない場合の対処法
デフォルトプロファイルを確認する
ターミナルが開かない場合は、まず使用するシェルの設定を確認します。
コマンドパレットから以下を実行します。
Terminal: Select Default ProfilePowerShellやCommand Promptなど、別のシェルを選択して改善するか確認します。
シェルがインストールされているか確認する
Git Bashなどを設定していても、そのシェル自体がPCにインストールされていなければ起動できません。
指定しているシェルが実際に利用可能か確認しましょう。
Restricted Modeを確認する
信頼されていないワークスペースでは、VSCodeが安全上の理由からRestricted Modeになることがあります。
Restricted Modeでは、統合ターミナルの起動がデフォルトでブロックされるため、ターミナルを利用できない場合があります。
信頼できるプロジェクトであることを確認したうえで、ワークスペースの信頼設定を確認します。
拡張機能の影響を確認する
拡張機能がターミナルの動作に影響している場合もあります。
問題が続く場合は、一時的に拡張機能を無効化して動作を確認すると原因を切り分けやすくなります。
VSCodeを再起動する
設定変更後や一時的な不具合の場合は、VSCodeを再起動すると改善することがあります。
VSCodeの統合ターミナルを使うメリット
エディターとターミナルを1つの画面にまとめられる
統合ターミナルの大きなメリットは、コード編集とコマンド操作を同じ画面内で行えることです。
通常は、以下のように複数のアプリを行き来する必要があります。
VSCode
↓
ターミナル
↓
VSCode
↓
ブラウザ
↓
ターミナル統合ターミナルを利用すれば、VSCode内に作業をまとめられます。
VSCode
├─ ソースコード
├─ ファイル一覧
├─ Git
└─ ターミナル特にWeb開発では、以下のようなコマンドを頻繁に実行します。
npm run dev
git status
git add .
git commit
npm test
npm run build統合ターミナルを活用することで、ウィンドウを切り替える回数を減らし、開発作業を効率化できます。
VSCodeの統合ターミナルは開発で覚えておきたい機能
VSCodeの統合ターミナルを使えば、コードを編集しながら同じ画面内でさまざまなコマンドを実行できます。
まず覚えておきたい基本操作は、以下のとおりです。
Ctrl + `
→ ターミナルの表示・非表示Ctrl + Shift + `
→ 新しいターミナルを作成Ctrl + C
→ 多くの実行中コマンドを停止さらに慣れてきたら、複数ターミナル、分割表示、デフォルトプロファイル、Shell Integrationなども活用すると、より効率よく作業できます。
なお、cd、ls、dirなどはVSCode独自のコマンドではなく、使用しているシェルのコマンドです。
また、Python、Node.js、Git、C++コンパイラなどは別途インストールが必要です。
この違いを理解しておくと、統合ターミナルでエラーが発生したときにも原因を判断しやすくなります。
VSCodeを本格的に使うのであれば、統合ターミナルの基本操作は早めに覚えておくとよいでしょう。
以上、VSCodeの統合ターミナルの使い方についてでした。
最後までお読みいただき、ありがとうございました。
