10 TIỆN ÍCH MỞ RỘNG VSCODE DÀNH CHO JAVASCRIPT DEVELOPERS NĂM 2020 (P1)

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