VSCodeのターミナルで使える拡張機能とは

採用はこちら

VSCodeには、コマンドを実行するための「統合ターミナル」が標準で搭載されています。

統合ターミナルを利用すると、VSCodeを開いたままGitやnpm、Pythonなどのコマンドを実行できます。

さらに、Shell ScriptのエラーチェックやPowerShellの補完、プログラムの簡単な実行などを行いたい場合は、拡張機能を追加することで開発環境をさらに便利にできます。

ただし、GitやNode.js、PythonなどはVSCodeの拡張機能ではありません。

VSCodeのターミナルから呼び出して使用する外部プログラムです。

そのため、VSCodeのターミナル環境を整える場合は、「VSCode標準機能」「VSCode拡張機能」「外部CLIツール」を区別して考えることが重要です。

目次

VSCodeには統合ターミナルが標準搭載されている

VSCodeには、Integrated Terminalと呼ばれる統合ターミナルが標準搭載されています。

そのため、基本的なコマンド操作だけであれば、ターミナル専用の拡張機能を追加する必要はありません。

統合ターミナルでできること

VSCodeの統合ターミナルでは、たとえば次のようなコマンドを実行できます。

git status
npm install
npm run dev
python app.py
node index.js

ただし、これらのコマンドを使用するには、それぞれ対応するプログラムがパソコンにインストールされている必要があります。

たとえば、gitコマンドを使用するにはGit、npmやnodeを使用するにはNode.js、pythonを使用するにはPythonが必要です。

VSCodeのShell Integrationとは

VSCodeのターミナルには「Shell Integration」という標準機能があります。

Shell Integrationを利用すると、VSCodeがターミナル内で実行されたコマンドや現在の作業ディレクトリなどを認識できるようになります。

Shell Integrationで利用できる主な機能

Shell Integrationによって、主に次のような機能を利用できます。

  • 実行したコマンドの検出
  • 現在の作業ディレクトリの検出
  • コマンド単位での移動
  • Command Guide
  • Sticky Scroll
  • Quick Fix
  • ターミナル内リンクの認識
  • コマンド出力の操作

通常のターミナルよりもVSCode本体との連携が強くなるため、コマンド操作を効率化できます。

Shell Integrationの対応Shell

対応するShellはOSによって異なります。

LinuxやmacOSでは、主に次のShellがサポートされています。

  • Bash
  • Zsh
  • Fish
  • PowerShell

Windowsでは、主に次のShellが利用できます。

  • PowerShell
  • Git Bash

Shell Integrationは通常、自動的に有効になります。

ただし、Shellのバージョンや初期化設定などによっては、自動で有効にならない場合もあります。

参考サイト

VS Code の統合ターミナルで Git Bash や fish もサポートされたので試してみた

ShellCheck

Shell Scriptを書く場合に便利なのが「ShellCheck」です。

ShellCheckは、BashなどのShell Scriptに含まれる問題を検出するLintツールです。

VSCode向けのShellCheck拡張機能を使用すると、Shell Scriptを書きながら問題点を確認できます。

ShellCheckでできること

ShellCheckでは、たとえば次のような問題を検出できます。

  • 変数の引用符不足
  • 誤った条件式
  • 未使用変数
  • 不適切なコマンド記述
  • 移植性に関する問題
  • Shell特有の記述ミス

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

name=$1

if [ $name = "admin" ]; then
    echo "Hello Admin"
fi

Shell Scriptでは、変数に空白や空文字が含まれる場合を考慮して、変数を引用符で囲んだ方が安全なケースがあります。

ShellCheckを利用すれば、このような問題をエディター上で見つけやすくなります。

Quick Fixにも対応している

ShellCheck拡張機能はQuick Fixにも対応しています。

問題によっては、VSCode上から修正候補を確認できます。

Shell Scriptを書く機会が多い場合は、導入する価値の高い拡張機能です。

ShellCheck本体のインストールについて

