11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Một trong những phần ấn tượng nhất của Visual Studio Code là khả năng tùy biến, đặc biệt là thông qua các phần mở rộng. Tôi sẽ không đề cập đến các tiện ích mở rộng dành riêng cho khuôn khổ, nhưng đây là một số tiện ích mở rộng tốt nhất trong VS Code để viết JavaScript.

Các bài viết liên quan:

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

JavaScript (Đoạn mã ES6)

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Tiện ích mở rộng đoạn mã là một trong những danh mục tiện ích mở rộng phổ biến nhất và loại này cũng phù hợp. Nó bao gồm các đoạn mã cho JavaScript ES6 hiện đại, đó là những gì bạn nên viết (hoặc học nếu bạn chưa có). Mặc dù đoạn mã này không dành riêng cho bất kỳ khung nào, nhưng các đoạn mã này có thể được kích hoạt từ các loại tệp khác nhau.

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)

Dưới đây là một số mục yêu thích của tôi mà bạn nên thử!

  • imp – nhập một mô-đun
  • imd – nhập một bản xuất đã đặt tên
  • fre – tạo cho mỗi vòng lặp thông qua mảng
  • anfn – tạo hàm ẩn danh
  • thenc – thêm khai báo then và bắt vào một lời hứa

Có rất nhiều người khác, vì vậy hãy thử họ!

Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Bạn đã bao giờ muốn thử nghiệm một chức năng hoặc chơi với một số mã JavaScript chưa? Đôi khi bạn có thể kiểm tra ngay trong bảng điều khiển Chrome Dev Tools, đôi khi bạn sẽ mở CodePen. Với Quokka.js, bạn có thể tạo một bàn di chuột ngay trong VS Code!

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Kiểm tra JavaScript của bạn một cách nhanh chóng và dễ dàng với Quokka.js.

Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Một trình định dạng mã cố định có thể tự động định dạng mã JavaScript của bạn. Bằng cách cài đặt Prettier, bạn không bao giờ phải lo lắng về việc định dạng; chỉ cần để máy tính chăm sóc nó!

Có thể hơi khó để làm quen với việc xử lý định dạng cho bạn vì tôi chắc chắn rằng rất nhiều nhà phát triển có phong cách riêng mà họ thích. Có Prettier trong một nhóm đảm bảo rằng mọi người đều tuân theo cùng một phong cách mã hóa.

Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Mặc dù console.log () có vị trí của nó, nhưng nó không phải là cách tốt nhất để gỡ lỗi. Chrome có các công cụ gỡ lỗi được tích hợp sẵn, nhưng bạn có biết rằng bạn cũng có thể gỡ lỗi trực tiếp trong VS Code bằng cách sử dụng tiện ích mở rộng này không?

Cá nhân tôi thích gỡ lỗi bằng cách sử dụng tiện ích mở rộng này. Điều này có nghĩa là tôi có thể ở bên trong trình chỉnh sửa mà tôi đã sử dụng, thực hiện các thay đổi nhanh chóng, v.v. Bạn có thể thực hiện hầu hết những điều mà bạn mong đợi khi gỡ lỗi.

  • đặt các điểm ngắt
  • bước qua các dòng mã, lệnh gọi hàm, v.v.
  • xem các biến
  • xem đầu ra bảng điều khiển của bạn

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Với rất nhiều công cụ tuyệt vời hiện có, bạn không nên căng thẳng về việc định dạng mã của mình. ESLint là một trong số nhiều công cụ có thể tự động định dạng mã của bạn (có thể lưu nếu bạn chọn). Ngoài ra, khía cạnh linting có thể “hét lên” với bạn (vì thiếu một từ hay hơn) để khuyến khích hoặc yêu cầu tuân theo các nguyên tắc nhất định.

ESLint hoặc TSLint (dành cho TypeScript) thường được cấu hình với nhiều dự án khởi động, vì vậy bạn thậm chí có thể không phải tự mình cấu hình nó. Chỉ bằng cách tạo một dự án mới và mở nó trong VS Code, bạn sẽ có tất cả sự trợ giúp cần thiết để viết mã nhất quán!

Import cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Nếu bạn lo lắng về kích thước của các gói và mô-đun mà bạn nhập vào ứng dụng của mình, hãy xem tiện ích mở rộng này! Bên cạnh câu lệnh nhập, bạn sẽ thấy kích thước của gói bạn đang nhập. Đây là một cách tuyệt vời để đảm bảo kích thước gói ứng dụng của bạn càng nhỏ càng tốt!

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Khi cố gắng tham chiếu một tệp trong không gian làm việc của bạn, có thể khó nhớ đường dẫn và tên tệp chính xác. Tôi cố gắng giữ thanh menu của mình trong VS Code hầu hết thời gian đóng (để tối đa hóa bất động sản của mã), vì vậy tôi ghét phải mở trình khám phá tệp chỉ để kiểm tra lại vị trí của tệp. Đó là nơi Path Intellisense xuất hiện!

Phần mở rộng này sẽ cung cấp cho bạn intellisense khi tham chiếu đến đường dẫn tệp. Tất cả những gì bạn phải làm là bắt đầu nhập một đường dẫn bên trong dấu ngoặc kép và bạn sẽ nhận được intellisense cho tên thư mục và tệp.

View Node Package

https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-npm-source

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Nhấp vào các dòng yêu cầu hoặc nhập khẩu trong mã của bạn và nhấp thẳng đến kho lưu trữ GitHub.

Rất hữu ích khi bạn muốn chuyển đến GitHub để xem một số mã nguồn hoặc xem qua tài liệu / sự cố.

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Phần mở rộng này có lẽ là phần mở rộng ít phổ biến nhất trong nhóm, nhưng cá nhân tôi thấy nó cực kỳ hữu ích. Vì vậy, bạn biết khi nào bạn có một đoạn mã bạn cần triển khai hoặc hoàn thành sau này? Hoặc bạn muốn đánh dấu một đoạn mã là không dùng nữa? Hoặc bạn có câu hỏi cho một nhà phát triển khác về một đoạn mã?

Phần mở rộng này sẽ cung cấp các nhận xét được mã hóa bằng màu sắc để giải quyết tất cả những điều trên. Đây là danh sách các mã màu có sẵn.

  • Cảnh báo
  • Truy vấn
  • VIỆC CẦN LÀM
  • Điểm nổi bật

NPM Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Đã bao giờ nhập một gói và quên chính xác tên là gì? Thôi, không cần nữa! Phần mở rộng này sẽ cung cấp intellisense gói khi nhập dựa trên các gói NPM mà bạn đã cài đặt.

Wallaby.js

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Chạy thử nghiệm của bạn khi bạn viết mã! Từ những người đã mang lại Quokka.js cho chúng tôi, đây là một công cụ thú vị để tăng tốc độ phát triển của bạn.

11 Extension hỗ trợ lập trình JavaScript trong Visual Studio code

Phần kết luận

Có bất kỳ tiện ích mở rộng JavaScript tuyệt vời nào nữa không? Hãy cho chúng tôi biết trong phần nhận xét và chúng tôi sẽ thêm nó vào bài đăng này như những đề cập bổ sung.

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply