Có phải bạn đang tìm kiếm một số tiện ích mở rộng hữu ích của VSCode để có thể tăng tốc công việc lập trình front-end của bạn?
Mình đã từng làm các dự án React và Angular trên VSCode trong vài năm qua và trong vài bài viết tiếp theo mình sẽ chia sẻ với bạn các tiện ích mở rộng của VSCode phổ biến nhất mà mình hay sử dụng.
Trước tiên, bài này sẽ chia sẻ một 4 tiện ích hữu ích cho dân Front-End
1. Tiện ích Indent Rainbow trên VS Code
Hình
Indent-Rainbow là tiện ích mở rộng đơn giản làm cho các thẻ đóng / mở dễ đọc hơn bằng cách tô màu phần tab.
Hình
Theo mặc định, Indent-Rainbow đi kèm với một màu sắc cầu vồng, nhưng nếu bạn thích thứ gì đó tinh tế hơn, chỉ cần vào User Settings để chỉnh sửa lại.
Ví dụ, ở đây mình sẽ sửa thành màu đen xám và chỉ tăng giảm opacity đi
“indentRainbow.colors”: [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.2)"
]Kết quả sẽ được như hình:
Hình
Những màu này hoạt động tuyệt vời với theme VSCode mặc định và pha trộn liền mạch trong bảng màu VSCode mặc định.
2. Tô màu cho các cặp dấu ngoặc bằng tiện ích Bracket Pair Colorizer
Hình
Nếu bạn lập trình React, Vue hoặc Angular, rất có thể bạn có nhiều cặp ngoặc trong code của mình.
Tiện ích mở rộng Bracket Pair Colorizer này giúp bạn xác định dấu ngoặc phù hợp với màu sắc và cũng kết nối chúng với các dòng!
Hình
Bạn có thể vô hiệu hóa các đường kẻ dọc và ngang xung quanh block code bằng cách thêm chỉnh sửa tại User Settings như sau:
“bracketPairColorizer.showHorizontalScopeLine”: false3. Comment tốt hơn với tiện ích Better Comments
hình
Tiện ích Better Comments cho phép bạn tô màu một số comment nhất định như:
Hình
Higlight các comment như TO DO, Question hoặc ghi chú quan trọng cho các lập trình viên khác trong nhóm.
4. Xem trước màu sắc với tiện ích Color Higlight
Hình
Là một lập trình viên Front-End thì lúc nào cũng phải làm việc với CSS rồi. Color Higlight sẽ tô màu và đóng khung xung quanh mã màu.
Hình
Nó không chỉ nhận ra màu sắc trong File CSS mà còn có thể nhận ra màu sắc cả trong các tệp khác như .js, .jsx, .ts, .tsx và nhiều loại tệp khác.
Tổng kết
Như vậy là mình đã chia sẻ 4 tiện ích hữu ích đối với dân Front-End trong VS Code.
Tiện ích yêu thích trên VS Code của bạn là gì? Hãy cho mình biết ở phần bình luận nhé.
>>> Và xem ngay Bộ sưu tập tiện ích mở rộng hữu ích khác trên VS Code của mình.
https://blog.bitsrc.io/top-10-vs-code-extensions-for-frontend-developers-in-2018-7992282db2ca
