VSCodeのターミナルの基本的な使い方について

採用はこちら

VSCodeには「統合ターミナル(Integrated Terminal)」という機能が標準で搭載されています。
統合ターミナルを使うと、VSCodeの画面内からPowerShell、Command Prompt、Bash、Zshなどのシェルを操作できます。

通常であれば、WindowsではPowerShellやコマンドプロンプト、macOSではターミナルアプリなどを別に起動する必要があります。
しかし、VSCodeの統合ターミナルを利用すれば、コードを書いている画面から離れずにコマンドを実行できます。

たとえば、次のような作業に利用できます。

  • PythonやNode.jsなどのプログラムを実行する
  • npmやpipでパッケージをインストールする
  • Gitコマンドを実行する
  • 開発サーバーを起動する
  • プログラムをビルドする
  • テストを実行する
  • DockerなどのCLIツールを操作する
  • ファイルやフォルダを操作する

VSCodeのターミナルは簡易的なコマンド入力欄ではなく、実際のシェルをVSCode内で利用するための機能です。
そのため、基本的には外部のターミナルアプリと同じようにコマンドを実行できます。

目次

VSCodeでターミナルを開く方法

メニューからターミナルを開く

VSCodeでは、メニューから簡単にターミナルを開けます。

上部メニューから、次の順番で選択します。

表示
↓
ターミナル

英語表示の場合は次の項目です。

View
↓
Terminal

また、新しいターミナルを作成したい場合は、次のメニューから操作できます。

Terminal
↓
New Terminal

通常、ターミナルはVSCode画面の下部に表示されます。

ショートカットキーでターミナルを開く

WindowsやLinuxでは、次のショートカットでターミナルを表示できます。

Ctrl + `

「`」はバッククォートと呼ばれる記号です。

新しいターミナルを作成する場合は、次のショートカットを利用できます。

Ctrl + Shift + `

macOSでは、標準設定で次のショートカットが利用されます。

Control + `

新しいターミナルを作成する場合は次の操作です。

