ZendVN - Học lập trình online

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.