はじめに
VSCodeの真の力を引き出すには、適切な設定と拡張機能の活用が不可欠です。 この章では、開発効率を劇的に向上させる設定と、必須の拡張機能を紹介します。
基本設定のカスタマイズ
エディタの外観
フォントサイズの調整
設定から 「Editor: Font Size」を変更
"editor.fontSize": 16 カラーテーマの変更
カラーテーマ で作業環境をカスタマイズ
- コマンドパレットを開く（Ctrl/⌘ + Shift + P）
- 「Preferences: Color Theme」を選択
- 好みのテーマを選択
コーディング補助
自動保存
自動保存 を有効化して作業効率アップ
"files.autoSave": "afterDelay" 保存時の自動フォーマット
フォーマット で一貫したコードスタイルを維持
"editor.formatOnSave": true 必須の拡張機能
🎨
Prettier
コードフォーマッター の定番。様々な言語に対応し、チーム開発で重宝します。
主な機能：
- 自動インデント調整
- 一貫したコードスタイル
- 複数言語対応
設定方法：
- 拡張機能をインストール
- デフォルトフォーマッターとして設定
- 保存時の自動フォーマットを有効化
🔍
ESLint
リンター として最も人気のある拡張機能です。
主な機能：
- コードの問題を検出
- ベストプラクティスの提案
- 自動修正機能
設定方法：
- 拡張機能をインストール
- プロジェクトに.eslintrcを追加
- 保存時の自動修正を設定
🌐
Live Server
ライブリロード 機能付きの開発サーバーを提供します。
主な機能：
- リアルタイムプレビュー
- 自動ブラウザ更新
- クロスブラウザ対応
使用方法：
- HTMLファイルを右クリック
- 「Live Serverで開く」を選択
- 自動的にブラウザが起動
📝
Path Intellisense
パス補完 機能を提供し、ファイルの参照を効率化します。
主な機能：
- ファイルパスの自動補完
- インポート文の補助
- 相対パスのサポート
使用方法：
- パスを入力開始
- 候補が自動表示
- 適切なパスを選択
🔄
GitLens
Gitレンズ でコードの変更履歴を可視化します。
主な機能：
- 行ごとの変更履歴
- ブランチの視覚化
- コミット検索
主な使い方：
- コード行にカーソルを合わせる
- 変更履歴を確認
- 詳細な比較を表示
生産性を向上させる設定例
エディタの効率化
"editor.minimap.enabled": false, // ミニマップを非表示
"editor.wordWrap": "on", // 長い行を折り返し
"editor.tabSize": 2, // インデントサイズ
"editor.renderWhitespace": "all" // 空白文字を可視化
ファイル管理
"files.trimTrailingWhitespace": true, // 末尾の空白を削除
"files.insertFinalNewline": true, // ファイル末尾に改行を追加
"files.exclude": { // 非表示にするファイル
"**/.git": true,
"**/.DS_Store": true
}