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ợ. Tiếp bước phần I, mời các bạn cùng xem ở phần II chúng ta sẽ tìm hiểu những extension nào nhé!
- HTML CSS Support
Cụ thể, extension này giúp bạn tự động hoàn thành mã HTML và CSS: Khi bạn bắt đầu nhập mã, extension sẽ đề xuất các gợi ý hoàn thành cho các thẻ HTML, các thuộc tính CSS, các giá trị, và nhiều hơn nữa.
Ví dụ: Như ảnh dưới đây, khi bạn gõ chữ cái đầu của một thẻ là “h”, extension sẽ đề xuất “h1”, “h2”… để hoàn thành thẻ HTML của bạn
Việc cần làm của các bạn là gõ theo những gợi ý hoặc sử dụng các phím mũi tên để chọn gợi ý thẻ HTML cần sử dụng. Ví dụ mình “Enter” vào h1, lập tức ta đã có thẻ <h1> mà không cần gõ nhiều.
- Auto Close Tag
“Auto Close Tag” là một extension cho Visual Studio Code (VSCode) giúp tự động đóng các thẻ HTML/XML khi bạn nhập thẻ mở. Chẳng hạn, khi bạn bắt đầu nhập một thẻ HTML/XML mở (ví dụ: <div>), Auto Close Tag sẽ tự động thêm thẻ đóng tương ứng (</div>) ngay sau thẻ mở, mà không cần bạn phải gõ nó thủ công.
- Auto Remane Tag
Extension “Auto Rename Tag” là một tiện ích mở rộng cho VSCode giúp tự động cập nhật các cặp thẻ HTML/XML khi bạn đổi tên một thẻ. Khi bạn đặt con trỏ vào một thẻ mở hoặc đóng và thay đổi tên của nó, extension sẽ tự động cập nhật tên của cặp thẻ tương ứng trong tài liệu. Ví dụ, nếu bạn đặt con trỏ vào một thẻ mở <div> và thay đổi tên của nó thành <section>, extension sẽ tự động cập nhật tất cả các thẻ đóng </div> thành </section> trong toàn bộ tài liệu.
Trước khi sử dụng extension “Auto Rename Tag” các bạn có thể thấy khi ta thay thẻ mở <div> thành <section> thì thẻ đóng vẫn là </div>
Sau khi sử dụng extension “Auto Rename Tag”, khi ta thay đổi ở thẻ mở đến đâu thì thẻ đóng sẽ thay đổi theo ngay lập tức, ngược lại khi thay đổi ở thẻ đóng thì thẻ mở cũng thay đổi theo.
Trên đây là một số những extension cực kì hữu hiệu và cần thiết của Visual Studio Code. Với chúng, công việc lập trình sẽ trở nên dễ dàng và thú vị hơn rất nhiều. Ngoài ra VS Code còn vô vàn những extension thú vị khác có thể xuất hiện trong những phần tiếp theo, các bạn hãy chú ý đón chờ nhé
CLB BeIT
Bộ môn Công nghệ thông tin
FPT Polytechnic Hà Nội
