8 Extension Visual Studio Code mọi developer phải có


Visual Studio Code là một trong những trình soạn thảo code phổ biến và được sử dụng rộng rãi nhất. Nó cũng đi kèm với rất nhiều tính năng miễn phí so với các code editor khác.





Hãy thử tải về các tiện ích mở rộng trên VS Code và bạn sẽ thấy thêm một khía cạnh khác ở các tính năng tuyệt vời này.





8 Extension Visual Studio Code





1. Turbo Console Log





Turbo Console Log là một tiện ích mở rộng xuất sắc cho việc debug.





Tiện ích mở rộng này giúp debug dễ dàng hơn bằng cách tự động hóa quá trình viết log message có ý nghĩa.





Tự động chèn log message có ý nghĩa với hai bước sau:





  • Chọn biến là chủ đề debug
  • Nhấn Ctrl + Alt + L




Turbo Console Log
Turbo Console Log. Ảnh: Medium




2. Import cost





Tốc độ là yếu tố quan trọng cho trang web. Nếu trang web hoặc ứng dụng không thể tải nhanh, thì chẳng phải có cũng như không sao.





Tiện ích mở rộng này hiển thị kích cỡ import. Bằng cách này, bạn sẽ biết khối lượng sẽ tải xuống và tìm ra nguyên nhân ứng dụng hoạt động chậm.





Với tiện ích mở rộng này, bạn có thể quyết định xem mình nên viết một function hay import toàn bộ bundle.





Import cost
Import cost. Ảnh: Medium




3. Prettier





Prettier dành cho tất cả mọi dev viết Python, JavaScript hoặc bất kỳ ngôn ngữ lập trình nào khác.





Cái tên nói lên tất cả, tiện ích này làm cho code đẹp hơn lên.





Cá nhân tôi rất tệ trong việc giữ cho các dòng, khoảng cách và tab bằng nhau. Do vậy, code của tôi nhìn rất lộn xộn.





Với Prettier, ngay sau khi nhấn tổ hợp lệnh + S, bạn sẽ chứng kiến điều kỳ diệu xảy ra. Tất cả code sẽ có khoảng cách chính xác và đều tăm tắp, khoảng cách các dòng cũng sẽ thống nhất.





Không ai có thể nhận ra bạn là người lộn xộn như thế nào 😐.





Prettier
Prettier. Ảnh: Medium




4. Bracket pair colorizer





Đã bao nhiêu lần xảy ra trường hợp khi chỉnh sửa code JavaScript, bạn luôn gặp khó khăn khi tìm dấu đóng mở ngoặc?





Đừng lãng phí thêm thời gian nữa chứ! Dùng tiện ích này, các dấu mở và đóng ngoặc sẽ được tô màu giống nhau và mọi việc sẽ dễ thở hơn hẳn.





Bracket pair colorizer
Bracket pair colorizer. Ảnh: Medium




5. Live share





Live share là một tiện ích mở rộng tuyệt vời để code cùng bạn bè và team.





Live share cho phép điều khiển từ xa trình soạn thảo VS code, các tệp đã mở. Một người khác có thể thay đổi và lưu code; vì vậy, giờ đây bạn có thể nhận được mọi trợ giúp từ xa.





Một tính năng khác là bạn có thể code real-time, biết ai đang type và type gì. Bên cạnh đó, nó cũng cấp quyền truy cập vào localhost và thiết bị đầu cuối.





Bonus: Bạn còn có thể tải xuống tiện ích mở rộng âm thanh Live share, bổ sung khả năng gọi âm thanh cực đỉnh. Với các dự án làm việc từ xa, đây quả là một extension miễn phí không thể hoàn hảo hơn!





6. Projects





Nếu bạn đang làm nhiều dự án cùng một lúc thì việc chuyển đổi giữa các folder quả rất khó, khi phải điều hướng đến folder cần thiết phải không.





Projects có thể hoạt động như một tab yêu thích của bạn.





Ví dụ: bạn có thể lưu trữ CSS và bootstrap tùy chỉnh trong một folder và sử dụng Projects để điều hướng giữa các folder một cách nhanh chóng.





Projects
Projects. Ảnh: Medium




7. Settings Sync





Tiện ích mở rộng này giúp lưu trữ tất cả bản sao lưu cài đặt của bạn trong GitHub. Bằng cách này, bạn có thể có các cài đặt giống nhau cho nhiều thiết bị hoặc các thiết bị mới của mình. Bất kỳ thay đổi nào đều được đồng bộ hóa liền mạch.





Setting Sync cho phép đồng bộ hóa hầu như là mọi thứ bạn tùy chỉnh trên VS Code sang Github, từ việc cài đặt phím tắt cho đến các tiện ích mở rộng VS Code khác.





8. JavaScript (ES6) Code Snippets





VS Code đi kèm với JS IntelliSense tích hợp sẵn, nhưng JS Code Snippets nâng cao trải nghiệm này hơn nữa bằng cách thêm các đoạn JavaScript snippet được tạo sẵn, chứa các đoạn code được sử dụng phổ biến nhất. Hãy nói tạm biệt việc liên tục lặp lại đoạn code! 🙌





Tiện ích mở rộng này hỗ trợ JS, TypeScript, JS React, TS React, HTML và Vue.





JavaScript (ES6) Code Snippets
JavaScript (ES6) Code Snippets. Ảnh: Medium




Còn extension nào mà bạn thấy hữu ích nữa không nhỉ? Hãy comment cho cộng đồng Gambaru biết nhé!





Theo Ali Haider


Mobile version will be updated soon

Meanwhile, please use our web version
Thank you and see you there!