Control + Shift + `

ただし、ショートカットキーはユーザー設定によって変更できます。
現在の設定を確認したい場合は、VSCodeの「キーボードショートカット」画面を確認すると確実です。

ターミナルの現在位置を確認する

カレントディレクトリとは

ターミナルでは、「現在どのフォルダで作業しているか」が重要になります。

現在操作しているフォルダは「カレントディレクトリ」や「作業ディレクトリ」と呼ばれます。

VSCodeでプロジェクトフォルダを開いた状態から新しいターミナルを起動すると、通常はワークスペースのルートフォルダが開始位置になります。

WindowsのPowerShellでは、たとえば次のように表示されます。

PS C:\Users\user\Documents\sample-project>

macOSやLinuxでは、次のように表示されることがあります。

user@computer sample-project %

または次のような形式です。

user@computer:~/sample-project$

この表示の後ろにコマンドを入力してEnterキーを押すことで処理を実行します。

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

macOSやLinuxでは、次のコマンドを利用できます。

pwd

PowerShellでもpwdを利用できます。

実行すると、現在操作しているフォルダのパスが表示されます。

たとえば次のように表示されます。

C:\Users\user\Documents\project

ターミナルでファイルやフォルダを操作する

ファイル一覧を表示する

macOSやLinuxでは、次のコマンドでファイルやフォルダの一覧を確認できます。

ls

PowerShellでも通常、lsを利用できます。

ただし、PowerShellのlsはLinuxやmacOSのlsとまったく同じものではありません。
PowerShellでは、Get-ChildItemのエイリアスとして動作します。

PowerShell本来のコマンドレットでは、次のように記述します。

Get-ChildItem

フォルダを移動する

フォルダを移動するときはcdコマンドを利用します。

たとえば、srcフォルダへ移動する場合は次のように入力します。

cd src

1つ上のフォルダへ戻る場合は次のコマンドです。

cd ..

対応しているシェルでは、ホームディレクトリへ移動する際に次のコマンドも利用できます。

cd ~

Explorerから直接ターミナルを開く方法

VSCodeでは、Explorerに表示されているフォルダを指定してターミナルを開くこともできます。

たとえば、次のようなプロジェクトがあるとします。

project
├─ frontend
├─ backend
└─ docs

frontendフォルダで作業したい場合、通常は次のように移動します。

cd frontend

一方、Explorer上でfrontendフォルダを右クリックし、「Open in Integrated Terminal」を選択すれば、そのフォルダを作業ディレクトリとしてターミナルを開けます。

フォルダ階層が深いプロジェクトでは便利な機能です。

VSCodeのターミナルからプログラムを実行する

Pythonを実行する

Pythonがインストールされている環境では、次のようなコマンドでPythonファイルを実行できます。

python main.py

環境によっては次のコマンドを利用します。

python3 main.py

Windowsでは、Python Launcherがインストールされていれば次の形式を利用できる場合もあります。

py main.py

利用できるコマンドはPythonのインストール方法やOSによって異なります。

たとえば、main.pyに次のコードを書いたとします。

print("Hello, VSCode!")

ターミナルから実行すると、次のように結果が表示されます。

Hello, VSCode!

Node.jsを実行する

Node.jsがインストールされている場合は、次のようにJavaScriptファイルを実行できます。

node app.js

Node.jsのプロジェクトでは、npmコマンドも頻繁に利用します。

npm install
npm run dev
npm test

npm run devなどで開発サーバーを起動しながら、VSCode上でコードを編集するという使い方が一般的です。

VSCodeのターミナルからGitを操作する

基本的なGitコマンド

Gitがインストールされていれば、VSCodeの統合ターミナルからGitコマンドを利用できます。

現在の変更状況を確認する場合は次のコマンドです。

git status

変更したファイルをステージングする場合は次のように入力します。

git add .

コミットする場合は次のようにします。

git commit -m "Update files"

リモートリポジトリから変更を取得する場合は次のコマンドです。

git pull

リモートリポジトリへ変更を送信する場合は次のようにします。

git push

VSCodeにはGitのGUI機能も用意されています。
GUIとターミナルを使い分けることで、Git操作を効率化できます。

複数のターミナルを使う方法

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

VSCodeでは複数のターミナルを同時に開けます。

ターミナルパネルにある「+」ボタンなどから、新しいターミナルを作成できます。

たとえばWeb開発では、次のように使い分けられます。

ターミナル1
npm run dev

ターミナル2
git status

ターミナル3
npm test

開発サーバーを起動すると、そのターミナルではサーバープロセスが動作し続けます。
そのため、Git操作やテストを行うために別のターミナルを作ると便利です。

ターミナルを分割する

VSCodeでは、ターミナルを分割して複数表示することもできます。

たとえば次のような使い方ができます。

┌─────────────────────────────┐
│         VSCode Editor       │
├──────────────┬──────────────┤
│ npm run dev  │ git status   │
│              │              │
└──────────────┴──────────────┘

フロントエンドとバックエンドを同時に動かす場合にも便利です。

左側
npm run frontend

右側
npm run backend

複数のプロセスを扱う開発では、ターミナル分割を活用すると作業状況を確認しやすくなります。

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

シェルとは

VSCodeの統合ターミナルの中で実際にコマンドを解釈しているプログラムが「シェル」です。

代表的なシェルには次のようなものがあります。

  • PowerShell
  • Command Prompt
  • Bash
  • Zsh
  • fish
  • Git Bash
  • PowerShell 7などのpwsh

利用できるシェルはOSやインストールされているソフトウェアによって異なります。

新しいターミナルのシェルを選択する

ターミナルパネルの新規ターミナル作成メニューから、利用可能なシェルを選択できます。

Windowsでは環境によって、次のような選択肢が表示されます。

PowerShell
Command Prompt
Git Bash
WSL

選択したシェルを使った新しいターミナルが作成されます。

デフォルトのシェルを変更する

毎回同じシェルを利用したい場合は、コマンドパレットから次のコマンドを実行します。

Terminal: Select Default Profile

利用したいターミナルプロファイルを選択すると、それ以降に新しく作成するターミナルのデフォルトになります。

WindowsでGit Bashを普段使いたい場合などに便利です。

PowerShell・Command Prompt・Git Bashの違い

PowerShell

PowerShellはWindows環境で広く使われているシェルです。

次のようなPowerShell独自のコマンドレットを利用できます。

Get-ChildItem
Get-Process
Get-Location

一般的な開発ツールも利用できます。

git
npm
python
node

WindowsでVSCodeを利用する場合、有力な選択肢の一つです。

Command Prompt

Command Promptは、Windowsで以前から利用されているコマンド環境です。

代表的なコマンドには次のようなものがあります。

dir
cd
mkdir

既存のバッチファイルを扱う場合などに利用されることがあります。

Git Bash

Git Bashは、Git for Windowsと一緒にインストールされることが多いBash環境です。

次のようなLinux系のコマンドを利用できます。

ls
pwd
cat
grep

Linuxサーバーを扱うWeb開発などでは、Linuxに近い操作感で作業できるメリットがあります。

実行中のプログラムを停止する方法

Ctrl + Cを利用する

Webサーバーなどを起動すると、ターミナルでプログラムが動き続けることがあります。

たとえば次のコマンドを実行したとします。

npm run dev

開発サーバーを停止したい場合は、一般的に次のキーを押します。

Ctrl + C

流れとしては次のようになります。

npm run dev
↓
開発サーバー起動
↓
Ctrl + C
↓
開発サーバー停止

Ctrl + Cは通常、現在動いているフォアグラウンドプロセスへ割り込みを送るための操作です。

ただし、実際の挙動はシェルや実行中のプログラムによって異なる場合があります。

過去に入力したコマンドを再利用する方法

↑キーでコマンド履歴を表示する

PowerShell、Bash、Zshなどの一般的なシェルでは、キーボードの「↑」キーを押すと以前入力したコマンドを呼び出せます。

たとえば一度、

npm run build

を実行したあとに「↑」キーを押すと、同じコマンドを再表示できます。

そのままEnterキーを押せば再実行できます。

なお、この「↑」キーによる履歴表示は、基本的にはVSCode独自の機能ではなくシェル側の機能です。

Shell Integrationのコマンドナビゲーションを利用する

VSCodeのShell Integrationが有効になっている環境では、ターミナル出力内の過去のコマンド位置へ移動できます。

WindowsやLinuxでは、たとえば次の操作があります。

Ctrl + ↑

過去のコマンド位置へ移動できます。

Ctrl + ↓

次のコマンド位置へ移動できます。

通常の「↑」キーによるコマンド履歴とは役割が異なるため、区別して覚えておくと便利です。

ターミナルの表示を整理する方法

画面をクリアする

ターミナルの出力が増えて見づらくなった場合は、表示を整理できます。

BashやZshなどでは、一般的に次のコマンドを利用します。

clear

PowerShellでは次のコマンドを利用できます。

Clear-Host

次のエイリアスも一般的です。

cls

環境によっては、次のショートカットでも表示をクリアできます。

Ctrl + L

ただし、シェルやキーバインド設定によって動作は異なる場合があります。

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

exitコマンドを利用する

現在のシェルを終了するときは、一般的に次のコマンドを利用できます。

exit

また、VSCodeのターミナルパネルにあるゴミ箱アイコンからターミナルを終了することもできます。

ターミナルパネルを一時的に非表示にすることと、シェル自体を終了することは異なります。

ターミナル名を変更する方法

複数のターミナルを開くと、どのターミナルで何を実行しているのか分かりにくくなる場合があります。

その場合は、ターミナル名を変更すると管理しやすくなります。

たとえば次のような名前を付けられます。

Frontend
Backend
Git
Test

フロントエンド、バックエンド、テストなどの用途ごとに名前を付けておくと、複数のターミナルを使う際に便利です。

ターミナルをエディタ領域で表示する方法

VSCodeでは、ターミナルを画面下部だけでなくエディタ領域へ移動できます。

たとえば次のような配置が可能です。

左側:ソースコード
右側:ターミナル

大きなモニターを利用している場合は、コードとターミナルを並べることで作業しやすくなります。

現在のVSCodeでは、ターミナルを別ウィンドウとして表示する使い方も可能です。

複数モニターを利用している場合などに便利です。

ターミナル内のURLやファイルパスを開く方法

VSCodeの統合ターミナルは、出力されたURLやファイルパスなどを認識できます。

たとえば開発サーバーを起動した際に、次のURLが表示されたとします。

http://localhost:3000

VSCodeがURLとして認識していれば、リンクとしてブラウザで開くことができます。

エラー出力に次のようなファイルパスが表示された場合も同様です。

src/app.js:25:10

VSCodeが認識可能な形式であれば、対象ファイルや位置をエディタで開ける場合があります。

すべての文字列が必ずリンクとして認識されるわけではありませんが、通常のターミナルよりもエディタと連携しやすい点がVSCode統合ターミナルの特徴です。

Shell Integrationとは

VSCodeとシェルを連携させる機能

VSCodeには「Shell Integration」という機能があります。

Shell Integrationによって、VSCodeはターミナル内で実行されたコマンドなどをより詳しく認識できます。

対応環境では、次のような機能を利用できます。

  • 実行したコマンドの認識
  • カレントディレクトリの認識
  • コマンドの終了状態の認識
  • コマンド位置への移動
  • ターミナルリンクの精度向上
  • 最近実行したコマンドの操作

Shell Integrationに対応するシェル

VSCodeのShell Integrationは、代表的なシェルに対応しています。

LinuxやmacOSでは、主に次のシェルが対応しています。

Bash
Zsh
fish
PowerShell

Windowsでは主に次のシェルが対応しています。

PowerShell
Git Bash

対応しているシェルでは通常、自動的にShell Integrationが有効になります。

ただし、サブシェルや一部のSSH環境、特殊なシェル設定などでは正常に有効化されない場合があります。

ターミナルの文字サイズや表示を変更する方法

ターミナル設定を変更する

VSCodeでは、ターミナルのフォントや文字サイズなどを変更できます。

代表的な設定には次のようなものがあります。

terminal.integrated.fontFamily
terminal.integrated.fontSize
terminal.integrated.letterSpacing
terminal.integrated.lineHeight
terminal.integrated.fontWeight

たとえば、settings.jsonでターミナルの文字サイズを14にする場合は次のように設定します。

{
  "terminal.integrated.fontSize": 14
}

初心者の場合は、settings.jsonを直接編集するより、設定画面で「Terminal Font Size」などを検索して変更する方法が簡単です。

ターミナルプロファイルを設定する方法

Terminal Profilesとは

VSCodeでは「Terminal Profiles」を利用して、シェルごとの設定を管理できます。

たとえば次のような項目を設定できます。

  • 使用するシェル
  • シェル起動時の引数
  • 環境変数
  • ターミナルの表示名
  • アイコン

OSごとにデフォルトプロファイルを指定することもできます。

Windowsでは次のような設定があります。

{
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Linuxでは次のような設定が可能です。

{
  "terminal.integrated.defaultProfile.linux": "bash"
}

macOSでは次のように設定できます。

{
  "terminal.integrated.defaultProfile.osx": "zsh"
}

ただし、指定する名前はVSCodeが認識しているターミナルプロファイル名と一致している必要があります。

通常はTerminal: Select Default Profileから選択する方法が簡単です。

VSCodeのターミナルを使うときの注意点

ターミナルは基本的にVSCodeと同じ権限で動作する

VSCodeの統合ターミナルは、基本的にVSCodeを実行しているユーザーと同じ権限で動作します。

そのため、WindowsでVSCodeを通常権限で起動している場合、統合ターミナルだけが自動的に管理者権限になるわけではありません。

管理者権限が必要な処理では、OSやシェルに応じた権限昇格の方法を利用する必要があります。

シェルによってコマンドが異なる

VSCodeのターミナルを利用するときに特に注意したいのが、シェルによるコマンドの違いです。

たとえば、WindowsのCommand Promptでは次のコマンドでファイル一覧を確認します。

dir

LinuxやmacOSのBashでは一般的に次のコマンドを使います。

ls

PowerShellでもlsを利用できますが、内部的にはGet-ChildItemのエイリアスです。

インターネットの記事や生成AIが提示したコマンドをコピーするときは、「PowerShell用なのか」「Bash用なのか」などを確認することが重要です。

Workspace Trustにも注意する

VSCodeには「Workspace Trust」というセキュリティ機能があります。

信頼されていないフォルダをRestricted Modeで開いている場合、デフォルトでは統合ターミナルの起動がブロックされます。

インターネットからダウンロードしたプロジェクトや、内容が分からないソースコードを開く場合に、意図しないコマンドが実行されるリスクを減らすための仕組みです。

フォルダを信頼する前に、プロジェクトの内容や出所を確認することが重要です。

初心者が覚えておきたい基本操作

最初からすべての機能やコマンドを覚える必要はありません。

まずは次の基本操作を覚えると、VSCodeのターミナルを使いやすくなります。

操作代表的な方法
ターミナルを表示する`Ctrl + “
新しいターミナルを作る`Ctrl + Shift + “
現在位置を確認するpwd
ファイル一覧を確認するls
フォルダを移動するcd フォルダ名
1階層上へ移動するcd ..
プログラムを停止するCtrl + C
前のコマンドを呼び出す↑
シェルを終了するexit
Pythonを実行するpython main.pyなど
Node.jsを実行するnode app.js
Gitの状態を確認するgit status
npmパッケージを導入するnpm install
開発サーバーを起動するnpm run dev

なお、利用できるコマンドやショートカットはOS、シェル、VSCodeの設定によって異なる場合があります。

VSCodeのターミナルを使った基本的な作業例

Node.jsプロジェクトで利用する場合

たとえば、次のようなNode.jsプロジェクトがあるとします。

my-project
├─ package.json
├─ src
└─ public

最初にVSCodeでmy-projectフォルダを開きます。

次にターミナルを開き、必要なパッケージをインストールします。

npm install

続いて開発サーバーを起動します。

npm run dev

プロジェクトによっては、次のようなURLが表示されます。

http://localhost:3000

開発サーバーを起動した状態でGitを操作したい場合は、別のターミナルを作成します。

git status

開発が終わったら、サーバーを実行しているターミナルで次のキーを押します。

Ctrl + C

基本的な開発作業は、次のような流れになります。

コードを書く
↓
ターミナルで実行する
↓
結果を確認する
↓
コードを修正する
↓
再び実行する

VSCodeの統合ターミナルを利用すれば、この一連の作業を1つのアプリケーション内で行えます。

VSCodeのターミナルを使いこなすポイント

VSCodeのターミナルを使いこなすために最も重要なのは、「ターミナル」と「シェル」の違いを理解することです。

VSCodeの統合ターミナルは、PowerShellやBashなどを表示・操作するための環境です。

実際にコマンドを解釈しているのはPowerShell、Bash、Zshなどのシェルです。

そのため、同じVSCodeを使っていても、選択しているシェルによってコマンドや書き方が異なる場合があります。

WindowsではPowerShell、Web開発ではGit BashやWSL、macOSではZshなど、自分の開発環境に合ったシェルを選ぶことが重要です。

まとめ

VSCodeの統合ターミナルを利用すると、コード編集とコマンド操作を同じ画面で行えます。

プログラムの実行、Git操作、パッケージ管理、開発サーバーの起動、テストなど、現代の開発ではターミナルを使う場面が数多くあります。

初心者の場合は、まず次の操作から覚えるとよいでしょう。

  • ターミナルを開く
  • pwdで現在位置を確認する
  • cdでフォルダを移動する
  • lsなどでファイルを確認する
  • PythonやNode.jsなどのプログラムを実行する
  • Ctrl + Cで実行中のプログラムを停止する
  • 複数のターミナルを使い分ける

これらを覚えたうえで、Git、npm、Python、Dockerなど、自分の開発で必要なCLIツールの操作を少しずつ身につけていけば、VSCodeを使った開発作業をより効率化できます。

以上、VSCodeのターミナルの基本的な使い方についてでした。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次