Facebook Pixel

Tổng hợp các phím tắt Developer nên biết trong VSCode

26 Aug, 2024

Tran Thuy Vy

Frontend Developer

Bài viết này mình sẽ đề cập đến những phím tắt developer thường xuyên sử dụng nhất, giúp bạn tiết kiệm thời gian và cải thiện tốc độ code

Tổng hợp các phím tắt Developer nên biết trong VSCode

Mục Lục

Nếu bạn đang làm việc trên VSCode và cảm thấy mệt mỏi khi phải thực hiện thao tác thủ công từ A đến Z. Bài viết này mình sẽ đề cập đến những phím tắt developer thường xuyên sử dụng nhất, không những giúp bạn cải thiện tốc độ code mà còn trông ngầu hơn.

1. Tại sao bạn nên biết phím tắt trong VSCode?

  • Tăng Tốc Độ Làm Việc: bạn có thể mở tệp, điều hướng, chỉnh sửa mã, và thực hiện nhiều hành động khác chỉ bằng một thao tác nhỏ trên bàn phím.
  • Cải Thiện Tập Trung: sử dụng phím tắt giúp bạn giảm thiểu thời gian khi phải cố gắng tìm kiếm các tùy chọn trong menu, từ đó giảm sự phân tâm và giữ được luồng làm việc liên tục.
  • Thao Tác Phức Tạp Hoá Dễ Dàng: một số thao tác đòi hỏi nhiều bước có thể được thực hiện nhanh chóng với tổ hợp phím tắt.
  • Tối Ưu Hóa Quy Trình Làm Việc: Khi bạn hiểu và sử dụng phím tắt một cách hiệu quả, cá nhân hoá các phím tắt giúp bạn hoàn thành công việc một cách nhanh chóng và chính xác.
Lợi ích khi sử dụng tổ hợp phím trong VSCode

2. Các phím tắt trong VSCode được sử dụng nhiều

2.1 Đóng/mở khối code tại con trỏ chuột

Giúp code của bạn trông gọn gàng, để bạn không quan tâm đến hàm đã hoàn thiện mà chỉ tập trung xây dựng chức năng mới.

  • Windows: Ctrl + Shift + [ , Ctrl + Shift + ]
  • Ubuntu: Ctrl + Shift + [ , Ctrl + Shift + ]
  • MacOS: Command (⌘) + Option (⌥) + [ , Command (⌘) + Option (⌥) + ]
Đóng mở code block

2.2 Ẩn/hiện terminal

