Series VS Code Bài 2: Độc Cô Cầu Bại - Bứt Tốc Bàn Phím, Quên Con Chuột Đi!
Có một sự thật là: Mỗi lần bạn nhấc tay khỏi bàn phím để tìm con chuột, rê nó đến một dòng code, rồi lại đặt tay về bàn phím, bạn đã mất khoảng 2 đến 3 giây và làm đứt gãy mạch suy nghĩ logic.
Trong bài viết này, chúng ta sẽ cùng nhau học cách "master" VS Code bằng bàn phím. Chúng ta sẽ đi qua 3 cấp độ: Di chuyển thần tốc (Navigation), Biến hóa code hàng loạt (Multi-cursor), và Tự động sinh code (Custom Snippets).
1. Di Chuyển Xuyên Thấu Dự Án (Navigation)
Đừng bao giờ dùng chuột để click vào cây thư mục bên trái để tìm file. Hãy tập thói quen sử dụng 3 tổ hợp phím quyền lực sau:
- Ctrl + P (Mac: Cmd + P) - Tìm file trong chớp mắt: Chỉ cần gõ một vài ký tự có trong tên file (VS Code sử dụng thuật toán fuzzy search rất thông minh), file bạn cần sẽ hiện ra ngay lập tức.
- Ctrl + G (Mac: Ctrl + G) - Nhảy dòng siêu tốc: Khi Log hệ thống báo lỗi ở dòng 142, bạn chỉ cần ấn Ctrl + P, gõ :142 (hoặc nhấn trực tiếp Ctrl + G rồi gõ 142), con trỏ sẽ nhảy thẳng đến dòng đó.
- Ctrl + Shift + O (Mac: Cmd + Shift + O) - Định vị cấu trúc: Tổ hợp phím này sẽ liệt kê toàn bộ các Hàm (Functions), Biến (Variables) hoặc Class có trong file hiện tại. Gõ thêm dấu : để nhóm chúng lại theo danh mục. Bạn sẽ không còn phải cuộn chuột mỏi mắt để tìm xem cái hàm mình cần sửa nằm ở đâu nữa.
Mẹo vàng của Senior: Dùng Alt + Mũi tên trái/phải (Mac: Ctrl + - và Ctrl + Shift + -) để di chuyển ngược/xuôi theo lịch sử vị trí con trỏ của bạn. Lệnh này cực kỳ hữu ích khi bạn đang sửa code ở file A, nhảy sang file B để check, rồi muốn quay lại đúng dòng đang sửa ở file A.
2. Biên Tập Code Hàng Loạt (Editing & Multi-Cursor)
Nếu bạn cần sửa tên một biến xuất hiện ở 10 nơi khác nhau trong một file, đừng sửa từng cái một.
- Ctrl + D (Mac: Cmd + D) - Lựa chọn thông minh: Bôi đen biến đó, rồi ấn Ctrl + D liên tiếp. VS Code sẽ tự động tìm và đặt thêm các con trỏ vào các từ giống hệt tiếp theo. Lúc này, bạn chỉ cần gõ một lần là toàn bộ các vị trí đều thay đổi theo.
- Alt + Up/Down (Mac: Option + Up/Down) - Dịch chuyển dòng: Muốn chuyển một dòng code lên trên hoặc xuống dưới? Thay vì Cắt và Dán (Ctrl+X -> Ctrl+V), hãy giữ Alt và bấm mũi tên lên/xuống để đẩy dòng code đó đi như một quân cờ.
- Shift + Alt + Up/Down (Mac: Shift + Option + Up/Down) - Nhân bản: Nhân đôi dòng hiện tại lên trên hoặc xuống dưới chỉ trong 1 nốt nhạc.
3. Cấu Hình Snippets - Để VS Code Tự Gõ Code Cho Bạn
Snippets là những đoạn code mẫu được chuẩn bị sẵn. Bạn chỉ cần gõ 1-2 từ khóa tắt (Trigger) và nhấn Tab, một đoạn code dài dằng dặc sẽ tự động hiển thị ra.
Thay vì chỉ dùng các snippets mặc định của hệ thống, bạn hoàn toàn có thể tự tạo ra "kho đạn" riêng cho mình.
Cách thiết lập:
- Mở Command Palette (Ctrl + Shift + P).
- Gõ và chọn Preferences: Configure User Snippets.
- Chọn ngôn ngữ bạn muốn áp dụng (ví dụ: javascript, php, go...) hoặc chọn New Global Snippets file để dùng chung cho mọi ngôn ngữ.
Ví dụ thực tế:
Giả sử bạn là một backend developer và thường xuyên phải viết các khối lệnh kiểm tra/bắn log định dạng JSON khi debug. Bạn có thể chèn đoạn cấu hình này vào file snippets:
{
"Log JSON Debug": {
"prefix": "jlog",
"body": [
"console.log(JSON.stringify({ status: 'success', data: $1 }, null, 2));"
],
"description": "In ra log định dạng JSON đẹp đẽ để debug"
}
}
- prefix: Từ khóa kích hoạt. Từ giờ, bạn chỉ cần gõ jlog rồi nhấn Tab.
- $1: Vị trí con trỏ chuột sẽ tự động nhảy vào sau khi đoạn code sinh ra để bạn điền dữ liệu ngay lập tức.
Tóm lại là...
Làm chủ phím tắt và snippets giống như việc bạn tập cơ bắp cho ngón tay vậy. Thời gian đầu có thể bạn sẽ phải khựng lại một chút để nhớ phím, nhưng một khi đã thành phản xạ tự nhiên, bạn sẽ thấy mình gõ code mượt mà như một dòng chảy, không còn bị gián đoạn bởi những cú click chuột vụn vặt.
Ở bài học số 3, chúng ta sẽ đi sâu vào một tính năng cực mạnh được tích hợp sẵn trong VS Code giúp bạn làm chủ mã nguồn: Tuyệt kỹ Refactoring code (Đổi tên toàn cục, trích xuất hàm) và Debugging nâng cao ngay trên Editor mà không cần dùng đến lệnh var_dump hay console.log truyền thống.
All rights reserved
