Tổng hợp Extensions VSCode hữu ích cho anh em

Giới thiệu

VSCode là một Text Editor, khác với một IDE, Text Editor gọn nhẹ, dễ dùng, dễ cài đặt nhưng đi đôi với việc gọn nhẹ thì ít tính năng được cài đặt sẵn khi cài đặt. Vì vậy, các Extensions được cộng đồng developer hoặc các tổ chức xây dựng và phát triển nhằm giúp quá trình development trở nên nhanh chóng và dễ dàng hơn

1. Dạo bài

Chắc các anh em lập trình, nhất là các anh em lập trình Javascript không còn lạ lẫm gì với trình soạn văn bản VSCode. Từ lập trình Backend NodeJs, Frontent ReactJs, App React Native hay đến cả Desktop ElectronJs, nhà nhà người người đều dùng VSCode. Ngoài điểm mạnh là gọn nhẹ, dễ dùng, dễ cài đặt thì lý do lớn nhất theo mình nghĩ chắc chỉ có thể là do VSCode free (cười). Free mà còn ngon lành cành đào nữa thì việc gì phải ngại dùng phải không nào!

VSCode có một ít features được đại ca Microsoft cài đặt sẵn, còn lại thì VSCode như quyển vở trắng với một tấm bìa vậy, vì thế các developer hay các tổ chức đã chung tay xây dựng nên các Extensions vô cùng hữu ích

Không luyên thuyên buôn chuyện nữa, tới phần giới thiệu các Extensions thường được sử dụng trong các dự án thôi nào. Gét gô!

2. Extensions

2.1. TypeScript and JavaScript Language Features

Anh em nào khi lần đầu cài đặt VSCode và code JS/TS nhưng code kiểu gì cũng không được gợi ý code, hay chỉ là click vào hàm mà nó lại không trỏ tới chỗ hàm được định nghĩa không.

Là vì Extension này chưa được enable đấy. Extension này là một Extension được built-in sẵn và bạn chỉ việc tìm nó mà enable lên thôi.

Lưu ý rằng nếu chỉ search ở phần Extension thì sẽ không ra đâu nhé. Bạn cần click vào bộ filter (hình cái phễu) và chọn built-in

2.2. Live Server

Extension này giúp chạy file html/css với hot reload

2.3. Auto Close Tag và Auto Rename Tag

Thoáng nhìn thì đây chỉ là 2 Extensions cỏn con giúp close và rename tag thôi nhưng rất chi là hữu ích và không thể thiếu khi code html/jsx đâu nhé

2.4. Prettier - Code formatter và ESLint

Làm sao để code chuẩn format? Làm sao để đạt được coding convention? Không lo đã có 2 em nó lo

Đây là 2 couple giúp bạn viết mã sạch đẹp và chuẩn hơn cả mấy em thi vở sạch chữ đẹp nữa (cười)

2.5. Winter is Coming Theme và vscode-icons

Bạn là một người hướng nội, là một con người tẻ nhạt. Bạn muốn có một vài chút màu sắc trên sự nghiệp coder của mình hay đơn giản là bạn muốn cái trình soạn thảo bạn có chút màu mè hoa lá hẹ để code đỡ chán (cười)

Hãy đến với 2 extension này, tô tí màu vào đôi mắt trắng đen của bạn (cười tiếp)

2.6. Code Spell Checker

Viết sai chính tả thì bị kẻ này người kia cười chê, đừng tủi thân nữa, hãy dùng extension này để check giúp mình khi viết sai từ Tiếng Anh nhé

2.7. Một số Extensions khác

• Path Intellisense: gợi ý đường dẫn folder/file
• Color Highlight: hiển thị màu css
• Import Cost: tính dung lượng của một module/package được import
• Bookmarks: đánh dấu những dòng code để tiện nhảy qua nhảy lại những dòng code đó trên nhiều file khác nhau

3. Tổng kết

Như vậy ở trên mình đã tổng hợp một số Extensions phổ biến. Ngoài ra, anh em đang sử dụng những Extensions nào hay ho, hữu ích thì hãy comment ở dưới để anh em cùng khám phá nhé! Cảm ơn các bạn đã đọc