Posted inGit

Tích hợp Git vào VS Code: Quản lý Branch và Conflict trực quan cho Developer

Git tutorial - IT technology blog
Git tutorial - IT technology blog

Làm chủ Git UI trên VS Code trong 5 phút

Bạn đã bao giờ gõ git status đến lần thứ 10 trong một tiếng chỉ để xem mình đã add file nào chưa? Hồi mới đi làm, mình cũng từng loay hoay như vậy cho đến khi nhận ra tab Source Control của VS Code có thể giải quyết mọi thứ chỉ với vài cú click. Để bắt đầu, bạn hãy nhấn tổ hợp phím Ctrl + Shift + G. Toàn bộ trạng thái dự án sẽ hiện ra ngay lập tức.

Nếu dự án mới tinh, nút Initialize Repository sẽ thay thế lệnh git init khô khan. Mọi thay đổi trong code được liệt kê ở mục Changes. Thay vì gõ git add . cho tất cả, bạn chỉ cần nhấn dấu cộng (+) bên cạnh từng file để đưa vào Staging Area. Việc này giúp bạn kiểm soát kỹ hơn những gì mình sắp đẩy lên server. Gõ message, nhấn Commit, thế là xong!

# Thay vì gõ đống lệnh này:
git add .
git commit -m "feat: add login logic"

# Bạn chỉ cần dùng chuột click (+) và nhấn Commit trên giao diện VS Code.

Quản lý Staging Area và Branch trực quan

Tính năng mình tâm đắc nhất là xem Diff (so sánh thay đổi) siêu tốc. Khi click vào một file trong danh sách Changes, VS Code sẽ mở cửa sổ so sánh song song. Bên trái là code cũ, bên phải là code mới bạn vừa sửa. Thói quen rà soát lại lỗi “ngớ ngẩn” này giúp mình giảm bớt 30% số lượng commit rác không đáng có.

Quản lý Branch (Nhánh) không sợ nhầm

Hãy nhìn xuống góc dưới cùng bên trái màn hình. Tên branch hiện tại (như main hay feature/login) luôn nằm ở đó.

  • Tạo nhánh mới: Click vào tên branch -> Chọn “Create new branch”.
  • Chuyển nhánh (Checkout): Chọn nhánh mục tiêu từ danh sách xổ xuống là xong.
  • Publish branch: Nhấn biểu tượng đám mây để đẩy nhánh local lên GitHub ngay lập tức.

Mình từng có lần code nhầm 2 tiếng đồng hồ trên nhánh main chỉ vì quên không check terminal. Từ khi chuyển sang dùng UI, chỉ cần liếc mắt xuống góc màn hình là biết mình đang đứng ở đâu. Cực kỳ an tâm!

Xử lý Merge Conflict: Không còn là nỗi ác mộng

Conflict (xung đột code) luôn là nỗi sợ của các bạn mới. Nhưng trên VS Code, các file bị lỗi sẽ được đánh dấu màu đỏ kèm chữ C nổi bật. Bạn không cần phải đi tìm mấy ký tự <<<<<<< HEAD loằng ngoằng một cách thủ công nữa.

VS Code cung cấp bộ Merge Editor với các nút bấm rất rõ ràng:

  • Accept Current Change: Giữ lại code hiện tại của bạn.
  • Accept Incoming Change: Lấy code mới của đồng nghiệp về.
  • Accept Both Changes: Giữ cả hai nếu cần kết hợp logic.

Giao diện này giúp bạn tránh được lỗi xóa nhầm code của người khác. Đây là sai lầm kinh điển khi xử lý conflict bằng các trình soạn thảo thô sơ hoặc Notepad.

Nâng cấp sức mạnh với Extension GitLens

Nếu chỉ dùng tính năng mặc định thì bạn mới khám phá được một nửa sức mạnh. Mình khuyên bạn bắt buộc nên cài thêm Extension GitLens. Đây là công cụ biến VS Code thành một cỗ máy phân tích lịch sử code thực thụ.

Tính năng Git Blame: Ai đã sửa dòng này?

Khi bạn trỏ chuột vào bất kỳ dòng code nào, GitLens sẽ hiển thị một dòng chữ mờ: “You, 2 days ago • feat: fix bug login”. Nó cho bạn biết chính xác ai đã sửa, sửa khi nào và mục đích là gì. Tính năng này cực kỳ hữu ích khi bạn tiếp nhận dự án cũ và cần tìm “tác giả” để hỏi về một đoạn logic khó hiểu.

File History: Quay ngược thời gian

Bạn muốn xem file này trông như thế nào vào 1 tuần trước? GitLens cho phép bạn duyệt lịch sử thay đổi của duy nhất một file qua dòng thời gian. Bạn có thể so sánh giữa các phiên bản chỉ bằng cách kéo thanh trượt.

# Cài đặt nhanh qua VS Code Marketplace:
# Tìm kiếm: "GitLens — Git supercharged"

Mẹo nhỏ từ kinh nghiệm thực tế

Dùng UI rất sướng, nhưng đừng để nó làm bạn chủ quan. Sau vài lần “bay màu” code vì click quá nhanh, mình đã rút ra được 4 quy tắc vàng:

  1. Fetch trước khi Pull: Nhấn nút tròn xoay (Synchronize) ở góc dưới để cập nhật tình hình từ server trước khi merge code.
  2. Stage Selected Ranges: VS Code cho phép bạn bôi đen một đoạn code và chỉ add riêng đoạn đó. Chuột phải vào vùng chọn -> “Stage Selected Ranges”. Cách này giúp commit của bạn cực kỳ “sạch” và chuyên nghiệp.
  3. Đừng bỏ rơi Terminal: Với các lệnh phức tạp như git rebase -i hay xử lý reflog, Terminal vẫn là chân ái. Hãy dùng phím tắt Ctrl + ` để mở Terminal tích hợp ngay trong VS Code.
  4. Cẩn thận với nút Sync: Nút này thực hiện cả Pull và Push cùng lúc. Nếu chưa chắc chắn về code local, hãy dùng menu ba chấm (…) để chọn riêng lệnh Push.

Kết hợp giữa sự trực quan của UI và sức mạnh của GitLens sẽ giúp bạn code mượt mà hơn hẳn. Thay vì tốn thời gian gõ lệnh, bạn có thể tập trung hoàn toàn vào việc giải quyết logic. Hãy mở ngay tab Source Control và thử nghiệm nhé!

Share:
Tags: