10 TIỆN ÍCH MỞ RỘNG VSCODE DÀNH CHO JAVASCRIPT DEVELOPERS NĂM 2020 (P2)
4. Tiện ích mở rộng quản lý gói nút
Mỗi dự án JavaScript cần ít nhất một gói npm, trừ khi bạn là người thích làm mọi thứ một cách khó khăn. Dưới đây là một số tiện ích mở rộng VS Code sẽ giúp bạn quản lý và làm việc với các gói npm dễ dàng hơn.
- npm, bởi egamma. Với hơn 2,3 triệu lượt cài đặt, tiện ích mở rộng này sử dụng package.json để xác thực các gói đã cài đặt. Nếu thiếu bất kỳ điều gì hoặc các phiên bản không khớp, tiện ích mở rộng sẽ cung cấp cho bạn các tùy chọn có thể nhấp để khắc phục sự cố. Ngoài ra, bạn cũng có thể chạy các tập lệnh npm được xác định package.json ngay bên trong trình chỉnh sửa.
- IntelliSense, của Christian Kohler. Với hơn 1,9 triệu lượt cài đặt, tiện ích mở rộng này cung cấp các mô-đun npm tự động hoàn thành trong các câu lệnh nhập.
- Path IntelliSense, của Christian Kohler. Với hơn 2,7 triệu lượt cài đặt, tiện ích mở rộng này sẽ tự động hoàn thành tên tệp. Nó cũng hoạt động bên trong các tệp HTML và CSS.
- Node exec, bởi Miramac. Với hơn 168 nghìn lượt cài đặt, tiện ích mở rộng này cho phép bạn thực thi tệp hiện tại hoặc mã đã chọn của bạn với Node.js bằng cách nhấn F8 trên bàn phím. Bạn cũng có thể hủy quá trình đang chạy bằng cách nhấn F9.
- Xem gói Node của Dominik Kundel. Với hơn 55 nghìn lượt cài đặt, tiện ích mở rộng này cho phép bạn nhanh chóng xem nguồn và tài liệu gói Node trong khi bạn đang làm việc với code của mình.
- Node Readme, bởi bengreenier. Với hơn 52 nghìn lượt cài đặt, tiện ích mở rộng này cho phép bạn nhanh chóng mở tài liệu gói npm ngay bên trong trình chỉnh sửa VS code dưới dạng một tab riêng biệt.
- Tìm kiếm node_modules của Jason Nutter. Theo mặc định, node_modulesthư mục bị loại trừ khỏi tìm kiếm tích hợp của VS Code. Với hơn 470k lượt cài đặt, tiện ích mở rộng này cho phép bạn nhanh chóng điều hướng và mở tệp node_modules bằng cách duyệt qua cây thư mục.
- Import Cost theo Wix. Điều này hiển thị bao nhiêu dung lượng đĩa mà một gói đang sử dụng khi bạn nhập nó. Phần mở rộng có 562K + lượt cài đặt.
>>> Lộ trình học lập trình cam kết đầu ra cho sinh viên và người đi làm
5. Định dạng tiện ích mở rộng
Thường xuyên hơn không, đôi khi chúng tôi viết mã không phù hợp với phần còn lại của mã. Để khắc phục, chúng ta cần quay lại và sửa lỗi thụt lề ở mỗi dòng. Ngoài ra, chúng ta cần đảm bảo dấu ngoặc nhọn và thẻ được định dạng đúng ở định dạng có thể đọc được. Quá trình này có thể nhanh chóng trở nên tẻ nhạt. Tuy nhiên có các tiện ích mở rộng có thể thực hiện những điều này. Hãy lưu ý rằng các tiện ích mở rộng như Prettiervà Beautifykhông thể hoạt động đồng thời.
- Prettier Code Formatter, bởi Esben Petersen. Đây là tiện ích mở rộng phổ biến nhất hỗ trợ địnhdạng JavaScript, TypeScript và CSS bằng Prettier. Nó đã có hơn 5,7 triệu lượt cài đặt cho đến nay. Bạn nên cài đặt prettier cục bộ dưới dạng phụ thuộc của nhà phát triển.
- Beautify, bởi HookyQR. Một phần mở rộng jsBeautifier hỗ trợ JavaScript, JSON, CSS và HTML. Nó có thể được tùy chỉnh thông qua một tệp .jsbeautifyrc. Nó hiện là định dạng phổ biến thứ hai, với 4,4 triệu lượt cài đặt cho đến nay.
- JS Refactor của Chris Stead. Điều này cung cấp một số tiện ích và hành động để cấu trúc lại mã JavaScript, chẳng hạn như trích xuất các biến/ phương thức, chuyển đổi mã hiện có để sử dụng các hàm mũi tên hoặc các ký tự mẫu và xuất các hàm. Nó đã có hơn 140 nghìn lượt cài đặt cho đến nay.
- JavaScript Booster, của Stephan Burguchev. Đây là một công cụ tái cấu trúc mã tuyệt vời. Nó có một số hành động mã hóa như chuyển đổi varthành consthoặc let, xóa các elsecâu lệnh thừa, khai báo và khởi tạo hợp nhất. Chủ yếu lấy cảm hứng từ WebStorm, nó có 74k + cài đặt cho đến nay.
6. Tiện ích mở rộng trình duyệt
Trừ khi bạn đang viết một chương trình bảng điều khiển bằng JavaScript, rất có thể bạn sẽ thực thi mã JavaScript của mình bên trong trình duyệt. Điều này có nghĩa là bạn sẽ cần phải thường xuyên làm mới trang để xem hiệu quả của mỗi lần cập nhật mã mà bạn thực hiện. Thay vì làm việc này theo cách thủ công mọi lúc, đây là một vài công cụ có thể giảm đáng kể thời gian phát triển quy trình lặp lại của bạn:
- Trình gỡ lỗi cho Chrome của Microsoft. Với hơn 5,2 triệu lượt cài đặt, tiện ích mở rộng này cho phép bạn gỡ lỗi mã JavaScript của mình trong Chrome hoặc bất kỳ mục tiêu nào khác hỗ trợ Giao thức trình gỡ lỗi Chrome. Nếu bạn chưa quen với tiện ích mở rộng này và gỡ lỗi trong VS Code, hãy xem hướng dẫn gỡ lỗi VS Code và Chrome của chúng tôi.
- Live Server, của Ritwick Dey. Tiện ích mở rộng này cho phép bạn khởi chạy một máy chủ phát triển cục bộ với tính năng tải lại trực tiếp cho các trang tĩnh và động. Nó đã có hơn 4,6 triệu lượt cài đặt cho đến nay. Bản demo máy chủ trực tiếp
- Preview On Web Server, bởi YuichiNukiyama. Điều này cung cấp máy chủ web và bản xem trước trực tiếp của HTML. Các tính năng có thể được gọi từ menu ngữ cảnh hoặc menu trình chỉnh sửa. Nó có 120k + lượt cài đặt cho đến nay.
- PHP Server, bởi brapifra. Được xây dựng cho các dự án PHP, nó vẫn hữu ích để kiểm tra mã JavaScript chỉ cần chạy phía máy khách. Tính đến nay, nó đã có 234k + lượt cài đặt.
- Rest Client, bởi Huachao Mao. Thay vì sử dụng trình duyệt hoặc chương trình CURL để kiểm tra các điểm cuối API REST của bạn, bạn có thể cài đặt công cụ này để chạy các yêu cầu HTTP một cách tương tác ngay bên trong trình chỉnh sửa. Nó có 834k + lượt cài đặt cho đến nay.