Visual Studio Code、通称VSCodeは、Microsoftが提供している高機能なコードエディタです。
Windows、macOS、Linuxに対応しており、Web制作やプログラミング、データ分析など幅広い用途で利用されています。
VSCodeは単にコードを書くためのテキストエディタではありません。
コード補完、検索、デバッグ、Git連携、統合ターミナル、拡張機能、AI支援など、開発を効率化する多くの機能が用意されています。
特に、ショートカットやコマンドパレット、クイックオープンなどを使いこなすと、マウス操作を減らしながらスムーズに作業できるようになります。
VSCodeの便利な基本機能
コマンドパレットを使う
VSCodeを効率よく操作するうえで、特に覚えておきたいのがコマンドパレットです。
WindowsやLinuxでは、次のショートカットで開けます。
Ctrl + Shift + P
macOSでは、次のショートカットを使用します。
Command + Shift + P
コマンドパレットを開くと、VSCodeで利用できるさまざまな機能を検索して実行できます。
例えば、次のようなキーワードを入力すると関連機能を探せます。
- Format
- Git
- Terminal
- Settings
- Extensions
- Reload
メニューの場所を覚えていなくても、機能名が分かればすぐに実行できるのがメリットです。
VSCodeを使い始めたばかりの人は、まずコマンドパレットに慣れておくとよいでしょう。
クイックオープンでファイルを素早く開く
プロジェクト内のファイルを毎回エクスプローラーから探す必要はありません。
WindowsやLinuxでは、次のショートカットでクイックオープンを利用できます。
Ctrl + P
macOSでは次のショートカットです。
Command + P
ファイル名の一部を入力すると候補が表示されるため、深いフォルダ階層にあるファイルでもすぐに開けます。
ファイル数の多いプロジェクトでは、エクスプローラーをたどるよりもクイックオープンを利用したほうが効率的です。
複数カーソルを使う
VSCodeには、複数の場所を同時に編集できるマルチカーソル機能があります。
Windowsでは、Alt + クリックでカーソルを追加できます。
macOSでは、Option + クリックを利用します。
例えば、似たコードを複数行まとめて編集したい場合に便利です。
Windowsでは、Ctrl + Alt + ↑またはCtrl + Alt + ↓で上下にカーソルを追加することもできます。
また、同じ文字列の次の一致箇所を選択する場合はCtrl + D、同じ文字列をすべて選択する場合はCtrl + Shift + Lを利用できます。
大量の似た記述をまとめて編集するときに役立つ機能です。
コード編集を効率化する機能
IntelliSenseを活用する
VSCodeには、コード入力を支援するIntelliSenseがあります。
IntelliSenseでは、言語や使用している拡張機能に応じて、次のような機能を利用できます。
- コード補完
- メソッド候補
- 関数候補
- パラメータ情報
- ドキュメント表示
- 型情報の表示
例えばJavaScriptで次のように入力します。
console.
すると、logやerrorなどの候補が表示されます。
候補を利用すれば入力量を減らせるだけでなく、スペルミスや記述ミスの防止にもつながります。
ただし、IntelliSenseの対応状況はプログラミング言語によって異なります。
JavaScriptやTypeScript、HTML、CSSなどは標準機能が充実していますが、PythonやJava、C/C++などでは対応する拡張機能を導入することで機能を強化できる場合があります。
定義へ移動する
関数やクラス、変数などがどこで定義されているか確認したい場合は、定義へ移動する機能が便利です。
標準キーバインドでは、F12でGo to Definitionを実行できます。
例えば、次のような関数があったとします。
calculatePrice();
calculatePriceにカーソルを合わせてF12を押すと、その関数が定義されている場所へ移動できます。
複数ファイルで構成されたプロジェクトでは、特に便利な機能です。
Peek Definitionで定義をその場で確認する
定義している場所へ移動せず、現在の画面上で実装内容を確認したい場合はPeek Definitionが便利です。
Windowsでは、標準設定ならAlt + F12で利用できます。
現在編集中のコードから離れずに、小さなウィンドウで定義内容を確認できます。
少しだけ実装内容を確認したい場合に便利です。
参照箇所を確認する
関数や変数がどこから使用されているか調べたい場合は、Find All Referencesを利用できます。
標準キーバインドでは、Shift + F12です。
コードを修正したときに、どのファイルや処理へ影響するのか確認したい場合にも役立ちます。
シンボル名を変更する
変数名や関数名を変更するときは、単純な検索・置換ではなくRename Symbolを利用すると便利です。
標準キーバインドでは、F2です。
例えば、次の変数名を変更したいとします。
const userData = {};
userDataにカーソルを合わせてF2を押し、新しい名前を入力すると、言語サービスが認識している参照箇所もまとめて変更できます。
ただし、Rename Symbolへの対応状況は言語や拡張機能によって異なります。
すべてのコードで必ず安全に変更できるわけではないため、変更後は差分を確認することが重要です。
検索と置換を活用する
ファイル内を検索する
現在開いているファイル内を検索する場合は、次のショートカットを使用します。
Ctrl + F
特定の文字列や関数名を探したいときに便利です。
ファイル内を置換する
文字列を別の内容へ変更したい場合は、次のショートカットを利用できます。
Ctrl + H
例えば、oldNameをnewNameへ置き換えるといった操作が可能です。
正規表現にも対応しているため、複雑なパターンを検索・置換することもできます。
プロジェクト全体を検索する
複数のファイルから文字列を探したい場合は、次のショートカットを利用します。
Ctrl + Shift + F
プロジェクト全体から対象文字列を検索し、どのファイルの何行目で使われているか確認できます。
設定値や関数名、CSSクラス名などの使用箇所を調べたい場合に便利です。
検索結果に対して一括置換もできますが、大量のファイルを変更する場合はGitなどで差分を確認してから確定するのがおすすめです。
コードフォーマットを利用する
Format Documentでコードを整える
インデントや空白が崩れたコードは、Format Documentを利用して整形できます。
Windowsでは、標準キーバインドで次のショートカットを利用できます。
Shift + Alt + F
例えば、次のようなコードがあったとします。
function test(){console.log("Hello")}
フォーマッターを利用すると、次のように読みやすい形へ整えられます。
function test() {
console.log("Hello");
}
JavaScriptやTypeScript、JSON、HTML、CSSなどでは標準フォーマッターを利用できる場合があります。
必要に応じてPrettierなどの拡張機能を使うこともできます。
保存時に自動フォーマットする
毎回手動でフォーマットするのが面倒な場合は、保存時に自動フォーマットできます。
設定画面でEditor: Format On Saveを有効にします。
settings.jsonでは、次のように設定できます。
{
"editor.formatOnSave": true
}
保存するたびにコードを自動整形できるため、チーム内でコードの書式を統一しやすくなります。
Auto Saveを利用する
VSCodeには、ファイルを自動保存するAuto Save機能があります。
毎回Ctrl + Sを押す必要がなくなるため、保存忘れの防止に役立ちます。
主な自動保存方法には、次のようなものがあります。
- 一定時間入力がなかったときに保存する
- エディターからフォーカスが外れたときに保存する
- VSCodeのウィンドウからフォーカスが外れたときに保存する
作業スタイルに合わせて設定すると便利です。
統合ターミナルを利用する
VSCodeには統合ターミナルが用意されています。
WindowsやLinuxでは、Ctrl + バッククォートでターミナルを表示できます。
例えば、次のようなコマンドをVSCode上から直接実行できます。
npm install
npm run dev
git status
python app.py
コード編集とターミナル操作を同じ画面内で行えるため、別のアプリへ切り替える必要がありません。
PowerShellやCommand Prompt、bashなど、PC環境に応じて利用可能なシェルを選択できます。
Git連携機能を利用する
VSCodeにはGit連携機能がある
VSCodeにはSource Control機能が標準搭載されており、Gitと連携して変更履歴を管理できます。
ただし、Git本体がVSCodeに含まれているわけではありません。
Git機能を利用する場合は、PCへGitを別途インストールしておく必要があります。
Source Controlビューを開く
WindowsやLinuxでは、次のショートカットでSource Controlビューを開けます。
Ctrl + Shift + G
Source Controlでは、次のような操作を行えます。
- 変更ファイルの確認
- 差分確認
- ステージング
- コミット
- ブランチ操作
- 同期
- マージ競合の確認や解消
Gitコマンドに慣れていない人でも、GUIを使いながら変更履歴を管理できます。
変更差分を確認する
ファイルを変更すると、Git管理下であれば変更前と変更後の差分を確認できます。
意図していないコードまで変更していないか、コミット前に確認する習慣をつけると安全です。
特に一括置換やRename Symbolを使った後は、差分確認を行うことをおすすめします。
デバッグ機能を活用する
ブレークポイントを設定する
VSCodeにはデバッグ機能も用意されています。
コード左側の余白をクリックすると、ブレークポイントを設定できます。
デバッグ実行すると、その行で処理を一時停止できます。
例えば、次のコードがあるとします。
const price = 1000;
const tax = 0.1;
const total = price * (1 + tax);
計算処理の前後にブレークポイントを設定すれば、priceやtaxなどの値を確認できます。
デバッグ中に変数や処理の流れを確認する
VSCodeのデバッグでは、次のような機能を利用できます。
- 変数の確認
- ステップ実行
- コールスタック確認
- ウォッチ式
- デバッグコンソール
単純なconsole.log()だけでは原因を見つけにくい不具合を調査するときに便利です。
画面表示を使いやすくする
エディターを分割する
VSCodeでは、複数のファイルを横や縦に並べて表示できます。
例えば、左側にHTML、右側にCSSを表示すると、画面を切り替えずにコーディングできます。
JavaScriptとテストコード、実装ファイルと設定ファイルなどを並べるのも便利です。
フローティングウィンドウを利用する
現在のVSCodeでは、エディターやターミナル、一部のビューを別ウィンドウとして表示できます。
タブをVSCodeの外へドラッグすると、新しいウィンドウへ移動できます。
デュアルディスプレイを使っている場合は、メイン画面にコード、サブ画面に別ファイルやターミナルを表示すると作業しやすくなります。
Zen Modeを利用する
コード編集に集中したい場合はZen Modeが便利です。
WindowsやLinuxでは、次の順番でキーを押します。
Ctrl + K
続けて、
Z
Zen Modeではサイドバーなどが非表示になり、コード編集に集中しやすい画面になります。
終了する場合はEscを2回押します。
サイドバーを表示・非表示にする
WindowsやLinuxでは、次のショートカットでサイドバーを切り替えられます。
Ctrl + B
ノートPCなど画面が狭い場合は、不要なときにサイドバーを閉じるとコード表示領域を広くできます。
パネルを表示・非表示にする
ターミナルやProblemsなどが表示される下部パネルは、次のショートカットで切り替えられます。
Ctrl + J
コードを書いているときだけパネルを閉じるなど、表示領域を調整できます。
Problemsパネルを活用する
VSCodeでは、プログラム内のエラーや警告をProblemsパネルでまとめて確認できます。
例えば、次のような問題が表示されます。
- 構文エラー
- TypeScriptの型エラー
- ESLintの警告
- その他の診断情報
エラー一覧から対象ファイルや該当行へ直接移動できるため、複数の問題をまとめて修正するときに便利です。
Breadcrumbsを利用する
エディター上部にはBreadcrumbsを表示できます。
Breadcrumbsでは、現在開いているファイルのフォルダ階層やコード構造を確認できます。
例えば、次のような形です。
src > components > Header.js > Header
大きなプロジェクトや長いコードを扱う場合に、現在位置を把握しやすくなります。
Minimapを活用する
VSCodeの右側には、コード全体を縮小表示するMinimapがあります。
ファイル全体の構造や現在のスクロール位置を把握するのに便利です。
数百行以上の長いファイルでは役立ちますが、画面を広く使いたい場合は設定から非表示にすることもできます。
拡張機能を活用する
VSCodeは拡張機能を追加することで、さまざまな開発環境に対応できます。
代表的な拡張機能には、次のようなものがあります。
- Python
- Java関連拡張機能
- C/C++
- Docker
- ESLint
- Prettier
- Remote Development
開発する言語やフレームワークに合わせて必要なものを追加すると便利です。
ただし、拡張機能を大量に導入すると、動作が重くなったり機能同士が競合したりする可能性があります。
必要な拡張機能を中心に導入するのがおすすめです。
Settingsを使い分ける
User Settings
User Settingsは、VSCode全体へ適用される設定です。
例えば、次のような設定に向いています。
- フォントサイズ
- テーマ
- 自動保存
- エディターの表示方法
- 個人的な操作設定
複数のプロジェクトで共通して使いたい設定を登録すると便利です。
Workspace Settings
Workspace Settingsは、特定のワークスペースやプロジェクトへ適用される設定です。
例えば、次のような設定に向いています。
- プロジェクト固有のフォーマッター
- インデント幅
- 言語ごとの設定
- 保存時の処理
チームで.vscode/settings.jsonを共有すれば、プロジェクト単位で設定を統一することもできます。
settings.jsonを編集する
VSCodeの設定はGUIから変更できますが、settings.jsonを直接編集することもできます。
例えば、次のように設定できます。
{
"editor.formatOnSave": true,
"editor.wordWrap": "on"
}
設定項目を細かく管理したい場合に便利です。
Settings Syncを利用する
複数のPCでVSCodeを使っている場合は、Settings Syncが便利です。
Settings Syncでは、次のような情報を同期できます。
- Settings
- Keyboard Shortcuts
- User Snippets
- User Tasks
- UI State
- Extensions
- Profiles
会社のPCと自宅のPCなどで、似た開発環境を利用しやすくなります。
ただし、SSHやDev Container、WSLなどのリモート環境では、拡張機能の扱いが通常のローカル環境と異なる場合があります。
Profilesを使い分ける
Profilesを利用すると、用途ごとにVSCodeの環境を切り替えられます。
例えば、次のような使い分けができます。
Web開発用Profile
JavaScriptやTypeScript、ESLint、Prettierなどを中心にした構成です。
Python開発用Profile
PythonやJupyter関連の拡張機能を中心にした構成です。
軽量作業用Profile
最低限の拡張機能だけを利用する構成です。
用途ごとに不要な拡張機能を読み込まずに済むため、環境を整理しやすくなります。
スニペットを利用する
頻繁に入力するコードは、スニペットとして登録すると便利です。
例えば、HTMLで毎回次のようなコードを書くとします。
<div class="container">
</div>
スニペットへ登録しておけば、短いキーワードを入力するだけで定型コードを展開できます。
コピー＆ペーストを減らせるため、よく使うコードが多い場合に便利です。
AI機能を活用する
GitHub CopilotによるAI支援
現在のVSCodeでは、GitHub Copilotなどを利用したAI機能が開発ワークフローへ深く統合されています。
利用できる主な機能には、次のようなものがあります。
- インラインコード補完
- Chat
- Inline Chat
- Smart Actions
- Agent
- Plan
ただし、AI機能の利用にはサインインや利用条件、プランなどが関係する場合があります。
VSCodeをインストールするだけですべてのAI機能を無制限に利用できるわけではありません。
インラインコード補完を使う
コードを書いていると、AIが次の記述を予測して候補を表示することがあります。
候補が適切であれば、Tabなどで採用できます。
繰り返しの多いコードや定型処理を書く場合に便利です。
Chatを使う
Chatでは、自然言語でコードについて質問できます。
例えば、次のような質問ができます。
- この関数を説明して
- このエラーの原因を調べて
- この処理のテストコードを作って
- このコードをリファクタリングして
コードベースを確認しながら質問できるため、調査や修正の効率化につながります。
Inline Chatを利用する
Inline Chatでは、現在開いているコードの近くでAIへ指示できます。
一部分だけ修正したい場合や、その場でコードを説明してほしい場合に便利です。
ショートカットや挙動はVSCodeのバージョンやAI機能の状態によって変更される可能性があるため、コマンドパレットから確認すると確実です。
Agentを利用する
Agentは、複数のファイルや複数ステップにまたがる作業に向いています。
例えば、次のような作業です。
- 新機能を追加する
- 複数ファイルを修正する
- テストコードを作成する
- エラーを調査して修正する
単純なコード補完よりも、比較的大きな作業をAIへ依頼するときに向いています。
Planを活用する
複雑な変更では、いきなりコードを書き換えるのではなく、Planを使って実装方針を整理する方法もあります。
変更内容や影響範囲を確認してから実装へ進みたい場合に便利です。
VSCodeで覚えておきたいショートカット
WindowsやLinuxを利用している場合は、まず次のショートカットを覚えると便利です。
| 操作 | ショートカット |
|---|---|
| コマンドパレット | Ctrl + Shift + P |
| クイックオープン | Ctrl + P |
| ファイル内検索 | Ctrl + F |
| ファイル内置換 | Ctrl + H |
| プロジェクト全体検索 | Ctrl + Shift + F |
| Source Control | Ctrl + Shift + G |
| サイドバー表示切替 | Ctrl + B |
| パネル表示切替 | Ctrl + J |
| 統合ターミナル | `Ctrl + “ |
| Rename Symbol | F2 |
| 定義へ移動 | F12 |
| 参照箇所を確認 | Shift + F12 |
| Peek Definition | Alt + F12 |
| Format Document | Shift + Alt + F |
| Zen Mode | Ctrl + K → Z |
ショートカットはOSやキーバインド設定によって異なる場合があります。
正確な現在のショートカットを確認したい場合は、コマンドパレットやKeyboard Shortcuts画面を利用すると便利です。
参考サイト
VSCodeの便利なショートカットキーや小技を手癖にして生産性をあげよう
VSCodeを効率よく使うためのおすすめの順番
VSCodeには非常に多くの機能があります。
最初からすべて覚えようとすると大変なので、利用頻度の高い機能から少しずつ覚えるのがおすすめです。
まずは、次の順番で慣れていくとよいでしょう。
- コマンドパレット
- クイックオープン
- ファイル内検索
- プロジェクト全体検索
- 統合ターミナル
- マルチカーソル
- 定義へ移動
- Git連携
- デバッグ
- 拡張機能
- Profiles
- AI機能
特に、Ctrl + Shift + P、Ctrl + P、Ctrl + Shift + F、統合ターミナルのショートカットは使用頻度が高いため、早めに覚えておくと便利です。
まとめ
VSCodeには、コードを書く以外にも開発作業を効率化する多くの機能があります。
特に便利なのは、コマンドパレット、クイックオープン、マルチカーソル、IntelliSense、検索・置換、定義ジャンプ、統合ターミナル、Git連携、デバッグ、Settings Sync、Profilesなどです。
さらに、GitHub Copilotを利用したChatやAgent、PlanなどのAI機能も利用できるため、コード作成だけでなく調査や修正、設計にも活用できます。
ただし、Git本体は別途インストールが必要であり、IntelliSenseやRename Symbolなどの機能は言語や拡張機能によって対応状況が異なります。
AI機能についても、利用条件やプランによって使える範囲が変わる場合があります。
VSCodeのすべての機能を一度に覚える必要はありません。
普段マウスで行っている操作や、何度も繰り返している作業を少しずつショートカットや便利機能へ置き換えていくことで、日々の開発作業を効率化できます。
以上、VSCodeの便利な機能や使い方についてでした。
最後までお読みいただき、ありがとうございました。
