11 Extension hữu ích cho Javascript trên Visual Studio Code

Ngày đăng: 08/06/2019 - Cập nhật: 14/04/2021

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: hello@niithanoi.edu.vn

Website: https://niithanoi.edu.vn

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

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

Về trang trước

Gửi email in trang

Bình luận Facebook

Intel và các công ty khác cam kết xây dựng các công cụ AI

Messenger cho phép album chia sẻ, gửi ảnh HD và chia sẻ tệp lớn hơn

Các hacker người Nga đã đánh cắp email của chính phủ liên bang

Google tung ra Gemini trong Android Studio để hỗ trợ viết mã

Các nhà nghiên cứu về nguyên tắc Anthropic

Microsoft giải tán Office và Teams trên toàn cầu

Premium trên X sẽ có quyền truy cập vào chatbot AI Grok

AI và cơ sở hạ tầng dữ liệu thúc đẩy nhu cầu cho các startup mã nguồn mở

Công cụ AI mới nhất của GitHub

IPO của Astera Labs tăng 72%

TikTok cho phép người sáng tạo ở nhiều quốc gia hơn

Đang diễn ra gì với dự luật mới có thể cấm TikTok?

Apple phát hành API mới

Apple từ bỏ dự án xe của mình

Các gợi ý tìm kiếm trong Chrome trở nên hữu ích hơn

Khóa học liên quan đến bài viết

Khóa học PHP Full stack [2023] cho người mới bắt đầu

96 giờ

Khóa học Lập trình PHP Full stack, phiên bản cập nhật lần thứ 8. Dạy Lập trình PHP bài bản từ Front end đến Back end + Laravel. Hướng dẫn làm 2 Dự Án Web lớn

KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG

50 giờ

Khóa học giúp học viên sử dụng thành thạo ngôn ngữ Lập trình Python (3x). Hiểu và phát triển được Ứng dụng Web với Django Framework. Học thực hành với Giảng viên cao cấp.

Lập trình PHP với Laravel Framework

42 giờ

Khóa học Lập trình PHP với Laravel Framework được NIIT - ICT HÀ NỘI xây dựng nhằm hoàn thiện kỹ năng lập trình web các các bạn đã biết Lập trình Web PHP thuần.

Khóa học Java Full stack (IJFD)

104 giờ

Học lập trình Java Fullstack với khóa học được xây dựng theo lộ trình bài bản, từ JAVA CƠ BẢN đến JAVA WEB và nâng cao về JAVA FRAMEWORK như: Spring Boot, Hibernate

Mục lục

Đăng ký tư vấn

Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký

Được cập nhật các ưu đãi sớm nhất

Hotline: 0383180086

Tên không được để trống

Số điện thoại không được để trống

Email không được để trống

Tư vấn cho tôi ngay !

Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội

Gửi cho tôi