VS Codeの生産性を上げる拡張機能と設定

世界中のエンジニアに使われるエディタ Visual Studio Code。標準のままでも優秀ですが、拡張機能と設定を少し整えるだけで開発体験は劇的に変わります。まず入れておきたい定番を厳選しました。

VS Codeとは

VS Code は Microsoft が無料提供する高機能なコードエディタです。軽量ながら拡張機能で自在にカスタマイズでき、Web からインフラまで幅広い開発で標準的に使われています。

まず入れたい拡張機能

Prettier ― コード整形

保存するだけでインデントや改行を自動で整えてくれます。チームで書式を揃えるのに必須級です。

ESLint ― コードチェック

JavaScript / TypeScript の文法ミスや悪い書き方をリアルタイムで指摘してくれます。

GitLens ― Git履歴の可視化

各行を「いつ・誰が」変更したかをエディタ上に表示。バグの原因追跡が一気に楽になります。

日本語言語パック

メニューを日本語化。英語が苦手なうちは導入すると操作に迷いません。

設定しておくと快適な項目

Ctrl + , で設定を開き、次の2つを有効にするのがおすすめです。

// settings.json
{
  "editor.formatOnSave": true,     // 保存時に自動整形
  "files.autoSave": "afterDelay"   // 自動保存
}

覚えると速い定番ショートカット

• Ctrl + P：ファイルを名前で素早く開く
• Ctrl + Shift + P：コマンドパレット（何でも呼び出せる）
• Ctrl + /：選択行をコメントアウト
• Alt + ↑ / ↓：行を上下に移動
• Ctrl + D：同じ単語を次々選択して一括編集
• Ctrl + `：ターミナルの表示切り替え

まとめ

拡張機能は入れすぎると重くなるので、まずは Prettier・ESLint・GitLens の3つから。ショートカットはCtrl+PとCtrl+Shift+Pを覚えるだけで作業スピードが目に見えて上がります。