現在のVSCode向けShellCheck拡張機能では、対応する主要プラットフォーム向けのShellCheckバイナリが同梱されています。

そのため、一般的なWindows、macOS、Linux環境では、ShellCheck本体を別途手動インストールしなくても利用できる場合があります。

ただし、環境によっては別途設定が必要になる場合があります。

Bash IDE

Bashを本格的に編集する場合は「Bash IDE」も便利です。

Bash IDEは、VSCodeにBash向けのLanguage Server機能を追加する拡張機能です。

Bash IDEでできること

Bash IDEでは、主に次の機能を利用できます。

  • コード補完
  • 定義ジャンプ
  • 参照検索
  • シンボル検索
  • シンボル名の変更
  • 診断機能
  • コードフォーマット
  • スニペット

複数の関数を含む大きなShell Scriptを扱う場合には、特に便利です。

ShellCheckとの違い

Bash IDEとShellCheckは役割が異なります。

ShellCheckは、主にShell Scriptの問題を検出するためのLintツールです。

一方、Bash IDEは、補完や定義ジャンプなどを提供し、Bashの編集環境そのものを強化します。

そのため、本格的にBashを書く場合は、次のように組み合わせる方法があります。

Bash IDE
+
ShellCheck
+
shfmt

ShellCheckでLintを行い、shfmtでフォーマットを行うと、Shell Scriptの開発環境を整えやすくなります。

PowerShell

Windows環境でPowerShellスクリプトを書く場合は、Microsoft公式の「PowerShell」拡張機能が便利です。

単にPowerShellをターミナルとして使うだけなら必須ではありません。

PowerShellスクリプトの編集やデバッグを本格的に行いたい場合に利用します。

PowerShell拡張機能でできること

主な機能は次のとおりです。

  • 構文ハイライト
  • IntelliSense
  • コードスニペット
  • 定義ジャンプ
  • 参照検索
  • シンボルナビゲーション
  • デバッグ
  • PowerShell Script Analyzerによる診断
  • 選択したコードの実行

PowerShellスクリプトを書く人にとって、VSCodeを本格的なPowerShell開発環境として利用できるようになる拡張機能です。

F8で選択したコードを実行できる

PowerShell拡張機能では、選択したコードをF8キーで実行できます。

たとえば、次のコードを選択します。

Get-Process

その状態でF8を押すと、PowerShellのターミナルへコードを送って実行できます。

スクリプトを少しずつ確認しながら実行したい場合に便利です。

PowerShell 7系を利用するのがおすすめ

現在のPowerShell拡張機能では、PowerShell 7以降のサポート中バージョンが主な対象です。

Windows PowerShell 5.1については、限定的なサポートとなっています。

これからPowerShellの開発環境を構築する場合は、特別な理由がなければPowerShell 7系を利用する方が適しています。

Code Runner

PythonやJavaScriptなどのコードを簡単に実行したい場合は「Code Runner」も便利です。

Code Runnerを利用すると、エディター上からコードを実行できます。

Code Runnerで実行できる言語

Code Runnerは多数のプログラミング言語やスクリプトに対応しています。

代表例として次のようなものがあります。

  • JavaScript
  • TypeScript
  • Python
  • Java
  • C
  • C++
  • Go
  • PHP
  • Rust
  • PowerShell
  • Bash

さまざまな言語のコードを手軽に実行できるのが特徴です。

JavaScriptを実行する例

たとえば、次のJavaScriptを書いたとします。

console.log("Hello VSCode");

通常はターミナルから次のように実行します。

node index.js

Code Runnerを導入すると、VSCode上の「Run Code」などから実行できます。

Code Runnerはターミナル専用拡張機能ではない

Code Runnerは厳密には「ターミナルを強化する拡張機能」ではありません。

エディターからプログラムを簡単に実行するための拡張機能です。

設定によっては、実行結果をVSCodeのIntegrated Terminalへ表示できます。

そのため、ターミナルと組み合わせて利用する拡張機能の一つと考えると分かりやすいでしょう。

