thay đổi thiết lập settings của vscode WDI Blog

Hướng dẫn thiết lập settings của VSCode7 phút đọc

Trình soạn thảo code Visual Studio Code (VSCode) gồm rất nhiều chức năng với khả năng tùy biến cao do đó sẽ khá mất thời gian để thiết lập chức năng cũng như làm quen với nó.

Trong bài viết này mình sẽ chia sẻ cho các bạn cách thiết lập settings của VSCode mà mình đã áp dụng trong suốt thời gian qua.Tất cả đều là những thiết lập cơ bản nhưng vô cùng quan trọng và có tần suất sử dụng lớn.

Bạn hãy theo dõi và nếu thấy thiết lập nào hay thì hãy áp dụng luôn nhé.

Thiết lập settings của VSCode

Trước khi tiến hành thiết lập cho Settings của VSCode bạn cần truy cập vào menu Settings của VSCode.

sử dụng Visual Studio Code ảnh 06

Tìm hiểu settings và thay đổi theme

Bạn hãy nhấn vào icon hình bánh răng ở dưới cùng trong Activity Bar.Một menu hiện ra để bạn lựa chọn các thông số muốn thay đổi.Một số menu con tiêu biểu mà mình hay sử dụng bao gồm :

  • Settings : bạn có thể tùy chỉnh giao diện, chức năng của VSCode ở phần này.
  • Keyboard Shortcuts : xem và tự tạo ra tổ hợp nút tắt cho riêng mình.
  • Color Theme : thay đổi theme hiện tại đang dùng.
  • File Icon Theme : thay đổi hệ thống icon đang dùng.

Giờ mình sẽ giải thích từng phần trong menu này cho bạn nhé.

Thay đổi theme hiện tại

Để thay đổi theme hiện tại đang dùng cho VSCode bạn hãy nhấn chọn menu “Color Theme“.Phía trên cùng của trình soạn sẽ xuất hiện một danh sách những theme mà bạn đã cài đặt.Ví dụ như hình ảnh bên trên đây.

Bạn chỉ việc di chuyển giữa các theme để thấy được giao diện của từng theme.Chọn được theme ưng ý rồi bạn chỉ việc nhấn Enter để theme đó được áp dụng.

Thay đổi hệ thống icon đang dùng

thay đổi thiết lập settings của vscode ảnh 1

Thay đổi hệ thống icon đang dùng

Tương tự như thay đổi theme hiện tại đang sử dụng thì để thay đổi hệ thống icon bạn hãy nhấn chọn “File Icon Theme” trong menu.Một danh sách các hệ thống icon mà bạn có thể sử dụng cũng sẽ hiện ra để bạn lựa chọn.

Bạn hãy di chuyển giữa các hệ thống icon để xem hệ thống icon nào phù hợp với mình.Nếu ok thì bạn hãy nhấn Enter để theme đó được áp dụng.

Nếu như bạn không tìm được hệ thống icon nào ưng ý thì có thể tìm kiếm thêm trong Side Bar như hình ảnh trên.Rất nhiều hệ thống icon bắt mắt sẽ hiện ra để bạn tham khảo.

Một số Keyboard Shortcuts hữu ích

thay đổi thiết lập settings của vscode ảnh 2

Tìm hiểu hệ thống phím tắt trong VSCode

Ngoài một thư viện extension đồ sộ thì VSCode còn có một tập hợp rất nhiều tổ hợp phím tắt mà bạn nên sử dụng để nâng cao hiệu suất công việc.

Để xem danh sách những tổ hợp phím tắt có sẵn của VSCode thì bạn hãy nhấn vào menu “Keyboard Shortcuts“.Một tab mới bên Editor Bar sẽ hiện ra để bạn tham khảo các tổ hợp phím tắt này.

