Số liệu được cập nhật ngày 27/05/2024
Giới thiệu
Bài viết sau đây sẽ giới thiệu về 10 extensions hữu ích mà bạn không thể bỏ qua khi lập trình Frontend trên Visual Studio Code. Đây là những công cụ mà mình thường xuyên sử dụng trong công việc và học tập. Hy vọng bạn sẽ tìm thấy được sự hữu ích và cảm hứng từ bài viết này!
Hướng dẫn Cài đặt Extensions
Để cài đặt một extension trên VSCode, bạn làm theo các bước sau:
- Mở ứng dụng Visual Studio Code.
- Nhấn tổ hợp phím
Ctrl+Shift+Xtrên Windows hoặcCommand+Shift+Xtrên MacOS để mở mục Extensions. - Tìm kiếm theo tên extension bạn muốn cài đặt và nhấn nút
Installđể tiến hành cài đặt.
Một số extension có thể yêu cầu cấu hình thêm trong tệp settings.json của VSCode. Để mở tệp này, bạn truy cập như sau:
- Nhấn tổ hợp phím
Ctrl+Shift+Ptrên Windows hoặcCommand+Shift+Ptrên MacOS. - Gõ
Preferences: Open User Settings (JSON)và nhấnEnter.
Top 1 - Live Server (49.1 triệu lượt tải)
Live Server là extension tuyệt vời cho phép bạn khởi chạy một máy chủ local với tính năng tự động làm mới trang mỗi khi có thay đổi trong mã nguồn. Khi bạn lưu các tập tin HTML, CSS hoặc JavaScript, Live Server sẽ tự động làm mới trình duyệt, giúp bạn nhanh chóng kiểm tra các thay đổi.
Cấu hình nâng cao: Bạn có thể tùy chỉnh một số thông số như port, root, ignoreFiles, và browser trong tệp settings.json.
Top 2 - Prettier - Code Formatter (44.9 triệu lượt tải)
Prettier hỗ trợ định dạng mã nguồn tự động cho nhiều ngôn ngữ như JavaScript, TypeScript, HTML, CSS, và nhiều hơn nữa. Bạn có thể tùy chỉnh quy tắc định dạng qua tệp .prettierrc, giúp mã của bạn luôn được trình bày gọn gàng.
Top 3 - IntelliCode (42.5 triệu lượt tải)
IntelliCode cung cấp các gợi ý mã dựa trên AI, giúp lập trình viên tiết kiệm thời gian và cải thiện chất lượng mã. Công cụ này hỗ trợ nhiều ngôn ngữ lập trình phổ biến.
Top 4 - GitLens (32.2 triệu lượt tải)
GitLens giúp bạn tương tác với Git hiệu quả hơn, cung cấp thông tin về tác giả, thời gian thay đổi của từng dòng mã trực tiếp trong editor. Đây là một công cụ tuyệt vời cho những ai làm việc với Git.
Top 5 - Material Icon Theme (23.5 triệu lượt tải)
Material Icon Theme làm cho giao diện VSCode trở nên đẹp mắt và dễ sử dụng hơn với hàng trăm icon theo phong cách Material Design.
Top 6 - Auto Rename Tag (18.1 triệu lượt tải)
Auto Rename Tag giúp tự động đổi tên thẻ mở và đóng trong HTML/XML, tiết kiệm thời gian khi chỉnh sửa mã.
Top 7 - JavaScript (ES6) Code Snippets (15.7 triệu lượt tải)
Extension này cung cấp hàng loạt mã mẫu cho JavaScript, giúp bạn viết mã nhanh hơn. Bạn chỉ cần nhập một số ký tự viết tắt và nhấn Tab để hoàn thành đoạn mã.
Top 8 - Code Spell Checker (10.6 triệu lượt tải)
Code Spell Checker kiểm tra chính tả cho mã và comment, hỗ trợ cả tiếng Việt và tiếng Anh. Giúp giảm thiểu lỗi chính tả trong dự án của bạn.
Top 9 - Dracula Official (7 triệu lượt tải)
Dracula Official là một trong những theme tối phổ biến cho lập trình viên, giúp bảo vệ mắt khi làm việc trong thời gian dài.
Top 10 - Markdownlint (6.9 triệu lượt tải)
Markdownlint giúp kiểm tra và cải thiện chất lượng tài liệu viết bằng Markdown, rất hữu ích cho các bài viết trên các nền tảng sử dụng Markdown.
Kết luận
Trên đây là Top 10 Extensions VSCode không thể thiếu trong hành trình lập trình Frontend của mình. Đây hoàn toàn là trải nghiệm cá nhân, các bạn có thể lựa chọn cài đặt những extension này hay không. Mong rằng bài viết sẽ hữu ích cho các bạn! Nếu bạn thấy bài viết hay, đừng quên để lại một bình luận và một lượt thích để mình có thêm động lực viết tiếp những bài viết thú vị khác nhé! Hẹn gặp lại!
source: viblo