実行環境は別途必要

Code Runnerをインストールしただけで、PythonやNode.jsなどが使えるようになるわけではありません。

たとえば、Pythonコードを実行するならPython本体、JavaScriptをNode.jsで実行するならNode.jsが必要です。

関係を整理すると、次のようになります。

Code Runner
↓
Python・Node.js・gccなどの実行環境を呼び出す
↓
プログラムが実行される

Code Runnerはあくまで、既存の実行環境を簡単に呼び出すための拡張機能です。

Terminal-To-Here

現在開いているファイルの場所へターミナルを簡単に移動したい場合は「Terminal-To-Here」が便利です。

Terminal-To-Hereでできること

代表的なコマンドとして次のものがあります。

cdToCurrentFile

現在開いているファイルのディレクトリへ移動します。

newTerminalInCurrentFile

現在開いているファイルのディレクトリを基準として、新しいターミナルを作成します。

navigateUp

現在のディレクトリから親ディレクトリへ移動します。

深いディレクトリ構造で便利

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

project/
├─ src/
│  └─ components/
│     └─ Header.js
└─ package.json

Header.jsを開いている状態で、そのファイルが存在するディレクトリをターミナルの作業場所にしたい場合があります。

Terminal-To-Hereを利用すると、長いcdコマンドを入力せずに移動できます。

Open Terminal Here

同じような用途の拡張機能として「Open Terminal Here」もあります。

現在開いているファイルやExplorer上で選択した項目を基準として、ターミナルを開くことができます。

VSCode標準機能でも代用できる場合がある

ただし、Explorerに表示されているフォルダからターミナルを開くだけであれば、VSCode標準機能でも対応できます。

Explorerでフォルダを右クリックすると、

Open in Integrated Terminal

を利用できます。

そのため、単純にフォルダからターミナルを開きたいだけであれば、追加の拡張機能を入れる必要はありません。

現在開いているファイルの位置とターミナルを頻繁に連動させたい場合に、Terminal-To-HereやOpen Terminal Hereを検討するとよいでしょう。

ターミナルで使用するShellを変更する方法

VSCodeでは、統合ターミナルで使用するShellを変更できます。

Terminal: Select Default Profileを使用する

Windowsでは、まずコマンドパレットを開きます。

Ctrl + Shift + P

macOSでは次のショートカットを使用します。

Command + Shift + P

続いて、

Terminal: Select Default Profile

を検索します。

環境によって、次のようなShellが表示されます。

  • PowerShell
  • Command Prompt
  • Git Bash
  • WSL

使用したいShellを選択すれば、以後そのShellをデフォルトとして利用できます。

Git BashもVSCodeのターミナルで利用できる

WindowsでGit for Windowsをインストールすると、Git BashをVSCodeのターミナルとして利用できます。

Git Bashでは、LinuxやmacOSに近いコマンドを使用できます。

たとえば、次のようなコマンドです。

pwd
ls
mkdir test
rm sample.txt

Gitの操作もそのまま実行できます。

git status
git add .
git commit -m "update"
git push

Git BashはVSCode拡張機能ではない

注意したいのは、Git BashそのものはVSCodeの拡張機能ではないことです。

通常はGit for WindowsとともにインストールされるShell環境です。

VSCodeがインストール済みのGit Bashを認識し、ターミナルのProfileとして利用します。

GitやnpmもVSCode拡張機能ではない

VSCodeを使い始めたばかりの場合、拡張機能とCLIツールを混同しやすいため注意が必要です。

たとえば、次のようなものはVSCode拡張機能ではありません。

  • Git
  • Node.js
  • npm
  • pnpm
  • Python
  • GitHub CLI
  • Docker CLI

これらは、OS上にインストールして使用するプログラムやCLIツールです。

VSCodeのターミナルは、これらのプログラムを呼び出しているだけです。

Gitの場合

Gitコマンドを利用するには、Gitをインストールします。

