SJ blog
tools
A

信頼度ランク

S 公式ソース確認済み
A 成功実績多数・失敗例少数
B 賛否両論
C 動作未確認・セキュリティリスク高
Z 個人所感

VSCodeの便利機能5選：知って得する使い方

マルチカーソル・シンボルジャンプ・Dev Containers・launch.jsonデバッグ・Emmetなど、VSCodeで作業効率が上がる機能を5つ厳選して解説します。

#vscode #tools #tips

一言結論

マルチカーソル・F12定義ジャンプ・launch.jsonデバッガーの3機能を使いこなすだけで、「同じ変更を一箇所ずつ直す」「console.logデバッグ」「タブを行き来する」という日常的な時間泥棒を完全に排除できる。

1. マルチカーソル — 同じ変更を複数箇所に同時適用

同じ変数名や文字列を一度に変更するときに使う。マウスとの行き来を最小化できる。

Ctrl + D           → カーソル下の単語を選択 → 次の同じ単語も追加選択（繰り返し可）
Ctrl + Shift + L   → ファイル内の同じ単語をすべて選択
Alt + クリック     → 任意の位置にカーソルを追加
Alt + Shift + I    → 選択行の各行末にカーソルを追加

たとえば const を5箇所同時に let に書き換えたい場合、Ctrl+D を繰り返して全選択し、そのままタイプするだけ。

2. F12 / Ctrl+P — ジャンプとファイル検索

大規模コードベースを素早く移動するための基本操作。

F12              → 定義へジャンプ（型・関数の実装を即確認）
Shift + F12      → 全参照を検索
Alt + F12        → ピーク表示（別タブを開かずに参照先を確認）
Ctrl + P         → ファイル名でファイルを開く
Ctrl + P → @記号 → ファイル内の関数・クラスに直接移動
Ctrl + P → :数字 → 行番号指定でジャンプ

これだけでマウスを使わずにコードの「どこにでも」行ける。

3. launch.json — ブレークポイントデバッグ

console.log デバッグを卒業して、変数の中身をリアルタイムで確認する。

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug current file",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["tsx"],
      "args": ["${file}"],
      "console": "integratedTerminal"
    }
  ]
}

F5 でデバッグ開始 → ブレークポイントで止めて変数を確認 → F10 でステップ実行。

Logpoints も便利：行番号を右クリック → Add logpoint で、ファイルを変更せずに console.log を仕込める。

4. Dev Containers — チーム全員が同じ開発環境

「自分のPCでは動く」問題を根絶する。Node.jsのバージョン違い・OSの差異をコンテナで吸収できる。

// .devcontainer/devcontainer.json
{
  "image": "mcr.microsoft.com/devcontainers/typescript-node:22",
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint"
      ]
    }
  }
}

このファイルをリポジトリに置くだけで、チームメンバー全員が同じNode.jsバージョン・拡張機能セットで開発できる。GitHub Codespacesでもそのまま使える。

5. Emmet — HTML/CSSの超速入力

HTMLを書く速度が劇的に上がる省略記法。JSX（React）でも使える。

# 入力して Tab を押す
div.container>ul>li*3>a      →  .container>ul>li×3 の構造を展開
table>thead>tr>th*3^tbody>tr*3>td*3  →  3列3行のテーブル
form>input[type=text name=email]+button{送信}  →  フォーム要素

CSS でも使える：

/* 入力して Tab */
m10    → margin: 10px
p20    → padding: 20px
dib    → display: inline-block
bgc    → background-color: ;

参考: VSCode 公式ドキュメント / Emmet チートシート