Một trong những chức năng ấn tượng nhất của Visual Studio Code là khả năng mềm dẻo thông qua các extension. Nếu các bạn đang học và làm việc với JavaScript thì bài viết này là cần thiết nhất cho các bạn để developer code.
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
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
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!
Kiểm tra JavaScript của bạn một cách nhanh chóng và dễ dàng với Quokka.js.
Xem thêm Giới thiệu Xdebug và visual cod
Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
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.
Xem thêm 14 Extension cho Visual Studio Code tốt nhất cho Dev
Debugger for Chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
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
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!
Xem thêm Cài đặt IDE lập trình Flutter trên window
Import cost
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
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!
Xem thêm SALESFORCE MARKETING CLOUD
Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
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.
Xem thêm Clean code là gì ?
View Node Package
https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-npm-source
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ố.
Better Comments
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
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
Đã 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
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.
Kết luận về plugin visual code cho JavaScript
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.