git status

npmの場合

npmを使用するには、通常Node.jsをインストールします。

npm install
npm run dev

Pythonの場合

Pythonコマンドを使用するには、Python本体をインストールします。

python app.py

この違いを理解しておくと、VSCodeの環境構築で迷いにくくなります。

ターミナル関連拡張機能のおすすめ構成

ターミナル関連の拡張機能をすべてインストールする必要はありません。

目的に合わせて必要なものだけ選ぶ方が管理しやすくなります。

Bashを書く場合

おすすめの構成は次のとおりです。

VSCode統合ターミナル
+
Bash IDE
+
ShellCheck
+
shfmt

Bash IDEで補完や定義ジャンプを利用し、ShellCheckでLint、shfmtでフォーマットを行う構成です。

PowerShellを書く場合

PowerShellスクリプトを本格的に書く場合は、次の構成が適しています。

VSCode統合ターミナル
+
PowerShell 7
+
PowerShell拡張機能

単にPowerShellのコマンドを実行するだけなら、PowerShell拡張機能は必須ではありません。

Web開発をする場合

Node.jsを使った一般的なWeb開発なら、特別なターミナル拡張機能がなくても十分です。

VSCode
+
Git
+
Node.js
+
PowerShellまたはGit Bash

この構成だけでも、

npm install
npm run dev
npm run build
git status
git push

などを実行できます。

必要になった段階でCode RunnerやShellCheckなどを追加するとよいでしょう。

VSCodeの拡張機能をインストールする方法

VSCodeの拡張機能はExtensionsビューからインストールできます。

Extensionsビューを開く

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

Ctrl + Shift + X

macOSでは、次のショートカットです。

Command + Shift + X

Extensionsビューが表示されたら、検索欄に拡張機能名を入力します。

たとえば、

ShellCheck

と検索し、目的の拡張機能を選択して「Install」をクリックします。

ターミナルからインストールする方法

VSCodeのcodeコマンドが利用できる環境では、ターミナルから拡張機能をインストールすることもできます。

PowerShell拡張機能なら、次のように実行します。

code --install-extension ms-vscode.PowerShell

ShellCheckなら次のように実行できます。

code --install-extension timonwong.shellcheck

複数のPCで同じVSCode環境を構築する場合などに便利です。

VSCodeのターミナルは標準機能だけでも十分高機能

現在のVSCodeでは、統合ターミナル自体が非常に高機能です。

標準機能だけでも、次のような操作が可能です。

  • 複数ターミナルの作成
  • ターミナルの分割
  • Terminal Profileの変更
  • Shell Integration
  • コマンド検出
  • 作業ディレクトリの検出
  • ターミナル内リンク
  • 検索
  • Sticky Scroll
  • Quick Fix
  • Tasksとの連携

そのため、「ターミナルを便利にしたいから、とりあえず拡張機能をたくさん入れる」という方法はあまりおすすめできません。

必要な拡張機能だけを追加するのがおすすめ

VSCodeのターミナル環境を構築する場合は、まず標準機能を使用し、不足している機能だけを拡張するのがおすすめです。

基本的には、次の流れで考えると分かりやすいでしょう。

VSCodeの統合ターミナルを使う
↓
PowerShellやGit Bashなど使用するShellを決める
↓
Git・Node.js・Pythonなど必要なCLIをインストールする
↓
必要に応じてVSCode拡張機能を追加する

たとえば、Web開発が中心なら、GitやNode.jsがあれば多くの作業を標準ターミナルだけで行えます。

Shell Scriptを書く機会が増えたらShellCheckやBash IDEを追加し、PowerShellスクリプトを本格的に扱うならPowerShell拡張機能を導入する、といった形が適しています。

VSCodeでは標準ターミナル自体が充実しているため、拡張機能を増やしすぎず、目的に合ったものだけを導入することが、快適な開発環境を作るポイントです。

以上、VSCodeのターミナルで使える拡張機能とはについてでした。

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

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