Hướng dẫn sử dụng Visual Studio Code A-Z toàn tập

Xin chào, mình là Quý và hôm nay mình sẽ hướng dẫn anh em sử dụng Visual Studio Code từ A đến Z, từ những bạn mới bắt đầu học lập trình cho đến những anh em đã khá cứng nghề thì bài viết này vẫn sẽ hữu ích đối với đối với anh em. Bởi trong bài viết này ngoài việc hướng dẫn sử dụng, mình còn tổng hợp các extension hay, cách tạo snippet, giới thiệu đến anh em một số 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.
Một số chức năng nổi bật: Debug, syntax highlighting, tự hoàn thành mã thông minh, snippet...
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.
Video hướng dẫn:
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.
Để tạo snippet trong editor VSCode, các bạn vào menu File, chọn Preferences, và chọn User Snippets.
Sau đó các bạn chọn New Snippets
Tiếp theo các bạn gõ tên của snippet rồi nhấn enter
Sau đó một cửa sổ sẽ xuất hiện và các bạn sẽ gõ theo mẫu để tạo snippet
Bây giờ chúng ta cùng làm một ví dụ để hiểu rõ hơn nhé. Ở đây, ZendVN sẽ tạo một đoạn snippet để tạo nhanh một đoạn code in ra màn hình giá trị của mảng như hình bên dưới:
Như trong hình phía trên, tại dòng code thứ 1 tiêu đề đoạn snippet. Ở dùng thứ 2 là phạm vi ảnh hưởng của snippet, trong ví dụ là php. Dòng thứ 3 là prefix để các bạn gõ để tạo ra đoạn snippet. còn dòng số 4 là nơi chứa đoạn code các bạn muốn tạo nhanh. Các bạn có thể thấy tham số ${1}, thực chất đó là để con trỏ chuột sẽ trỏ đển vị trí đó sau khi bạn tạo đoạn mã để có thể điền vào ngay.
Ngoài ra anh em có thể xem video hướng dẫn để dễ dàng nắm bắt hơn.
Video hướng dẫn:
4. Sử dụng phím tắt trong Visual Studio Code.
Sử dụng phím tắt không chỉ quan trọng đối với lập trình viên mà quan trọng với tất cả các ngõ ngách của ngành IT chúng ta, các anh em quản trị mạng, hệ thống, phần cứng cũng cần trang bị kỹ năng này.
Visual Studio Code là một editor miễn phí được rất nhiều lập trình viên sử dụng. Với ưu điểm nhẹ, dễ cài đặt và cũng có những tính năng không thua kém gì các IDE có phí khác. Trong bài viết này, ZendVN sẽ gửi đến cho các bạn một list các phím tắt trên Visual Studio Code để các bạn có thể thao tác trên editor này nhanh và chuyên nghiệp hơn.
Các phím tắt chung
Hiển thị bảng lệnh: Ctrl + Shift + P, F1
Mở nhanh, vào tập tin: Ctrl + P
Tạo cửa sổ mới: Ctrl + Shift + N
Đóng cửa sổ: Ctrl + Shift + W
Cài đặt cho user: Ctrl + ,
Bảng các phím tắt: Ctrl + K Ctrl + S
Các phím tắt chỉnh sửa cơ bản
Cắt dòng: Ctrl + X
Sao chép dòng: Ctrl + C
Di chuyển lên / xuống: Alt + Up / Down
Sao chép dòng lên / xuống: Shift + Alt + Up / Down
Xóa dòng: Ctrl + Shift + K
Chèn dòng bên dưới: Ctrl + Enter
Chèn dòng trên: Ctrl + Shift + Enter
Chuyển đến dấu ngoặc: Ctrl + Shift + \
Thò / thụt dòng: Ctrl + ] / [
Đi đến đầu / cuối dòng: Home / End
Đi đến đầu tập tin: Ctrl + Home
Đi đến cuối tập tin: Ctrl + End
Cuộn dòng lên / xuống: Ctrl + Up / Down
Cuộn trang lên / xuống: Alt + PgUp / PgDn
Thu gọn theo vùng: Ctrl + Shift + [
Mở rộng theo vùng: Ctrl + Shift + ]
Thu gọn tất cả các vùng con: Ctrl + K Ctrl + [
Mở rộng tất cả các vùng con: Ctrl + K Ctrl + ]
Thu gọn tất cả các vùng: Ctrl + K Ctrl + 0
Mở rộng tất cả các khu vực: Ctrl + K Ctrl + J
Thêm dòng bình luận: Ctrl + K Ctrl + C
Xóa bình luận: Ctrl + K Ctrl + U
Chuyển đổi nhận xét dòng: Ctrl + /
Chuyển đổi nhận xét khối: Shift + Alt + A
Chuyển đổi word wrap: Alt + Z
Các phím tắt điều hướng
Hiển thị tất cả các biểu tượng: Ctrl + T
Chuyển đến dòng...: Ctrl + G
Chuyển đến file: Ctrl + P
Chuyển đến Symbol...: Ctrl + Shift + O
Bảng điều khiển vấn đề: Ctrl + Shift + M
Chuyển đến lỗi hoặc cảnh báo tiếp theo: F8
Chuyển đến lỗi hoặc cảnh báo trước đó: Shift + F8
Điều hướng lịch sử nhóm biên tập: Ctrl + Shift + Tab
Quay lại / chuyển tiếp: Alt + Left / Right
Chuyển tab được chọn: Ctrl + M
Các phím tắt đa con trỏ và lựa chọn
Chèn con trỏ: Alt + Click
Chèn con trỏ trên / dưới: Ctrl + Alt + Up / Down
Hoàn tác thao tác con trỏ cuối cùng: Ctrl + U
Chèn con trỏ ở cuối mỗi dòng được chọn: Shift + Alt + I
Chọn dòng hiện tại: Ctrl + L
Chọn tất cả các lần xuất hiện của lựa chọn hiện tại: Ctrl + Shift + L
Chọn tất cả các lần xuất hiện của từ hiện tại: Ctrl + F2
Mở rộng lựa chọn: Shift + Alt + Right
Lựa chọn co lại: Shift + Alt + Left
Lựa chọn cột: Shift + Alt + (drag mouse)
Lựa chọn cột: Ctrl + Shift + Alt + (arrow key)
Các phím tắt chỉnh sửa ngôn ngữ
Kích hoạt gợi ý: Ctrl + Space
Kích hoạt gợi ý tham số: Ctrl + Shift + Space
Định dạng tài liệu: Shift + Alt + F
Định dạng tài liệu: Shift+Alt+F
Lựa chọn định dạng: Ctrl + K Ctrl + F
Go to Definition: F12
Peek Definition: Alt + F12
Mở Definition sang một bên: Ctrl + K F12
Fix nhanh: Ctrl+.
Hiển thị tài liệu tham khảo: Shift+F12
Đổi tên: F2
Cắt khoảng trắng: Ctrl + K Ctrl + X
Thay đổi ngôn ngữ tập tin: Ctrl + K M
Các phím tắt quản lý editor
Đóng editor: Ctrl + F4, Ctrl + W
Đóng thư mục: Ctrl + K F
Chia editor: Ctrl + \
Tập trung vào nhóm editor 1, 2 hoặc 3: Ctrl + 1 / 2 / 3
Tập trung vào nhóm editor trước / tiếp theo: Ctrl + K Ctrl + Left / Right
Di chuyển editor trái / phải: Ctrl + Shift + PgUp / PgDn
Di chuyển nhóm editor: Ctrl + K Left / Right
Các phím tắt quản lý file
Tập tin mới: Ctrl + N
Mở tệp: Ctrl + O
Lưu: Ctrl + S
Lưu thành: Ctrl + Shift + S
Lưu tất cả: Ctrl + K S
Đóng: Ctrl + F4
Đóng tất cả: Ctrl + K Ctrl + W
Mở lại editor đã đóng: Ctrl + Shift + T
Giữ editor chế độ xem trước mở: Ctrl + K Enter
Mở tiếp: Ctrl + Tab
Mở trước: Ctrl + Shift + Tab
Sao chép đường dẫn của tệp đang hoạt động: Ctrl + K P
Hiển thị tệp hoạt động trong Explorer: Ctrl + K R
Hiển thị tệp hoạt động trong cửa sổ mới: Ctrl + K O
Các phím tắt về display
Bật chế độ toàn màn hình: F11
Chuyển đổi bố cục editor (ngang / dọc):Shift + Alt + 0
Phóng to / thu nhỏ: Ctrl + = / -
Chuyển đổi chế độ hiển thị Sidebar: Ctrl + B
Hiển thị Explorer / Toggle focus: Ctrl + Shift + E
Hiển thị tìm kiếm: Ctrl + Shift + F
Hiển thị Source Control: Ctrl + Shift + G
Hiển thị Debug: Ctrl + Shift + D
Hiển thị Extension: Ctrl +Shift + X
Thay thế trong tập tin: Ctrl + Shift + H
Chuyển đổi chi tiết tìm kiếm: Ctrl + Shift + J
Hiển thị Output panel: Ctrl + Shift + U
Mở xem trước Markdown: Ctrl + Shift + V
Mở xem trước Markdown sang một bên: Ctrl + K V
Chế độ Zen (Esc Esc để thoát): Ctrl + K Z
Các phím tắt Debug
Chuyển đổi breakpoint: F9
Bắt đầu / Tiếp tục: F5
Dừng lại: Shift + F5
Bước vào / ra : F11 / Shift + F11
Bước qua: F10
Hiển thị di chuột: Ctrl + K Ctrl + I
Các phím tắt tích hợp terminal
Hiển thị terminal: Ctrl + `
Tạo terminal mới Ctrl + Shift + `
Sao chép lựa chọn: Ctrl + C
Dán vào terminal: Ctrl + V
Cuộn lên / xuống: Ctrl + Up / Down
Cuộn trang lên / xuống: Shift + PgUp / PgDn
Cuộn lên trên / dưới : Ctrl + Home / End
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ài đặt thêm các Extension.
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êng 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.
Extension Quokka - Realtime kết quả Code
Bộ Icon đẹp cho các folder, file trong VScode
+ vscode-icons:
+ Material Icons:
Extension Drawio - Vẽ biểu đồ trực tiếp tại VScode
Extension Live Server - Review trực tiếp kết quả trong khi code
Extension Code Spell Checker - Kiếm tra, thông báo phần code bị gõ sai
Extension Bracket Pair Colorizer - Giúp phân biệt các cặp dấu đóng, mở ngoặc
Extension Colorize - Giúp phân biệt các mã màu CSS
Extension Prettier Code Format - Tự động format code gọn gàng, dễ đọc
Extension Path Intellisense - Đề xuất đường dẫn thư mục, tập tin
Extension Better Comments - Tạo comment code nhiều màu, dễ phân loại
Extension Auto Rename Tag - Tự động thay đổi tên tag
Extension Auto Close Tag - Tự động đóng tag
Emmet - 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.