15 tiện ích mở rộng VSCode tốt nhất
Các tiện ích mở rộng VSCode hàng đầu dành cho nhà phát triển front-end để cải thiện năng suất và chất lượng mã.
Đừng trở thành một con khỉ viết code. Hãy sử dụng các tiện ích mở rộng VSCode này để trở thành một ninja viết code .
Tôi biết bạn đang nghĩ gì: "Tôi là một nhà phát triển front-end thực thụ, tôi không cần bất kỳ tiện ích mở rộng nào. Tôi sẽ chỉ cần bit-bang mọi thứ như một người đàn ông thực thụ." Tôi khen ngợi bạn, nhưng tiện ích mở rộng VSCode có thể giúp cuộc sống của bạn dễ dàng hơn rất nhiều. Chúng sẽ giúp bạn viết mã tốt hơn, tìm lỗi nhanh hơn và tiết kiệm thời gian cho các tác vụ lặp đi lặp lại.
Các tiện ích mở rộng VSCode tốt nhất
Chủ đề vũ trụ
Tôi đã học được rất nhiều khi phát triển với Astro. Vì vậy, tôi đã tạo một bộ sưu tập các mẫu trang web để giúp bạn bắt đầu dự án tiếp theo của mình. Mọi thứ bạn cần cho một trang web sẵn sàng sản xuất. Thêm bản sao của bạn và triển khai.
Prettier - Trình định dạng mã
Prettier là một trình định dạng mã có chủ kiến sẽ tự động định dạng mã của bạn theo một phong cách nhất quán. Tiện ích mở rộng này rất phù hợp với các nhóm muốn thực thi tính nhất quán hoặc chỉ để bạn không phải lo lắng về việc định dạng mã của mình.
Với hơn 41 triệu lượt cài đặt, bạn có thể nói rằng nó rất phổ biến.
Tiếng Anh
ESLint là một linter có thể cấu hình để giúp bạn tìm và sửa các vấn đề trong mã JavaScript của mình. Nó có thể được sử dụng cho cả phát triển frontend và backend, và là một cách tuyệt vời để phát hiện lỗi trước khi chúng xảy ra. Nó có thể kiểm tra các lỗi như biến không sử dụng, dấu chấm phẩy bị thiếu, v.v.
GitHub Đồng Phi Công
GitHub Copilot là một trình lập trình cặp chạy bằng AI giúp bạn viết code tốt hơn, nhanh hơn. Mặc dù đây là một công cụ trả phí (hiện tại là 10 đô la/tháng), nhưng nó có thể giúp các nhà phát triển tiết kiệm rất nhiều thời gian.
THÔNG TIN
Nếu bạn là học sinh, giáo viên hoặc người bảo trì kho lưu trữ mã nguồn mở phổ biến trên GitHub, bạn có thể nhận Copilot miễn phí.
GitLens — Git siêu nạp
GitLens là tiện ích mở rộng VSCode, giúp tăng cường các tính năng git của bạn. Nó cho phép bạn xem ai là người chỉnh sửa dòng mã gần nhất, thời điểm chỉnh sửa gần nhất và nhiều thông tin khác.
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense là tiện ích mở rộng cung cấp tính năng tự động hoàn thành thông minh, tô sáng cú pháp và kiểm tra lỗi cho Tailwind CSS.
Nếu bạn đang sử dụng Tailwind CSS, chắc chắn bạn sẽ muốn sử dụng tiện ích mở rộng này.
MẸO
Nếu bạn không sử dụng Tailwind CSS, bạn nên sử dụng 😊
Tự động đổi tên thẻ
Auto Rename Tag là một tiện ích mở rộng khá đơn giản nhưng tiết kiệm thời gian. Nếu bạn thay đổi phần mở đầu của thẻ HTML, nó sẽ tự động cập nhật thẻ đóng. Điều này đảm bảo các thẻ của bạn luôn khớp.
Màu sắc nổi bật
Color Highlight là một tiện ích mở rộng đơn giản sẽ làm nổi bật màu sắc trong mã của bạn. Tiện ích này rất tuyệt để nhanh chóng xem biến được đặt thành màu gì hoặc bạn có đang sử dụng đúng màu trong CSS của mình không.
Thẻ tự động đóng
Auto Close Tag là một tiện ích mở rộng đơn giản khác có thể giúp bạn tiết kiệm thời gian. Nó sẽ tự động đóng thẻ HTML cho bạn. Vì vậy, khi bạn nhập <div>, n ó sẽ tự động thêm vào </div>để khớp.
Xem trước CSS
CSS Peek là tiện ích mở rộng tuyệt vời cho các nhà phát triển front-end. Nó cho phép bạn nhanh chóng xem CSS cho một phần tử HTML nhất định. Điều này rất tuyệt khi bạn đang cố gắng tìm hiểu lý do tại sao một phần tử nhất định được định dạng theo một cách nhất định.
Máy chủ trực tiếp
Live Server là tiện ích mở rộng VSCode cho phép bạn chạy máy chủ cục bộ với tính năng tải lại trực tiếp. Tính năng này rất tuyệt khi bạn mới bắt đầu học phát triển web với các tệp HTML, CSS và JS cơ bản, vì nó sẽ cập nhật bản xem trước của bạn theo thời gian thực!
MẸO
Nếu bạn đang sử dụng một framework, khả năng là tiện ích mở rộng này là không cần thiết. Framework của bạn sẽ có một tính năng tương tự được tích hợp sẵn để tải lại trực tiếp.
Đoạn mã ES7+ React/Redux/React-Native
ES7+ React/Redux/React-Native snippets là tập hợp các đoạn mã cho React, Redux và React Native. Nếu bạn viết mã React, bạn sẽ muốn có tiện ích mở rộng này.
Bình luận tốt hơn
Better Comments cải thiện các bình luận cho mã của bạn. Nó cung cấp cú pháp tô sáng cho các loại bình luận khác nhau, như hình ảnh bên dưới hiển thị.
Chủ đề biểu tượng vật liệu
Material Icon Theme cung cấp các biểu tượng cho các tệp và thư mục trong VSCode. Điều này giúp bạn dễ dàng tìm thấy những gì bạn đang tìm kiếm và làm cho cửa sổ mã của bạn trông đẹp hơn.
Dracula chính thức
Dracula Official là một chủ đề tối cho VSCode. Đây là một trong những chủ đề phổ biến nhất trên thị trường và là chủ đề yêu thích của tôi.
Nếu bạn không thích chủ đề này, bạn nên chọn một chủ đề khác để cài đặt trong VSCode, vì chúng có thể cung cấp hỗ trợ tô sáng cú pháp bổ sung.
Lỗi TypeScript đẹp
Pretty TypeScript Errors cung cấp thông báo lỗi dễ đọc hơn và cung cấp liên kết đến tài liệu về lỗi. Tôi đã yêu thích tiện ích mở rộng này để phát triển TypeScript.
Phần mở rộng tiền thưởng
Một số tiện ích mở rộng mà tôi thấy hữu ích!
Thiên văn học
Astro là một tiện ích mở rộng rõ ràng nếu bạn đang phát triển bằng Astro. Nó cung cấp tính năng tô sáng cú pháp, đoạn mã và nhiều tính năng khác. Đây là meta framework tôi lựa chọn cho SSG và SSR, cho phép bạn sử dụng bất kỳ UI framework nào bạn muốn trong đó (React, Vue, Solid, v.v.).
MẸO
Đây là bài viết hữu ích về cách thiết lập môi trường phát triển web thành công với Astro .
Mã sốTour
CodeTour cho phép bạn ghi lại và phát lại các chuyến tham quan có hướng dẫn về cơ sở mã, trực tiếp trong trình chỉnh sửa. Điều này rất tuyệt vời để đưa các nhà phát triển mới vào làm việc hoặc chỉ để ghi lại cơ sở mã của bạn.
Thành công lớn
Bây giờ bạn đã biết một số tích hợp VSCode tốt để nâng cao kỹ năng phát triển của mình. Thành công lớn. 🚀
Đừng quên theo dõi tôi trên Twitter để biết thêm mẹo về Astro, phát triển web và thiết kế web!