10 TIỆN ÍCH MỞ RỘNG VSCODE DÀNH CHO JAVASCRIPT DEVELOPERS NĂM 2025

Khi bạn cài đặt VS Code lần đầu, nó đi kèm với một số đoạn code tích hợp cho JavaScript và Typescript. Đoạn code giúp bạn viết code lặp lại một cách nhanh chóng. Tuy nhiên, bạn có thể thấy những điều này có thể không đủ. Bạn có thể dễ dàng tạo của riêng mình hoặc chỉ cần cài đặt một tiện ích mở rộng bao gồm một loạt các đoạn mã hữu ích mới.

Mẹo nhanh nếu bạn muốn các đoạn trích hiển thị trên đầu các đề xuất là sử dụng cấu hình sau:

{ "editor.snippetSuggestions": "top" }

Dưới đây là một số tiện ích mở rộng đoạn code phổ biến nhất dành cho các nhà phát triển JavaScript. Tuy nhiên, tôi khuyên bạn chỉ nên cài đặt một cái vì đơn giản.

• Đoạn mã JavaScript (ES6), của Charalampos Karypidis. Đây hiện là tiện ích mở rộng đoạn mã javaScript phổ biến nhất với hơn 3 triệu lượt cài đặt cho đến nay. Phần mở rộng này cung cấp cú pháp ES6 cho JavaScript, TypeScript, HTML, React và Vue. Tất cả các đoạn mã đều có dấu chấm phẩy cuối cùng.
• Đoạn mã JavaScript (ES6) theo kiểu StandardJS , của James Vickery. Về cơ bản, đây là một nhánh của tiện ích mở rộng ở trên cho những người thích quy ước kiểu StandardJS — nghĩa là, các đoạn mã không có dấu chấm phẩy.
• Đoạn mã theo kiểu JavaScript standardjs , bởi capaj. Một đoạn mã được tạo kiểu StandardJS khác nhưng đoạn mã này phổ biến hơn với hơn 72 nghìn lượt cài đặt. Ban đầu được phân tách từ các đoạn mã Atom StandardJS. Chứa một bộ sưu tập khổng lồ các đoạn mã tiện dụng và hỗ trợ JavaScript, TypeScript và React.
• JavaScript Snippets, bởi Nathan Chapman. Một bộ sưu tập các đoạn mã JavaScript với khoảng 33k + lượt cài đặt cho đến nay. Phần mở rộng đoạn mã này hỗ trợ các khung Node.js, BDD Testing như Mocha và Jasmine.  
• Atom JavaScript Snippet, bởi Saran Tanpituckpong. Với khoảng 26 nghìn lượt cài đặt trở lên cho đến nay, các đoạn mã trong tiện ích mở rộng này đã được chuyển từ atom/language-javascript. Các đoạn mã JavaScript được chuyển từ phần mở rộng atom / language-javascript.

Phiên bản mới nhất của VS Code hỗ trợ tô màu cú pháp tốt hơn và hiện phù hợp hơn với các tiêu chuẩn được đặt ra trong ngữ pháp Atom. Do đó, các phần mở rộng như JavaScript Atom Grammar không còn cần thiết nữa. Tuy nhiên, vẫn có một số phần mở rộng đánh dấu cú pháp khá hữu ích khi nói đến một số loại dự án và phần mở rộng tệp:

•  Babel JavaScript, của Michael McDermott. Với hơn 550 nghìn lượt cài đặt cho đến nay, tiện ích mở rộng này cung cấp tính năng làm nổi bật cú pháp cho mã ES201x JavaScript, React, FlowType và GraphQL.
• DotENV Với hơn 833k lượt cài đặt cho đến nay, tiện ích mở rộng này hỗ trợ đánh dấu cú pháp cho cài đặt môi trường - nghĩa là tệp .env.
• Bracket Pair Colorizer 2, của CoenraadS. Với 730k + lượt cài đặt, tiện ích mở rộng này làm nổi bật các dấu ngoặc phù hợp với các màu sắc khác nhau, giúp bạn xác định dấu ngoặc thuộc khối nào.

Bạn đã bao giờ tranh luận với đồng đội của mình về tab so với khoảng trắng hoặc dấu chấm phẩy và không có dấu chấm phẩy chưa? Bạn sẽ nhận ra rằng mọi người có ý kiến ​​mạnh mẽ về việc sử dụng phong cách mã hóa nào. Tuy nhiên, mọi người trong cùng một nhóm cần phải sử dụng cùng một phong cách mã hóa bất kể ý kiến ​​của họ. Tuy nhiên, việc các lập trình viên quên kiểu mã hóa mà họ đã đồng ý làm việc là điều khá phổ biến.

Để thực thi các quy tắc, chúng tôi cần sử dụng các linters so sánh mã của bạn với các quy tắc bạn đã thiết lập. Bạn xác định các quy tắc của mình bằng cách chọn một kiểu mã hóa phổ biến như Standard , Google và Airbnb . Bạn có thể sử dụng chúng nguyên trạng hoặc sử dụng tệp cấu hình để tùy chỉnh các quy tắc. VS Code không có JavaScript linter tích hợp sẵn, vì vậy bạn sẽ cần cài đặt một phần mở rộng.

• ESLint, của Dirk Baeumer. Với hơn 8 triệu lượt cài đặt, đây là tiện ích mở rộng phổ biến nhất cung cấp hỗ trợ cho thư viện ESLint . Để tiện ích mở rộng hoạt động, dự án của bạn sẽ cần cài đặt các gói và plugin ESLint. Bạn cũng sẽ cần chỉ định một .eslintrc, sẽ chỉ định các quy tắc mà tiện ích mở rộng sẽ sử dụng để chèn mã của bạn.
• JSHint, của Dirk Baeumer. Với hơn 1,2 triệu lượt cài đặt, tiện ích mở rộng này hỗ trợ linting với thư viện JSHint . Cần có .jshintrctệp cấu hình để tiện ích mở rộng phù hợp với mã của bạn.
• StandardJS - Kiểu chuẩn JavaScript , của Sam Chen. Phần mở rộng này (259k + lượt cài đặt) chỉ đơn giản là tích hợp JavaScript Standard Style vào VS Code. Bạn sẽ cần cài đặt standardhoặc semiStandardlà một nhà phát triển phụ thuộc vào dự án của mình. Không cần tệp cấu hình. Bạn sẽ cần phải tắt trình xác thực tích hợp của VS Code để tiện ích mở rộng này hoạt động.
• JSLint, của Andrew Hyndman. Phần mở rộng này cung cấp linting với thư viện JSLint . Bạn sẽ cần cài đặt jslintcục bộ hoặc toàn cầu để tiện ích mở rộng hoạt động. Nó đã có 109k + lượt cài đặt cho đến nay.

Nếu bạn muốn có cái nhìn tổng quan về các loại linters có sẵn và những ưu và nhược điểm của chúng, hãy xem so sánh về các công cụ linting JavaScript.

Nguồn: Khaitan - morioh 

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

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.

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.

Nguồn: Khaitan - morioh.com