TechBlog
tools

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

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

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 — 次の同じ単語にカーソルを追加

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

開発環境をさらに快適にするアイテム

コードを長時間書く方にとって、周辺機器への投資は生産性に直結します。

HHKB Professional HYBRID Type-S

プログラマーに圧倒的人気の高級キーボード。静電容量無接点方式の打鍵感は一度使うと戻れません。

¥36,850 Amazonで見る

※ アフィリエイトリンクを含みます

Dell U2723QE 27インチ 4Kモニター

USB-C一本で接続・給電。IPS Blackパネルで文字がくっきり表示され、長時間のコーディングでも目が疲れにくい。

¥59,800 Amazonで見る

※ アフィリエイトリンクを含みます

まとめ

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

共有: