Visual Studio Code (VSCode) là một trình biên tập mã nguồn mở và miễn phí được phát triển bởi Microsoft. Nó được thiết kế để hỗ trợ nhiều ngôn ngữ lập trình và công nghệ, như JavaScript, TypeScript, HTML, CSS, Python, và nhiều ngôn ngữ khác. Để sử dụng VSCode được năng suất nhất có lẽ không thể thiếu được các extension hỗ trợ. Dưới đây là một số extension cần thiết nhất trong quá trình sử dụng VSCode, mời các bạn tham khảo nhé!
- Save Typing
Trong Visual Studio Code (VSCode), extension “Save Typing” (lưu tự động) là khi bạn nhập văn bản vào một trường như textarea hoặc trình soạn thảo, extension này sẽ tự động lưu nội dung đó, đảm bảo rằng nếu bạn thoát khỏi trang hoặc trình duyệt bị đóng mà không lưu thủ công, dữ liệu vẫn được giữ lại. Ý nghĩa chính của tính năng này là giúp bạn không cần phải lưu thủ công mỗi khi thay đổi cửa sổ hoặc tab, tiết kiệm thời gian và giảm thiểu nguy cơ mất dữ liệu trong một số trường hợp như sập nguồn, ấn nhầm dẫn đến tắt cửa sổ khi chưa lưu dữ liệu
Cụ thể:
– Trước khi sử dụng extension Save Typing:
Các bạn sẽ thấy một chấm tròn trắng bên cạnh tên file trên thanh hiển thị file báo hiệu file này chưa được lưu. Vì thế ta phải làm thủ công bằng cách chọn “File -> Save hoặc Ctrl+S” để thực hiện lưu.
Điều này có thể khá bất tiện bởi nhiều khi chúng ta quên lưu hoặc trong lúc code máy sập có thể dẫn đến mất code.
– Sau khi sử dụng extension Auto-Save on Window Change:
Khi sử dụng extension này các bạn chỉ cần gõ mà không cần lưu thủ công nữa, dấu chấm tròn cũng không còn xuất hiện.
- Live Server
Khi bạn sử dụng Live Server, nó sẽ tạo ra một máy chủ web cục bộ và mở trang web của bạn trong trình duyệt mặc định của bạn.
Cụ thể:
Khi cài đặt extension thành công, các bạn muốn hiển thị file html của mình trên trình duyệt Web hãy nhấn chuột phải rồi chọn “Open with Live Server” hoặc dùng tổ hợp phím tắt “Alt+L Alt+O”.
Ngay lập tức cửa sổ trình duyệt sẽ hiển thị file .html của các bạn.
- Prettier – Code formatter
Khi bạn sử dụng Prettier – Code formatter trong VSCode, Prettier sẽ tự động thực hiện định dạng lại những dòng code của bạn dựa trên các quy tắc được cấu hình, giúp bài code của bạn trông ngay ngắn, thuận mắt hơn.
Cụ thể:
Chẳng hạn file code của các bạn đúng nhưng cách trình bày không được ngay ngắn, khá rối mắt.
Sau khi cài đặt extension “Prettier – Code formatter” thành công, các bạn nhấn chuột phải chọn “Format Document” hoặc sử dụng tổ hợp phím tắt “Shift+Alt+F”, file code của bạn sẽ tự động được cấu hình trông thuận mắt hơn như ảnh dưới đây:
Mong rằng những tiện ích trên sẽ giúp ích được nhiều cho các bạn trong quá trình code. Hãy cùng đón chờ những phần sau để khám phá thêm nhiều extension hay ho nhé!
Tác giả: CLB Bee it
Bộ môn Công nghệ thông tin
FPT Polytechnic Hà Nội
