開発効率を上げるVSCodeの設定

VSCodeの設定をカスタマイズして、開発効率を向上させましょう。

必須拡張機能

1. プログラミング言語

• Ruby - Ruby言語サポート
• JavaScript (ES6) code snippets - JSスニペット
• HTML CSS Support - HTML/CSSサポート

2. 開発支援

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

3. 効率化

• Auto Rename Tag - HTMLタグの自動リネーム
• Bracket Pair Colorizer - 括弧の色分け
• Indent Rainbow - インデントの可視化

settings.jsonの設定

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "workbench.colorTheme": "One Dark Pro",
  "editor.minimap.enabled": false
}

キーボードショートカット

よく使うショートカット

• Cmd + Shift + P - コマンドパレット
• Cmd + P - ファイル検索
• Cmd + Shift + F - 全体検索
• Cmd + D - 複数選択
• Alt + ↑/↓ - 行の移動

これらの設定により、開発効率が大幅に向上します！