TechBlog
tools

VS Code生産性向上テクニック：開発効率を2倍にする設定とショートカット

by あくえり
#vscode #エディタ #生産性 #開発環境
目次

VS Codeをもっと使いこなす

Visual Studio Codeは世界で最も使われているコードエディタです。デフォルトの状態でも十分使えますが、設定やショートカットを覚えることで、開発効率を大幅に向上させることができます。

必須ショートカットキー

ファイル操作

ショートカット動作
Cmd/Ctrl + Pファイル検索（クイックオープン）
Cmd/Ctrl + Shift + Pコマンドパレット
Cmd/Ctrl + Bサイドバーの表示/非表示
Cmd/Ctrl + Jターミナルの表示/非表示

編集操作

ショートカット動作
Alt + 上下矢印行の移動
Shift + Alt + 上下矢印行の複製
Cmd/Ctrl + D同じ単語を追加選択
Cmd/Ctrl + Shift + L同じ単語をすべて選択

おすすめ設定

settings.jsonに以下の設定を追加すると、快適な開発環境が整います：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "files.autoSave": "onFocusChange"
}

おすすめ拡張機能

必須級

  • Prettier — コードフォーマッター
  • ESLint — JavaScript/TypeScriptリンター
  • GitLens — Git履歴の可視化

生産性向上

  • Auto Rename Tag — HTMLタグの自動リネーム
  • Path Intellisense — ファイルパスの自動補完
  • Error Lens — エラーをインラインで表示

見た目

  • One Dark Pro — 人気のダークテーマ
  • Material Icon Theme — ファイルアイコンテーマ

マルチカーソル活用術

VS Codeの強力な機能の一つがマルチカーソルです：

  1. Alt + クリック — 任意の位置にカーソルを追加
  2. Cmd/Ctrl + Alt + 上下矢印 — 上下にカーソルを追加
  3. Cmd/Ctrl + D — 次の同じ単語にカーソルを追加

これらを組み合わせることで、繰り返しの編集作業を一括で行えます。

まとめ

VS Codeのショートカットキーと設定を覚えることで、日々の開発作業が格段に効率化されます。まずは基本的なショートカットから覚えて、徐々にカスタマイズしていきましょう。

共有: