Hướng dẫn dùng jsperformance JavaScript

Một trong những điểm nổi bật nhất của Visual Studio Code là khả năng tùy biến, đặc biệt là kho Extension (tiện ích mở rộng) vô cùng phong phú và hữu ích.

Dưới đây là 11 Extension hữu ích trên VS Code giúp viết Javascript tốt hơn.

#1. Javascript (ES6) Code Snippet

Extension hữu ích trên VS Code dành cho lập trình Javascript - Javascript (ES6) code snippet

Snipet Extesion là một trong những danh mục Extension phổ biến nhất, và Javascript (ES6) Code Snippet cũng là là loại này.

Nó bao gồm Snippet ES6 JavaScript hiện đại, đó là những gì bạn nên viết khi sử dụng Javascript (hoặc chuẩn bị học nếu bạn biết).

Và snippet này là không chỉ định bất kỳ Framework nào, nên những snippet này có thể kích hoạt từ các tập tin khác nhau.

• Javascript (.js)
• TypeScript (.ts)
• Javascript React (.jsx)
• Typescript React (.tsx)
• Html (.Html)
• Vue (.vue)

Đây là những phần yêu thích của mình, bạn cũng có thể thử xem.

• imp - import một module
• imd - import một name export
• fre - tạo vòng lặp for each qua mảng
• anfn - tạo anonymous function
• thenc - khai báo thêm then và catch đến một promise

Còn rất nhiều những thứ khác. Bạn có thể comment để chia sẻ thêm những thứ bạn thấy thích tại phần bình luận nhé.

> Nếu bạn đang bắt đầu tìm hiểu về JavaScript thì hãy cùng HỌC JAVASCRIPT theo series hướng dẫn này.

#2. Quokka.js

Extension hữu ích trên VS Code dành cho lập trình Javascript - Quokka.js

Có bao giờ bạn muốn test một function hay là nghịch với mấy đoạn code? Đôi khi bạn có thể kiểm tra ngay trong Chorme Dev Tools console, đôi khi bạn sẽ thử sử dụng CodePen.

Cách tiện ích Quokka hoạt động

Với Quokka.js bạn có thể tạo ra một bản nháp ngay bên trong VS Code! 

Kiểm tra Javascript nhanh chóng và dễ dàng với Quokka.js

#3. Prettier: Extension giúp định dạng code

Extension hữu ích trên VS Code dành cho lập trình Javascript - Prettier

Một tiện tích định dạng code tự động. Bằng cách cài đặt Prettier bạn không bao giờ phải lo lắng về định dạng, chỉ cần để cho máy tính lo phần đó. 

Có thể là sẽ có chút khó khăn để có định dạng phù hợp nhất với nhu cầu của bạn, nhưng mình đảm bảo, đây là định dạng phổ biến nhất và được nghiên cứu để giúp đỡ lập trình tốt nhất.

Hướng dẫn sử dụng Extension Prettier

• Sử dụng tổ hợp phí CMD/CTRL + Shift + P để định dạng toàn bộ tài liệu.

• Hoặc chọn đoạn code bạn muốn định dạng sau đó tiếp tục sử dụng tổ hợp (CMD/CTRL + Shift + P)

Có Prettier dùng chung trong Team, đảm bảo tất cả dự án của team bạn sẽ có một định dạng đồng nhất, dễ dàng hơn cho người mới tham gia sau này.

#4. Debugger for Chrome

Extension hữu ích trên VS Code dành cho lập trình Javascript - Debugger for chrome

Mặc dù nhiều người vẫn quen dùng console.log(), nhưng nó không phải là cách tốt nhất để gỡ lỗi (debug).

Chorme có tool debug được xây dựng sẵn, nhưng bạn biết đấy, bạn có thể debug trực tiếp ở VS Code bằng cách sử dụng Extension Debugger for Chorme.

Cách sử dụng tiện ích Debugger for Chrome

Cá nhân mình thích sử dụng tiện ích để debug. Điều này có nghĩa là mình có thể ở lại bên trong VS Code debug tiện lợi nhất. Thậm chí là có thể làm nhiều việc khác khi debug.

• set breackpoint
• Xem qua từng dòng, từng funcion calls...
• Kiểm tra các biến
• Kiểm tra output

#5. ESlint

Extension hữu ích trên VS Code dành cho lập trình Javascript - Eslint

Với rất nhiều tiện ích tuyệt vời, bạn không cần phải stress về định dạng của code nữa.

ESLint là một trong nhiều rất nhiều tiện ích có thể tự động format lại code của bạn (khi save nếu bạn lựa chọn).

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

#6. Import Cost: Kiểm soát kích cỡ các file import

Extension hữu ích trên VS Code dành cho lập trình Javascript - Import Cost

Nếu bạn đang lo lắng về kích thước của các packages và module bạn import vào ứng dụng của mình, hãy kiểm tra tiện ích Impor Cost này ngay!

Sau đó, khi import bạn sẽ thấy thấy kích thước của packages bạn import. Đây là một cách tuyệt vời để kiểm soát chặt chẽ kích thước của ứng dụng.

Extension import cost giúp bạn biết và kiểm soát kích cỡ của tệp import

#7. Path Intellisense: Gợi ý đường dẫn thông minh

Extension hữu ích trên VS Code dành cho lập trình Javascript - Path Intellisense

Khi cố gắng để tham chiếu đến một tệp tin trong ứng dụng của bạn, có thể sẽ khá khó khăn để nhớ chính xác tập tin ở đâu, ghi nhớ đường dẫn của tập tin.

Một dự án của mình thường có rất nhiều thư mục (mò vào mớ đó cũng loạn óc lắm), vì vậy mình ghét phải mở các thư mục chỉ để kiểm tra xem tệp tin đang nằm ở đâu.

Chính vì thế, Path Intellisense là lựa chọn của mình.

Tiện ích mở rộng này sẽ cung cấp cho bạn đường dẫn tham chiếu của tập tin bạn cần.

Hướng dẫn sử dụng tiện ích Path Intellisense

Tất cả các bạn phải là bắt đầu gõ một path bê trong dấu "" và bạn sẽ nhận được được gợi ý về đường dẫn bạn cần.

#8. View Node Package

Extension hữu ích trên VS Code dành cho lập trình Javascript - Veiw Node Packages

View Node Package cho phép bạn click vào require hoặc import line trong code của bạn và click thẳng đến GitHub repo.

Rất hữu ích khi bạn muốn nhảy đến GitHub để xem Source code hoặc kiểm tra qua docs/issues.

Hướng dẫn sử dụng View Node Package

+ Điều hướng đến dòng nơi bạn require(...) packages.
+ Chạy lệnh View Node Package Source

+ Nếu bạn lựa chọn multiple require thì tiện ích sẽ scan document và đưa ra các lựa chọn để bạn lựa chọn.

#9. Better Comments: Extension giúp comment tốt hơn

Extension hữu ích trên VS Code dành cho lập trình Javascript - Better Comments

Tiện ích Better Comments này là có thể ít phổ biến nhất trong số này, nhưng cá nhân mình thấy, nó vô cùng hữu ích.

Vì vậy, bạn biết khi nào bạn có một đoạn code của bạn cần phải thực hiện hoặc kết thúc?

Hoặc anh bạn muốn đánh dấu một đoạn code là không dùng nữa? Hoặc bạn có một câu hỏi cho lập trình viên khác về một đoạn code?

Tiện ích mở rộng này sẽ cung cấp comment theo màu sắc, sử dụng màu sắc để giải thích thêm ý của comment.

Đây là danh sách các loại comment:

• Alerts
• Queries
• TODOs
• Highlights

​

​Hướng dẫn sử dụng Better Comments

Hướng dẫn sử dụng Extension Better Comments

Đối với Alerts bạn sử dụng: // !
Đối với Queries bạn sử dụng: // ?
Đối với TODOs bạn sử dụng: // todo
Đối với Highlights bạn sử dụng: // *

#10. NPM Intellisense: Gợi ý tên package bạn muốn import

Extension hữu ích trên VS Code dành cho lập trình Javascript - NPM Intellisense

Đã bao giờ bạn muốn import một pakages mà lại quên tên chính xác của nó là gì chưa?

Tiện ích NPM Intellisense này sẽ gợi ý tên package khi bạn muốn import dựa trên các packages bạn đã cài đặt.

Tiện tích npm intellisense gợi ý tên của Packages

#11. Wallaby.js

Extension hữu ích trên VS Code dành cho lập trình Javascript - Wallaby.js

Chạy các bài test như bạn code. Đây là tiện ích rất hay giúp bạn tăng tốc phát triển dự án.

Cách Wallaby.js hoạt động

Chạy các bài test như bạn code

Tổng kết

Còn có Extension hữu ích nào nữa cho Javascript có sẵn trên VS Code? Nếu bạn biết, hãy chia sẻ với mọi người trong phần bình luận nhé.

Note: Trong các khóa học full stack tại NIIT - ICT Hà Nội cũng sẽ hướng dẫn sử dụng thêm các Extension hữu ích giúp bạn lập trình tốt hơn.

> Tham khảo ngay KHÓA HỌC LẬP TRÌNH PHP hoặc KHÓA HỌC JAVA để học đầy đủ bộ công nghệ lập trình web từ Front end đến Back end (đã bao gồm cả JavaScript).

---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI

Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!

Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT: 02435574074 - 0383.180086

Email:

Fanpage: https://facebook.com/NIIT.ICT/

#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php