Quả thực có rất nhiều tổ hợp phím tắt hữu ích nhưng để tìm ra những tổ hợp phím tắt mà bản thân mình cần thì tốn khá nhiều thời gian.Dưới đây là những tổ hợp phím tắt mình thường xuyên sử dụng.

  • Command  + , (Mac) / Ctrl + , (Window) : mở nhanh tab settings.
  • Command + / (Mac) / Ctrl + / (Window) : comment nhanh.Khi nhấn tổ hợp phím tắt này dòng đặt con trỏ chuột sẽ biến thành dạng comment trên một dòng.Để comment một cụm code bạn hãy lựa chọn đoạn code đó rồi hãy nhấn tổ hợp phím này.Ngược lại để vô hiệu hóa comment bạn cũng hãy nhấn tổ hợp phím này tại vị trí đã comment.
  • Option + nút mũi tên lên xuống (Mac) / Alt + nút mũi tên lên xuống (Window) : tổ hợp phím tắt này dùng để di chuyển một dòng hay một đoạn code lên xuống từng dòng một.Đặt con trỏ chuột tại vị trí code muốn di chuyển để di chuyển một dòng code và bôi đen chọn rồi nhấn tổ hợp phím để di chuyển một khối code.
  • Shift + Option + dấu mũi tên (Mac) / Shift + Alt + dấu mũi tên (Window) :  nhân bản code.Khi nhấn tổ hợp phím tắt này dòng code hiện tại con trỏ chuột đang trỏ tới sẽ được nhân bản.Để nhân bản một khối code thì bạn hãy bôi đen chọn đoạn code đó rồi hãy nhấn tổ hợp phím này.Dấu mũi tên lên xuống sẽ quyết định vị trí code được nhân bản.
  • Command + B (Mac) / Ctrl + B (Window) : đóng mở Side Bar.
  • Command + F (Mac) / Ctrl + F  (Window) : tìm kiếm kí tự.
  • Command + Option +  F (Mac) / Ctrl + Alt +  F  (Window) : tìm kiếm và thay thế kí tự.

Tùy chỉnh thiết lập trong Settings

thay đổi thiết lập settings của vscode ảnh 2

Tùy chỉnh bên trong Settings của VSCode

Ở trong tab Settings như hình ảnh trên đây mình có khoanh đỏ vị trí có chữ UserWorkspace.Khi bạn thiết lập settings ở bên User thì toàn bộ thiết lập đó sẽ được lưu lại trên tất cả các dự án từ nay về sau.Còn nếu bạn chỉ thiết lập settings bên Workspace thì những thiết lập này chỉ có tác dụng ở dự án hiện tại bạn đang mở mà thôi.

Trong phần settings này có rất nhiều mục để tùy chỉnh mà trong giới hạn bài viết này mình khó có thể chia sẻ hết được do đó mình sẽ giới thiệu một số thiết lập cơ bản và cần thiết như dưới đây.

Tại menu Commonly Used :

  • Files : Auto Save –> bạn hãy chọn afterDelay để phần mềm VSCode tự động lưu lại code sau một khoảng thời gian mà không cần nhấn tổ hợp phím Command + S / Ctrl + S nữa.
  • Files : Auto Save Dalay –> thiết lập thời gian trễ để tự động lưu lại file sau khi tiến hành thay đổi trên file.
  • Editor : Font Size –> thay đổi kích thước font chữ hiển thị code.
  • Editor : Tab Size –> thiết lập khoảng cách của mỗi nhấn nút tab bằng bao nhiêu lần so với nút space.
  • Editor : Render Whitespace  –>Bạn hãy chọn all để VSCode tự động xuống dòng khi chiều dài code vượt quá kích thước màn hình hiện tại.
  • Editor : Cursor Style –> Thay đổi hình dạng con trỏ chuột trong Editor Bar.

Kết luận

Thiết lập settings của VSCode không phải công việc dễ dàng nếu không có hướng dẫn cụ thể hay khả năng tự mày mò tìm hiểu.Thời gian đầu mình cũng đã tham khảo khá nhiều blog khác và cả trên Youtube nữa thì thấy có khá nhiều thiết lập hay khác nữa nhưng có lẽ không cần thiết vì hiếm có cơ hội dùng đến.

Tất cả những thiết lập mà mình giới thiệu trong bài viết này đều khá cơ bản nhưng là cần thiết và sử dụng hàng ngày nên nếu bạn đang sử dụng trình soạn thảo VSCode thì hãy thiết lập luôn và ngay nhé.

Sắp tới mình sẽ tiếp tục chia sẻ cách sử dụng một số extension của VSCode để các bạn tham khảo.Hãy luôn theo dõi và ủng hộ blog bạn nhé.Chúc bạn luôn thành công trong công việc của mình.

Bài viết trước

Bài viết sau

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x