Bài viết Sử dụng Visual Studio Code từ A đến Z dành cho các bạn mới bắt đầu học lập trình cho đến những anh em lập trình viên đã đi làm. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng visual studio code (VSCode) từ các thao tác cơ bản đến những mẹo khi sử dụng để tăng quá trình code gấp nhiều lần. Ngoài ra mình còn tổng hợp các extension hay, cách tạo snippet, phím tắt tiện dụng trong VSCode.
1. Sơ lược về Visual Studio Code
- Trong tất cả các trình soạn thảo mã nguồn, thì mình thích nhất Visual Studio Code bởi vì nó được cung cấp hoàn toàn miễn phí và có hầu hết đầy đủ tính năng mà lập trình viên cần.
- Nó có thể chạy trên rất nhiều nền tảng khác nhau, nên khi mình thành thạo nó, mình từ Windows chuyển sang Mac hay Linux cũng không phải băn khoăn đi tìm trình soạn thảo khác.
- VScode hỗ trợ mình code rất là nhiều ngôn ngữ và có rất nhiều extension đi kèm theo để hỗ trợ giúp cho quá trình soạn thảo của chúng ta nhanh chóng và dễ dàng hơn.
2. Hướng dẫn cho người mới bắt đầu.
Mình sẽ cho anh em link video hướng dẫn cơ bản về VScode, ở đây anh em sẽ học được các thao tác thường dùng khi sử dụng VScode.
3. Hướng dẫn tạo khối lệnh, tự tạo snippet cho riêng mình.
Tạo snippet sẽ giúp anh em gõ nhanh hơn, gõ chính xác những câu lệnh dài dòng. Ví dụ như mình hay dùng console.log() thì mình sẽ tạo snippet khi mình gõ zlog thì tự động nó sẽ gõ ra console.log() cho mình.
Trong khi code, có rất nhiều đoạn mã nguồn được sử dụng lặp đi lặp lại rất nhiều lần. Việc tạo ra những đoạn snippet sẽ giúp các bạn tiết kiệm thời gian khá nhiều.
Video hướng dẫn:
4. Sử dụng phím tắt trong Visual Studio Code.
Các phím tắt chung
#Phím tắtChức năng1Ctrl + Shift + PHiển thị bảng lệnh2Ctrl + PMở nhanh, vào tập tin3Ctrl + Shift + NTạo cửa sổ mới:4Ctrl + Shift + WĐóng cửa sổ
Các phím tắt chỉnh sửa cơ bản
#Phím tắtChức năng1Ctrl + XCắt dòng2Ctrl + CSao chép dòng3Di chuyển lên / xuốngAlt + Up / Down4Shift + Alt + Up / DownSao chép dòng lên / xuống5Ctrl + Shift + KXóa dòng6Ctrl + EnterChèn dòng bên dưới7Ctrl + Shift + EnterChèn dòng trên8Ctrl + ] / [Thò / thụt dòng9Home / EndĐi đến đầu / cuối dòng10Ctrl + HomeĐi đến đầu tập tin11Ctrl + EndĐi đến cuối tập tin12Thu gọn theo vùngCtrl + Shift + [13Ctrl + /Chuyển đổi nhận xét dòng14Shift + Alt + AChuyển đổi nhận xét khối
Các phím tắt điều hướng
#Phím tắtChức năng1Ctrl + THiển thị tất cả các biểu tượng2Ctrl + GChuyển đến dòng…3Ctrl + PChuyển đến file4Ctrl + Shift + MBảng điều khiển vấn đề5F8Chuyển đến lỗi hoặc cảnh báo tiếp theo6Shift + F8Chuyển đến lỗi hoặc cảnh báo trước đó
Các phím tắt đa con trỏ và lựa chọn
#Phím tắtChức năng1Alt + ClickChèn con trỏ2Ctrl + Alt + Up / DownChèn con trỏ trên / dưới3Ctrl + UHoàn tác thao tác con trỏ cuối cùng4Ctrl + Shift + LChọn tất cả các lần xuất hiện của lựa chọn hiện tại5Ctrl + F2Chọn tất cả các lần xuất hiện của từ hiện tại6Shift + Alt + RightMở rộng lựa chọn7Shift + Alt + LeftLựa chọn co lại
Các phím tắt chỉnh sửa ngôn ngữ
#Phím tắtChức năng1Ctrl + SpaceKích hoạt gợi ý2Ctrl + Shift + SpaceKích hoạt gợi ý tham số3Shift + Alt + FĐịnh dạng tài liệu4Ctrl + K MThay đổi ngôn ngữ tập tin5Ctrl + K Ctrl + FLựa chọn định dạng6F12Go to Definition7Alt + F12Peek Definition8Ctrl + K F12Mở Definition sang một bên9F2Đổi tên10Ctrl + K Ctrl + XCắt khoảng trắng
Các phím tắt quản lý editor
#Phím tắtChức năng1Ctrl + F4, Ctrl + WĐóng editor2Ctrl + K FĐóng thư mục3Ctrl + Chia editor4Ctrl + 1 / 2 / 3Tập trung vào nhóm editor 1, 2 hoặc 35Ctrl + K Ctrl + Left / RightTập trung vào nhóm editor trước / tiếp theo6Ctrl + Shift + PgUp / PgDnDi chuyển editor trái / phải7Ctrl + K Left / RightDi chuyển nhóm editor
Các phím tắt quản lý file
#Phím tắtChức năng1Ctrl + NTập tin mới2Ctrl + OMở tệp3Ctrl + SLưu4Ctrl + Shift + SLưu thành5Ctrl + K SLưu tất cả6Ctrl + F4Đóng7Ctrl + K Ctrl + WĐóng tất cả8Ctrl + Shift + TMở lại editor đã đóng
Các phím tắt về display
#Phím tắtChức năng1F11Bật chế độ toàn màn hình2Shift + Alt + 0Chuyển đổi bố cục editor (ngang / dọc)3Ctrl + = / -Phóng to / thu nhỏ4Ctrl + BChuyển đổi chế độ hiển thị Sidebar5Ctrl + Shift + EHiển thị Explorer / Toggle focus6Ctrl + Shift + FHiển thị tìm kiếm7Ctrl + Shift + GHiển thị Source Control8Ctrl + Shift + DHiển thị Debug9Ctrl +Shift + XHiển thị Extension10Ctrl + Shift + HThay thế trong tập tin11Ctrl + Shift + JChuyển đổi chi tiết tìm kiếm12Ctrl + K ZChế độ Zen (Esc Esc để thoát)
Các phím tắt Debug
#Phím tắtChức năng1F9Chuyển đổi breakpoint2F5Bắt đầu / Tiếp tục3Shift + F5Dừng lại4F11 / Shift + F11Bước vào / ra5F10Bước qua6Ctrl + K Ctrl + IHiển thị di chuột
Các phím tắt tích hợp terminal
#Phím tắtChức năng1Ctrl + `Hiển thị terminal2Ctrl + Shift + `Tạo terminal mới 3Ctrl + CSao chép lựa chọn4Ctrl + VDán vào terminal
Với sử dụng phím tắt VScode thì ZendVN cũng đã có loạt video hướng dẫn cho anh em các phím tắt chúng ta thường xuyên sử dụng nhất.
5. Các Extension hữu ích cho lập trình viên
Extension là các phần mở rộng được chúng ta lựa chọn và cài đặt vào, nó hỗ trợ chúng ta viết code nhanh hơn, báo lỗi, nhắc lệnh, hỗ trợ chạy một file code bất kỳ…
Có rất nhiều extension cho VScode nhưng ZendVN đã nghiên cứu và tìm ra những extension hay và hữu ích nhất, phù hợp với mọi anh em lập trình.
#Phím tắtVideo hướng dẫn1Extension Quokka – Realtime kết quả Code2vscode-icons – bộ Icon đẹp cho các folder, file trong VScode3Material Icons – bộ Icon đẹp cho các folder, file trong VScode4Extension Drawio – Vẽ biểu đồ trực tiếp tại VScode5Extension Live Server – Review trực tiếp kết quả trong khi code6Extension Code Spell Checker – Kiếm tra, thông báo phần code bị gõ sai7Extension Bracket Pair Colorizer – Giúp phân biệt các cặp dấu đóng, mở ngoặc8Extension Colorize – Giúp phân biệt các mã màu CSS9Extension Prettier Code Format – Tự động format code gọn gàng, dễ đọc9Extension Path Intellisense – Đề xuất đường dẫn thư mục, tập tin10Extension Better Comments – Tạo comment code nhiều màu, dễ phân loại11Extension Auto Rename Tag – Tự động thay đổi tên tag12Extension Auto Close Tag – Tự động đóng tag13Emmet – Cách soạn thảo html nhanh
Và còn rất nhiều thứ hữu ích nữa, mình sẽ tiếp tục cập nhật thêm cho anh em.
Như vậy mình đã tổng hợp các hướng dẫn và chia sẻ các mẹo Visual Studio Code cho anh em, chúc anh em ngày càng tiến xa hơn nữa trên con đường lập trình.
Nếu anh em thấy hay thì chia sẻ giúp mình để mình có thêm động lực để tiếp tục cập nhật nội dung và ra thêm bài mới hỗ trợ anh em trong công việc lập trình. Cảm ơn anh em đã theo dõi bài viết.
