Visual Studio Code（VSCode）とGitHubの連携は、多くの開発者にとって必須のワークフローです。しかし「ただ連携して使う」だけでは、本来の便利さを活かしきれていない場合も多いです。ここでは、一般的な使い方だけでなく、あまり知られていないけれど生産性が爆上がりするワザを12個紹介します。
1. GitHub CodespacesでVSCodeをクラウド化
ローカル環境を汚さずにブラウザやVSCodeで直接開発できる。
- メリット：PCの性能に依存しない
- 活用例：新規プロジェクトの試験運用、社内共有リポジトリの即時編集
2. Pull RequestをVSCode内でレビュー
拡張機能「GitHub Pull Requests and Issues」を使えば、エディタ内でコードレビュー可能。
- コメント・マージ・差分確認まで完結
- ブラウザ⇔エディタの切り替え不要
3. GitHub Copilotでコード補完をAI化
AIが次の行を予測して提案。
- 単純な記述を自動生成
- コメントで指示すると関数全体を提案
4. ローカルブランチの自動同期
「GitHub Repositories」拡張を使うとローカルクローンなしで編集可能。
- 軽量な作業に向く
- 共同作業時の衝突回避にも有効
5. ワークスペースごとのGit設定
VSCodeの.vscode/settings.jsonでプロジェクト固有のGit設定を保存。
- コミットテンプレート指定
- 特定のフォルダだけ無視設定
6. ターミナルから直接GitHub操作
VSCode内蔵ターミナルで
gh pr create
のようにGitHub CLIを利用可能。
- CLIでブランチ作成、PR、Issue管理ができる
7. コミットメッセージのテンプレ自動挿入
拡張機能「Git Commit Template」でメッセージの書式を統一。
- チーム開発でレビュー効率UP
- 例：
feat: 機能追加 / fix: バグ修正
8. リアルタイム共同編集（Live Share）
同じコードを同時編集できる。
- ペアプロや緊急修正に便利
- 参加者のカーソル位置も見える
9. ファイル変更履歴を即時可視化
拡張「GitLens」でファイルの履歴や変更者をインライン表示。
git blame不要- 過去のコミット差分もすぐ確認
10. VSCodeから直接Issue作成
コード上で右クリック→「Create Issue」で該当行にリンク付きIssueを作成。
- バグ報告や改善依頼がスムーズ
11. セキュリティ警告の自動チェック
「GitHub Advanced Security」と連携すると、依存関係の脆弱性をPR時に警告。
- 本番リリース前に脆弱性を防止
12. 自動フォーマット＆Lint修正をPRに適用
CIでPR作成時にESLintやPrettierを走らせ、自動修正コミットを追加。
- レビュー時にスタイル議論をなくす
表：おすすめ拡張機能一覧
| 機能 | 拡張機能名 | 特徴 |
|---|---|---|
| PRレビュー | GitHub Pull Requests and Issues | PRの確認〜マージまでVSCode内で完結 |
| 履歴表示 | GitLens | ファイル変更者・履歴を可視化 |
| AI補完 | GitHub Copilot | AIによるコード自動提案 |
| 共同編集 | Live Share | 同時編集・音声通話対応 |
| テンプレ化 | Git Commit Template | コミット書式を統一 |
💡 まとめ
VSCodeとGitHubは「ただGit管理する」だけでなく、拡張機能やクラウド環境、AI補完を組み合わせることで100倍効率化できます。特にCodespaces・GitLens・Copilotは導入ハードルも低く、即効性があります。
コメント