0

[Series VS Code Mastery] Bài 5: Làm chủ Git và GitLens - Quản lý Source Code như một Hacker

Quản lý Git đỉnh cao trên VS Code: Khi Editor là mạng sống của Backend Developer

Chào anh em, nếu anh em đang làm việc độc lập thì Git có vẻ chỉ là công cụ để "lưu game". Nhưng khi bước vào các dự án lớn, làm việc cùng nhiều team, thao tác với hàng chục microservices hay áp dụng Clean Architecture phức tạp, Git chính là mạng sống.

Thay vì phải gõ những dòng lệnh Git dài ngoằng trên Terminal và chật vật giải quyết conflict bằng tay, VS Code cung cấp một bộ công cụ Source Control trực quan và cực kỳ mạnh mẽ. Hôm nay chúng ta sẽ cùng khai phá nó!

1. Source Control Tích Hợp (Phím tắt: Ctrl + Shift + G)

Tab Source Control (biểu tượng nhánh cây ở Side Bar) là nơi anh em theo dõi mọi thay đổi trong working directory.

  • Staging trực quan: Thay vì gõ git add . (có rủi ro add nhầm file log hay config nhạy cảm), anh em có thể xem chính xác từng file bị thay đổi. Bấm vào dấu + cạnh tên file để đưa vào Staging Area, hoặc chọn một đoạn code nhỏ trong file và click chuột phải chọn Stage Selected Ranges (chỉ commit một vài dòng code cụ thể, giữ lại các dòng nháp).
  • Timeline View: Dưới cùng của thanh Explorer có một mục tên là Timeline. Nó hiển thị lịch sử lưu file cục bộ (Local History) của VS Code kể cả khi anh em chưa commit! Nếu lỡ tay xóa một đoạn code hay và ấn Save, anh em vẫn có thể khôi phục lại từ Timeline này.

2. Quyền năng của GitLens (Extension Bắt Buộc Phải Cài)

Nhắc đến Git trong VS Code thì không thể thiếu GitLens. Đây là extension "quốc dân" giúp anh em hiểu rõ vòng đời của từng dòng code.

  • Inline Blame: Ngay khi anh em trỏ chuột vào một dòng code, GitLens sẽ hiển thị mờ mờ ở cuối dòng thông tin: Ai là người viết dòng này, cách đây bao lâu, và nội dung commit là gì. Cực kỳ hữu ích khi đang review code hoặc tìm người để "đổ vỏ" khi hệ thống sập.
  • File History & Line History: Click chuột phải vào file hoặc một dòng code, chọn GitLens: Show File History. Nó sẽ liệt kê toàn bộ các commit từng chạm vào file này. Rất tiện để xem một hàm logic đã bị biến đổi như thế nào qua các đợt refactor.
  • Commit Graph: Cung cấp một biểu đồ cây trực quan (như SourceTree hay GitKraken) ngay trong tab GitLens ở Bottom Panel. Anh em có thể xem luồng rẽ nhánh, merge branch của toàn bộ team một cách rõ ràng.

3. Xử Lý Merge Conflict "Nhẹ Nhàng" với 3-Way Merge Editor

Nỗi ám ảnh lớn nhất khi gõ lệnh git pull hoặc git merge là dòng chữ Merge Conflict. Khi hai người cùng sửa một file (ví dụ: cùng thêm hàm mới vào file Repository hoặc Controller), Git sẽ bị bối rối.

Từ các phiên bản gần đây, VS Code đã tích hợp 3-Way Merge Editor. Khi mở file bị conflict, anh em sẽ thấy màn hình chia làm 3 phần:

  • Incoming (Bên trái): Code của branch đang muốn gộp vào (code của đồng nghiệp).
  • Current (Bên phải): Code hiện tại trên máy của anh em.
  • Result (Bên dưới): Kết quả sau khi gộp.

Chỉ cần bấm các nút Accept Incoming, Accept Current, hoặc Accept Both để giải quyết. Giao diện này giúp anh em có cái nhìn toàn cảnh, đảm bảo không bị sót logic quan trọng nào khi ghép code.

4. Các thao tác "Cứu Hộ" Nhanh (Stash & Rebase)

  • Git Stash qua GUI: Đang code dở một feature thì sếp yêu cầu nhảy sang nhánh hotfix để sửa gấp một lỗi trên production. Thay vì phải commit đoạn code dang dở (làm rác lịch sử commit), anh em chỉ cần mở tab Source Control, click dấu ba chấm ... -> Stash -> Stash (Include Untracked). Lúc này working tree sẽ sạch sẽ để chuyển nhánh. Sửa bug xong quay lại, chọn Stash Apply để lấy lại code cũ.
  • Interactive Rebase: Thay vì gõ git rebase -i, GitLens hỗ trợ giao diện để anh em gộp (squash), sửa message (reword), hoặc xóa bỏ (drop) các commit thừa trước khi tạo Pull Request, giúp lịch sử Git gọn gàng và chuyên nghiệp hơn.

Lời kết

Làm chủ được các công cụ này, tốc độ xử lý branch và làm việc nhóm của anh em sẽ tăng lên đáng kể. Không còn sợ những pha conflict hàng chục file nữa!


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.