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

Loading...
logo.png
Sách bí kíp lập trình

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

thumb.jpg
Công cụ lập trình

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ăng
1Ctrl + Shift + PHiển thị bảng lệnh
2Ctrl + PMở nhanh, vào tập tin
3Ctrl + 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ăng
1Ctrl + XCắt dòng
2Ctrl + CSao chép dòng
3Di chuyển lên / xuốngAlt +  Up / Down
4Shift + Alt  +  Up / DownSao chép dòng lên / xuống
5Ctrl + Shift + KXóa dòng
6Ctrl + EnterChèn dòng bên dưới
7Ctrl + Shift + EnterChèn dòng trên
8Ctrl + ] / [Thò / thụt dòng
9Home / EndĐi đến đầu / cuối dòng
10Ctrl + HomeĐi đến đầu tập tin
11Ctrl + EndĐi đến cuối tập tin
12Thu gọn theo vùngCtrl + Shift + [
13Ctrl + /Chuyển đổi nhận xét dòng
14Shift + 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ăng
1Ctrl + THiển thị tất cả các biểu tượng
2Ctrl + GChuyển đến dòng...
3Ctrl + PChuyển đến file
4Ctrl + Shift + MBảng điều khiển vấn đề
5F8Chuyển đến lỗi hoặc cảnh báo tiếp theo
6Shift + 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ăng
1Alt + ClickChèn con trỏ
2Ctrl + Alt +  Up / DownChèn con trỏ trên / dưới
3Ctrl + UHoàn tác thao tác con trỏ cuối cùng
4Ctrl + Shift + LChọn tất cả các lần xuất hiện của lựa chọn hiện tại
5Ctrl + F2Chọn tất cả các lần xuất hiện của từ hiện tại
6Shift + Alt +  RightMở rộng lựa chọn
7Shift + 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ăng
1Ctrl + 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ệu
4Ctrl + K MThay đổi ngôn ngữ tập tin
5Ctrl + K  Ctrl + FLựa chọn định dạng
6F12Go to Definition
7Alt + F12Peek Definition
8Ctrl + K F12Mở Definition sang một bên
9F2Đổi tên
10Ctrl + K Ctrl + XCắt khoảng trắng

Các phím tắt quản lý editor

#Phím tắtChức năng
1Ctrl + F4, Ctrl + WĐóng editor
2Ctrl + K FĐóng thư mục
3Ctrl + \Chia editor
4Ctrl + 1 / 2 / 3Tập trung vào nhóm editor 1, 2 hoặc 3
5Ctrl + K Ctrl + Left / RightTập trung vào nhóm editor trước / tiếp theo
6Ctrl + Shift + PgUp / PgDnDi chuyển editor trái / phải
7Ctrl + K Left / RightDi chuyển nhóm editor

Các phím tắt quản lý file   

#Phím tắtChức năng
1Ctrl + NTập tin mới
2Ctrl + OMở tệp
3Ctrl + SLưu
4Ctrl + Shift + SLưu thành
5Ctrl + K SLưu tất cả
6Ctrl + F4Đóng
7Ctrl + 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ăng
1F11Bật chế độ toàn màn hình
2Shift + 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ị Sidebar
5Ctrl + Shift + EHiển thị Explorer / Toggle focus
6Ctrl + Shift + FHiển thị tìm kiếm
7Ctrl + Shift + GHiển thị Source Control
8Ctrl + Shift + DHiển thị Debug
9Ctrl +Shift + XHiển thị Extension
10Ctrl + Shift + HThay thế trong tập tin
11Ctrl + Shift + JChuyển đổi chi tiết tìm kiếm
12Ctrl + K ZChế độ Zen (Esc Esc để thoát)

Các phím tắt Debug    

#Phím tắtChức năng
1F9Chuyển đổi breakpoint
2F5Bắt đầu / Tiếp tục
3Shift + F5Dừng lại
4F11 / Shift + F11Bước vào / ra
5F10Bước qua
6Ctrl + 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ăng
1Ctrl + `Hiển thị terminal
2Ctrl + Shift + `Tạo terminal mới 
3Ctrl + CSao chép lựa chọn
4Ctrl + 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ẫn
1Extension Quokka - Realtime kết quả Code
2vscode-icons - bộ Icon đẹp cho các folder, file trong VScode
3Material Icons - bộ Icon đẹp cho các folder, file trong VScode
4Extension Drawio - Vẽ biểu đồ trực tiếp tại VScode
5Extension Live Server - Review trực tiếp kết quả trong khi code
6Extension Code Spell Checker - Kiếm tra, thông báo phần code bị gõ sai
7Extension Bracket Pair Colorizer - Giúp phân biệt các cặp dấu đóng, mở ngoặc
8Extension Colorize - Giúp phân biệt các mã màu CSS
9Extension Prettier Code Format - Tự động format code gọn gàng, dễ đọc
9Extension Path Intellisense - Đề xuất đường dẫn thư mục, tập tin
10Extension Better Comments - Tạo comment code nhiều màu, dễ phân loại
11Extension Auto Rename Tag - Tự động thay đổi tên tag
12Extension Auto Close Tag - Tự động đóng tag
13Emmet - 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.

Tư vấn khóa học

Bạn sẽ được tư vấn trực tiếp từ anh Hải Lân về việc chọn khóa học và lộ trình phù hợp với mình nhất