[Series VS Code Mastery] Bài 1: Giải phẫu Bottom Panel - "Trái tim" của mọi dự án

Chào anh em, đối với bất kỳ ai code trên VS Code, khu vực Bottom Panel (hiển thị bằng phím tắt Ctrl + ~ hoặc Cmd + J) chắc chắn là nơi chúng ta nhìn vào nhiều thứ hai chỉ sau khu vực viết code.

Tuy nhiên, liệu bạn đã tận dụng hết sức mạnh của các công cụ nằm trong khu vực này chưa? Trong bài viết đầu tiên của series này, chúng ta sẽ cùng "giải phẫu" từng tab và từng option nhỏ nhất trong khu vực Bottom Panel nhé.

1. Các Tab Chức Năng Chính (Bên trái)

Nhìn vào bức ảnh minh họa, các bạn sẽ thấy các tab được xếp gọn gàng. Mỗi tab đảm nhận một nhiệm vụ riêng biệt trong vòng đời phát triển phần mềm:

• PROBLEMS (Vấn đề): Đây là nơi hiển thị toàn bộ lỗi (errors), cảnh báo (warnings) và thông tin (infos) của dự án. Khi bạn gõ sai cú pháp, thiếu dấu chấm phẩy, hoặc vi phạm rule của Linter (như ESLint, PHP_CodeSniffer), VS Code sẽ gom tất cả vào đây để bạn dễ dàng click vào và nhảy đến đúng dòng code đang lỗi.
• OUTPUT (Đầu ra): Nơi chứa các log hệ thống. Cửa sổ này có một dropdown (menu thả xuống) để bạn chọn nguồn log. Ví dụ: Bạn có thể xem log của Git, log của các Extension bạn đã cài đặt, hoặc log của tiến trình biên dịch (build process).
• DEBUG CONSOLE (Bảng điều khiển gỡ lỗi): Vũ khí tối thượng khi anh em đặt breakpoint. Khi đang chạy chế độ Debug, bạn có thể gõ trực tiếp các đoạn code hoặc tên biến vào tab này để kiểm tra giá trị của chúng (Evaluate expressions) tại đúng thời điểm chương trình đang tạm dừng, thay vì phải console.log() hay dd() mù quáng.
• TERMINAL (Dòng lệnh): Tab đang được active trong hình. Đây là Terminal tích hợp sẵn của VS Code. Nó cho phép bạn chạy bất kỳ shell nào được cấu hình trên máy (Bash, PowerShell, Zsh, Command Prompt) mà không cần mở cửa sổ rời. Ở góc trái của tab này, bạn có thể thấy hệ thống đang chạy powershell.
• PORTS (Cổng kết nối): Một tính năng cực kỳ mạnh mẽ khi làm việc với Remote Development (WSL, SSH, Dev Containers). Nó giúp bạn quản lý và forward (chuyển tiếp) các cổng từ máy chủ ảo ra máy thật (localhost) để có thể test API hay xem UI trên trình duyệt.
• GITLENS: Đây là tab xuất hiện thêm do cài đặt extension GitLens (một extension huyền thoại). Nó cung cấp các công cụ trực quan để quản lý lịch sử commit, file history, branch, và rebase ngay trong panel này.

2. Thanh Công Cụ Quản Lý Terminal (Góc phải)

Khi tab TERMINAL đang được chọn, bạn sẽ thấy một loạt các icon nhỏ ở góc phải (như trong hình). Chúng cung cấp khả năng điều khiển không gian làm việc cực kỳ linh hoạt:

• Icon Bảng đôi (Split Terminal): Phím tắt Ctrl + Shift + 5. Nút này sẽ chia đôi cửa sổ Terminal hiện tại thành 2 phần theo chiều ngang. Rất tiện lợi khi bạn vừa muốn chạy Server (ví dụ: npm run start), vừa muốn có một terminal khác để chạy lệnh Git hoặc test API mà không cần mở tab mới.
• Dropdown Menu (Dấu mũi tên hướng xuống cạnh chữ powershell): Cho phép bạn chọn loại Shell mới muốn mở (Command Prompt, Git Bash, WSL, v.v.) thay vì dùng shell mặc định.
• Icon Thùng rác (Kill Terminal): Đóng và tiêu diệt hoàn toàn tiến trình (process) của terminal hiện tại. Giải phóng port và bộ nhớ mà terminal đó đang chiếm dụng.
• Icon Dấu ba chấm (...): Chứa các menu ngữ cảnh mở rộng như đổi màu tab terminal, đổi icon, hoặc cuộn trang.
• Icon Mũi tên lên (Maximize Panel Size): Phóng to toàn màn hình khu vực Panel này để dễ dàng đọc các dòng log dài, ẩn đi khu vực viết code tạm thời.
• Icon Dấu X (Close Panel): Thu gọn/Đóng toàn bộ Bottom Panel lại để mở rộng không gian viết code. (Terminal vẫn chạy ngầm, không bị kill).

Hy vọng qua bài viết này, anh em đã nắm rõ công năng của từng góc nhỏ trong khu vực Bottom Panel. Ở bài tiếp theo, chúng ta sẽ đi sâu vào cách config và custom Terminal sao cho ngầu nhất nhé!