Visual Studio Code là một mã nguồn mở và được phát triển bởi Microsoft nên các bạn cứ yên tâm sử dụng vì nó hoàn toàn miễn phí và luôn được cập nhật những phiên bản mới nhất. Không chỉ vậy nó còn rất thích hợp cho việc phát triển các dự án lớn, phức tạp ngoài ra còn hỗ trợ việc tích hợp Git.
Dưới đây là những visual studio code extension dành cho phát triển web:
- Debugger for Chrome giúp bạn có thể debug lỗi mã chương trình ngay trong VS Code mà không cần mở Google Chrome để sử dụng developer tool. (Source Code)
- JavaScript (ES6) code snippets giúp bạn có thể gọi cấu trúc của một hàm hay thuộc tính,... một cách nhanh chóng thông qua những cú pháp được cung cấp sẵn. Ví dụ khi bạn gõ là clg thì nó sẽ tự động biên dịch thành console.log(object). Cái này bạn có thể tham khảo thêm bảng chú thích trong trang cài đặt của nó nhé. Ngoài ra nó cũng hỗ trợ nhiều ngôn ngữ trong file extension như là TypeScript, JavaScript React, TypeScript React, Html và Vue. (Source Code)
- Live Server giúp khởi chạy local server một cách nhanh chóng với tính năng tự động tải lại trực tiếp cho các trang web tĩnh và động. (Source Code)
- Auto Close Tag được xây dựng để giúp bạn tự động đóng thẻ khi bạn mở thẻ. (Source Code)
- Prettier - Code formatter giúp bạn định dạng lại code một cách tự động và tạo ra một phong cách code chung cho team lập trình thông qua quy tắc riêng được quy định bởi extension. (Source Code)
- TODO Highlight giúp bạn làm nổi bật các comment quan trọng trong code để những người lập trình sau hay chính bản thân chúng ta có thể nắm được những điều cần lưu ý hay những việc cần phải làm trước khi sử dụng và lập trình code. (Source Code)
- Auto Rename Tag giúp tự động đổi tên cả cặp thẻ trong HTML, XML. (Source Code)
- Better Comments hiển thị comment theo từng loại riêng biệt giúp dễ dàng phân loại và hình dung hơn ví dụ như là các thông báo quan trọng cần làm nổi bật, các cảnh báo, những việc phải làm,... (Source Code)
- ESLint là một công cụ phân tích đoạn mã trong chương trình để đưa ra các lỗi cũng như những đoạn mã cần phải cải thiện. (Source Code)
- Beautify là một tiện ích giúp bạn có thể định dạng lại cách hiển thị code một cách đẹp mắt hơn. (Source Code)
- Bracket Pair Colorizer là tiện ích mở rộng giúp làm nổi bật những dấu ngoặc tương ứng trong đoạn mã với nhau bằng cách sử dụng màu sắc. (Source Code)
- Path Intellisense là tiện ích mở rộng giúp bạn tự động thực hiện tên cho file thông qua cách gợi ý các đường dẫn mỗi khi bạn gõ đường dẫn đến nơi lưu trữ file. (Source Code)
- Import Cost giúp bạn có thể kiểm tra kích thước của các file import một cách dễ dàng thông qua thông tin được hiển thị trực tiếp bên đoạn mã khi ta thực hiện import. (Source Code)
- Code Time giúp bạn có thể tính toán thời gian mình làm việc trên visual studio code. Ngoài ra nó cũng tổng hợp thời gian bạn dành cho mỗi dự án, mức độ làm việc với code thông qua biểu đồ của các ngày trong tuần, hiển thị giá trị thời gian trung bình bạn làm việc trong một tháng,... (Source Code)
- CSS Peek tiện ích mở rộng giúp tìm các id hoặc class của các thẻ HTML trong những file CSS mà chứa những class hay thuộc tính đó. (Source Code)
- Project Manager tiện ích mở rộng giúp bạn dễ dàng chuyển đổi giữa các dự án trong VS Code. Nó cung cấp một menu phụ giúp bạn có thể lưu trữ các dự cần làm việc và chuyển đổi qua lại một cách nhanh chóng. (Source Code)
- Browser Preview hiển thị trình duyệt ngay trên Visual Studio Code giúp bạn có thể xem kết quả cũng như debug cho chương trình một cách dễ dàng hơn. (Source Code)
- GitLens — Git supercharged là tiện ích cung cấp nhiều tính năng hữu ích giúp bạn làm việc với Git một cách tốt hơn như là hiển thị chú thích cho từng dòng code về lập trình viên commit, hiển thị thông tin chi tiết các lần sửa đổi đoạn mã trong File,... (Source Code)
- Polacode là tiện ích giúp bạn chụp hình đoạn code của mình và lưu lại ngay trên máy tính một cách dễ dàng. (Source Code)
- vscode-icons là tiện ích chúng ta có thể thiết lập nhiều icon đẹp mắt cho Visual Studio Code. (Source Code)
- Settings Sync giúp bạn có thể lưu lại các thiết lập cho Visual Studio Code trên máy tính của mình lên trên Github và sử dụng cho các máy khác một cách dễ dàng ví dụ như là các thông tin về extension, hay các cài đặt mà mình đã thiết lập... Lúc này bạn dễ dàng thiết lập cho nhiều máy khác nhau mà không cần phải nhớ lại các extension, các thiết lập mà mình đã cài đặt cho VS Code. (Source Code)
- Quokka giúp bạn có thể test từng đoạn code nhỏ Javascript, TypeScript và hiển thị trực tiếp trên VS Code mà không cần sử dụng console.log() để hiển thị trong trình duyệt.
- EditorConfig là một tiện ích mở rộng giúp duy trì sự thống nhất style code cho nhiều lập trình viên khi làm cùng một dự án. Và mỗi lập trình viên có thể làm việc trên nhiều trình soạn thảo mã khác nhau như VSCode, Atom, Notepad++... thì nó đều hỗ trợ các plugin trên mọi nền tảng giúp lập trình viên có thể đọc và chỉnh sửa style code một cách dễ dàng.
- Material Icon Theme là một tiện ích thiết lập icon Material Design cho Visual Studio Code. (Source Code)
- Color Highlight là một tiện ích giúp bạn hiển thị màu cho các đối tượng được tìm thấy trong trang. Ví dụ nhiều mã màu mà VS Code không hiển thị được thì tiện ích này là một lựa chọn tuyệt vời cho bạn. (Source Code)
- REST Client cho phép bạn gửi các yêu cầu HTTP và có thể xem kết quả trực tiếp trên Visual Studio Code. (Source Code)
- Live Share giúp những lập trình viên trong team có thể chia sẻ đoạn mã trong chương trình theo thời gian thực để dễ dàng trong việc chỉnh sửa cũng như debug cho chương trình như là chia sẻ debugging sessions, terminal instances, localhost web apps, voice calls,... (Source Code)
- Code Spell Checker giúp bạn kiểm tra lỗi chính tả của đoạn mã trong chương trình. Tuy nhiên nó chỉ hỗ trợ các ngôn ngữ như tiếng Anh, Thụy Điển, Pháp, Đức... và chưa có tiếng Việt Nam nha. (Source Code)
- Vetur là tiện ích mở rộng cung cấp các công cụ hữu ích cho VueJS như là debug, kiểm tra lỗi, Syntax-highlighting, snippet,... (Source Code)
- ES7 React/Redux/GraphQL/React-Native snippets là tiện ích mở rộng cung cấp các snippet cho React, Redux và Graphql trong JS/TS với cú pháp ES7. (Source Code)
