ใช้ Git ใน VS Code: Extension และ Feature ที่ต้องรู้

Categories

VS Code (Visual Studio Code) เป็น Text Editor ที่ได้รับความนิยมมากที่สุดในปัจจุบัน และมี Integration ที่ดีกับ Git มากมาย ไม่ว่าจะเป็น Built-in Source Control Panel, Extension ต่างๆ, และ Keyboard Shortcuts ที่ช่วยให้คุณใช้งาน Git ได้อย่างมีประสิทธิภาพ

Source Control Panel ใน VS Code

VS Code มี Source Control Panel ในตัว ซึ่งเป็นเครื่องมือสำหรับการจัดการ Git Repository โดยตรง คุณสามารถเปิด Source Control Panel ได้โดยกดปุ่ม Ctrl+Shift+G (Windows/Linux) หรือ Cmd+Shift+G (Mac)

Ctrl+Shift+G (Windows/Linux)
Cmd+Shift+G (Mac)

ใน Source Control Panel คุณจะเห็น:

  • ไฟล์ที่มีการเปลี่ยนแปลง (Changed files) แบ่งออกเป็น Staged และ Unstaged
  • Diff View สำหรับดูผลต่างของแต่ละไฟล์
  • Commit Message Input Box เพื่อพิมพ์ข้อความ Commit
  • Branch Selector เพื่อสลับ Branch

การ Stage และ Unstage ไฟล์

ใน Source Control Panel คุณสามารถ Stage ไฟล์โดยคลิก + ที่ด้านข้างของชื่อไฟล์ หรือ Unstage โดยคลิก – และหาก Click ไปที่ชื่อไฟล์ คุณจะเห็น Inline Diff View ที่แสดงเส้นสีแดงสำหรับบรรทัดที่ลบไป และเส้นสีเขียวสำหรับบรรทัดที่เพิ่มเข้ามา

Keyboard Shortcuts:
Ctrl+K M - Mark file as merged (after conflict resolution)
Ctrl+Alt+Z - Revert changes
Alt+Click - Discard single hunk

Inline Diff View

Inline Diff View ช่วยให้คุณเห็นการเปลี่ยนแปลงในไฟล์ได้อย่างชัดเจน บรรทัดที่เปลี่ยนแปลงจะแสดงเลขบรรทัดสีแดง สำหรับบรรทัดที่ลบไป และสีเขียวสำหรับบรรทัดที่เพิ่มเข้ามา

VS Code Diff Indicators:
- Red line numbers = Deleted lines
- Green line numbers = Added lines
- Orange line numbers = Modified lines
- Side-by-side diff = Ctrl+Alt+0

GitLens Extension

GitLens เป็น Extension ที่มีประสิทธิภาพมากสำหรับการทำงานกับ Git ใน VS Code ข้อมูลที่สำคัญที่สุดของ GitLens คือ:

  • Inline Blame – แสดงชื่อผู้เขียนและวันที่แก้ไขขณะที่ Hover บนบรรทัดโค้ด
  • Commit History – ดูประวัติของแต่ละไฟล์ หรือแต่ละ Commit
  • Repository View – ดูเส้นทางของ Repository ทั้งหมด
  • Code Lens – แสดงข้อมูล Blame บนหัวของ Function
  • Compare with Earlier Revision – เปรียบเทียบโค้ดปัจจุบันกับ Revision ที่แล้ว

การติดตั้ง GitLens ทำได้โดยเปิด Extensions Marketplace ใน VS Code และค้นหา “GitLens” จากนั้นกด Install

Git Graph Extension

Git Graph เป็น Extension ที่ช่วยให้คุณมองเห็นประวัติ Git ในรูปแบบของ Graph ที่ชัดเจน ซึ่งช่วยให้คุณเข้าใจการ Branch และ Merge ได้ดีขึ้น คุณสามารถ:

  • ดูประวัติ Commit ทั้งหมดในรูปแบบ Graph
  • สลับ Branch ได้อย่างง่ายดาย
  • ดู Merge และ Rebase ได้อย่างชัดเจน
  • Revert Commit หรือ Cherry-pick Commit
  • เปรียบเทียบ Commit ต่างๆ

Keyboard Shortcuts สำหรับ Git

VS Code มี Keyboard Shortcuts หลายตัวที่ช่วยให้การใช้งาน Git เร็วขึ้น:

Ctrl+Shift+G - Open Source Control Panel (Windows/Linux)
Cmd+Shift+G - Open Source Control Panel (Mac)
Ctrl+K Ctrl+S - Open Keyboard Shortcuts
Ctrl+G - Go to Line
Ctrl+Shift+J - Toggle Panel Visibility
Ctrl+B - Toggle Sidebar
Ctrl+P - Quick Open File
Ctrl+Shift+O - Outline View
Alt+Up/Down - Move line up/down

Merge Conflict Resolution

เมื่อเกิด Merge Conflict ใน VS Code จะแสดงตัวเลือกให้คุณเลือก Accept Current Change, Accept Incoming Change, Accept Both Changes, หรือ Compare Changes คุณสามารถกด Ctrl+Shift+M เพื่อแสดง Merge Conflicts ทั้งหมด

Merge Conflict Indicators:
<<<<<<< HEAD
  // Your changes
=======
  // Incoming changes
>>>>>>> branch-name

Buttons:
- Accept Current Change
- Accept Incoming Change
- Accept Both Changes
- Compare Changes

Recommended VS Code Settings สำหรับ Git

เพื่อให้ประสบการณ์การใช้งาน Git ใน VS Code ดีขึ้น ลองตั้งค่าเหล่านี้ใน settings.json:

{
  "git.autofetch": true,
  "git.autorefresh": true,
  "git.confirmSync": false,
  "git.defaultCloneDirectory": "~/projects",
  "git.ignoreLimitWarning": true,
  "git.mergeEditor": true,
  "diffEditor.renderSideBySide": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "gitlens.blame.compact": true,
  "gitlens.codeLens.enabled": true
}

Extensions ที่แนะนำ

1. GitLens – Extension ที่ครอบครัวที่สุดสำหรับการจัดการ Git แสดงข้อมูล Blame, History, Compare

2. Git Graph – แสดง Git History ในรูปแบบ Graph ชัดเจน ช่วยให้เข้าใจ Branch และ Merge

3. Git History – ดู Git History ของแต่ละไฟล์ หรือแต่ละ Line

4. Gitmoji – ช่วยให้เขียน Commit Message ด้วย Emoji ทำให้ Commit Message มีความชัดเจนมากขึ้น

5. GitLab Workflow – ถ้าใช้ GitLab Extension นี้จะช่วยการทำงาน Integration ได้ดี

Terminal Integration

VS Code มี Integrated Terminal ที่ช่วยให้คุณรัน Git Commands ได้โดยตรง เปิด Terminal ด้วย Ctrl+Backtick หรือ View > Terminal

Ctrl+` - Toggle Integrated Terminal (Windows/Linux/Mac)
Ctrl+Shift+` - Create New Terminal
Ctrl+Shift+Delete - Delete Terminal

ในการใช้งาน VS Code กับ Git ควรรู้ว่า Built-in Features นั้นมีความสามารถอยู่แล้ว แต่การติดตั้ง Extensions เช่น GitLens และ Git Graph จะช่วยให้ประสบการณ์การใช้งานดีขึ้นมาก โดยเฉพาะอย่างยิ่งเมื่อต้องทำงานกับ Repository ที่ซับซ้อน