Như các bạn đã biết, thì VSCode có tích hợp Terminal để chúng ta thuận tiện thao tác. Để sử dụng terminal, sử dụng tổ hợp phím:

  • Windows: Ctrl + `
  • Ubuntu:  Ctrl + `
  • MacOS: Option (⌥) + `
Đóng mở terminal

2.3 Tìm kiếm và điều hướng đến file khác

Giúp bạn tìm kiếm và chuyển nhanh đến một file khác trong thư mục bạn đang làm việc.

  • Windows: Ctrl + P
  • Ubuntu: Ctrl + P
  • MacOS:  Command (⌘) + P
To hop phim Ctrl + P trong VSCode

2.4 Điều hướng giữa các tệp đang mở

Giúp bạn chuyển giữa các tệp bạn đang làm việc. Vì vậy, bạn có thể dễ dàng di chuyển giữa các tập tin.

  • Windows: Ctrl + Shift + Tab
  • Ubuntu: Ctrl + Shift + Tab
  • MacOS: Ctrl (^) + Shift + Tab

2.5 Format code

VSCode sẽ giúp bạn định dạng code để trông gọn gàng, đúng chuẩn hơn. Nếu bạn đang làm dự án với team, thì mình khuyên bạn nên sử dụng Prettier để format code theo quy chuẩn chung mà team settup, điều này sẽ không làm thay đổi code trên nhánh.

  • Windows: Shift + Alt + F
  • Ubuntu: Ctrl + Shift + I
  • MacOS: Option (⌥) + Shift + F

2.6 Comment (chú thích) code

Giúp bạn đóng hoặc mở comment. Có 2 cách để comment là: block và inline. Tiến hành thực hiện bằng cách bôi đen phần code muốn đóng hoặc muốn mở và nhấn tổ hợp phím:

Hệ điều hành Block Inline
Windows Shift + Alt + A Ctrl + /
Ubuntu Ctrl + Shift + A Ctrl + /
MacOS Option (⌥) + Shift + A Command (⌘) + /
comment code

2.7 Chọn tất cả từ trùng trong file

  • Windows: Ctrl + Shift + L
  • Ubuntu: Ctrl + Shift + L
  • MacOS: Command (⌘) + Shift + L
Chọn từ trùng trong file

2.8 Xoá dòng tại trỏ chuột đang đứng

  • Windows: Ctrl + Shift + K
  • Ubuntu: Ctrl + Shift + K
  • MacOS: Command (⌘) + Shift + K

2.9 Phím tắt gợi ý code

  • Windows: Ctrl + Space
  • Ubuntu: Ctrl + Space
  • MacOS: Ctrl (^) + Space
Gợi ý code

2.10 Sửa chữa lỗi nhanh

  • Windows: Ctrl + .
  • Ubuntu: Ctrl + .
  • MacOS: Command (⌘) + .
quick fix trong vscode

2.11 Di chuyển dòng code lên/xuống

  • Windows: Ctrl + .
  • Ubuntu: Ctrl + .
  • MacOS: Option (⌥) + , Option (⌥) +

2.12 Tìm kiếm và thay thế trong VSCode

  • Windows: Ctrl + F
  • Ubuntu: Ctrl + F
  • MacOS: Command (⌘) + F
Tìm kiểm

Ngoài ra bạn có thể sử dụng tổ hợp phím sau để mở side bar search:

  • Windows: Ctrl + Shift + F
  • Ubuntu: Ctrl + Shift + F
  • MacOS: Command (⌘) + Shift + F
sidebar-search

Bạn có thể thực hiện đồng thời việc tìm kiếm và thay thế bằng tổ hợp phím:

  • Windows: Ctrl + H
  • Ubuntu: Ctrl + H
  • MacOS: Command (⌘) + Option (⌥) + F
Tìm kiếm và thay thế code

2.13 Ẩn / hiện thanh sidebar

Bạn đang cảm thấy khó chịu vì thanh sidebar chiếm diện tích trên màn hình, nhưng bạn lại không sử dụng đến nó trong quá trình làm việc, hãy dùng tổ hợp phím sau:

  • Windows: Ctrl + B
  • Ubuntu: Ctrl + B
  • MacOS: Command (⌘) + B

2.14 Lưu thay đổi tất cả file

Không biết các bạn giống như mình không, nhưng code xong mình thường xuyên quên lưu file lại. Mà sửa quá nhiều file nên không thể nào mà ngồi mở từng file ra để Command (⌘) + S hay Ctrl + S, như vậy sẽ rất mất thời gian.

Vì thế, tổ hợp phím này sẽ giúp bạn save tất cả các file chỉ trong một nốt nhạc:

  • Windows: Ctrl + K + S (lưu ý là bạn nhấn Ctrl + K sau đó thả tay mới nhấn S nha).
  • Ubuntu: phần này bạn phải mở bảng custom mới có nhé.
  • MacOS: Command (⌘) + Option (⌥) + S

2.15 Đóng file hiện tại

  • Windows: Ctrl + W
  • Ubuntu: Ctrl + W
  • MacOS: Command (⌘) + W

Có một điểm bạn cần lưu ý là khi bạn đóng tất cả file trên VSCode rồi, mà bạn sử dụng tổ hợp phím này thì VSCode sẽ được đóng lại. Nhưng khi bạn lỡ tay đóng nhầm file đang làm việc nhưng muốn mở lại nó ngay lập tức thì hãy sử dụng tổ hợp phím này:

  • Windows: Ctrl + Shift + T
  • Ubuntu: Ctrl + Shift + T
  • MacOS: Command (⌘) + Shift + T

3. Tạo và tuỳ chỉnh phím tắt trong VSCode

Nếu bạn không cảm thấy thoải mái khi sử dụng mặc định các phím tắt mặc định của VSCode, bạn có thể thực hiện tổ hợp phím sau để mở toàn bộ bảng phím tắt trong VSCode và tuỳ chính nó:

  • Windows: Ctrl + K + S
  • Ubuntu: Ctrl + K + S
  • MacOS: Command (⌘) + K + S
tổng hợp phím tắt trong vscode

4. Kết luận

Bài viết này mình nêu ra một số tổ hợp phím mình thường xuyên sử dụng nhất khi làm việc trên Visual Studio Code. Hy vọng rằng sẽ giúp bạn cải thiện tốc độ. Nếu bạn muốn biết thêm và đầy đủ hơn, bạn có thể tải xuống phía dưới theo hệ điều hành của máy bạn.

Dưới đây là một số chủ đề bạn có thể sẽ quan tâm:

Bài viết liên quan

Lập trình backend expressjs

xây dựng hệ thống microservices
  • Kiến trúc Hexagonal và ứng dụngal font-
  • TypeScript: OOP và nguyên lý SOLIDal font-
  • Event-Driven Architecture, Queue & PubSubal font-
  • Basic scalable System Designal font-

Đăng ký nhận thông báo

Đừng bỏ lỡ những bài viết thú vị từ 200Lab