Top Visual Studio Extensions for Developers

VSCde

Visual Studio Code còn được gọi là VSCde là một text editor cross-flatform mã nguồn mở được phát triển bởi Microsoft, sử dụng để xây dựng các website, ứng dụng hoàn toàn miễn phí. Nó được các lập trình viên sử dụng nhờ hiệu suất cao và có nhiều tính năng phong phú. Lý do Visual Studio Code trở nên phổ biển chính do hiệu suất lập trình ổn định và kho ứng dụng phong phú được cập nhật liên tục. Trong bài viết này sẽ giới thiệu top các Extension hay cho Visual Studio Code để bạn có thể sử dụng thật tốt trong khi làm việc với VSCode. Cùng tìm hiểu với chúng tôi và bạn sẽ có được những plugin tốt nhất để sử dụng mà không mất công tìm kiếm, dùng thử.

Vì sao cần cài đặt Extension cho Visual Studio Code?

Việc cài đặt các extension hay cho Visual Studio Code sẽ giúp bổ sung tính năng cho nó, phục vụ cho mục đích học tập, công việc của mình. Bao gồm:

Hỗ trợ quản lý những công việc yêu cầu những kiến thức chuyên môn như: quản lý Database, gỡ lỗi cho các phần mềm, ứng dụng.
Cập nhật thêm một ngôn ngữ lập trình mới, sở hữu nhiều tính năng vượt trội.
Giúp người dùng tạo ra các thông tin ảo dùng để thử nghiệm.
Bổ sung thêm các tính năng tốt hỗ trợ phát triển các Framework/CMS.
Giúp kiểm soát code đẹp hơn, dễ nhìn, thu hút với gam màu sắc, bố cục được phân biệt rõ ràng. Không để bạn phải đợi lâu nữa, dưới đây sẽ tổng hợp các extension hay cho Visual Studio Code được sử dụng phổ biến nhất hiện nay. Mời bạn cùng tham khảo nhé.

Top các extension hay cho Visual Studio

Auto Close Tag được xây dựng để giúp bạn tự động đóng thẻ khi bạn mở thẻ. Ví dụ như là khi bạn gõ <html> thì nó sẽ tự động thêm </html>. Ngoài ra nó cũng hỗ trợ cho nhiều ngôn ngữ khác như là XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX… nó cũng có một số thiết lập giúp bạn dễ dàng tinh chỉnh như là đặt danh sách thẻ không tự động đóng, sử dụng phím tắt để thêm thẻ đóng thủ công…
Auto Rename Tag giúp tự động đổi tên cả cặp thẻ trong HTML, XML. Ví dụ khi bạn thay đổi tên thẻ mở thì thẻ đóng tương ứng cũng sẽ được tự động thay đổi theo. Bạn có thể xem ví dụ chi tiết trong phần Usages nhé.
Beautify là một tiện ích giúp bạn có thể định dạng lại cách hiển thị code một cách đẹp mắt hơn. Nó hỗ trợ cho các ngôn ngữ phổ biến hiện nay như là Javascript, JSON, CSS, Sass và HTML.
Better Comments hiển thị comment theo từng loại riêng biệt giúp dễ dàng phân loại và hình dung hơn ví dụ như là các thông báo quan trọng cần làm nổi bật, các cảnh báo, những việc phải làm… Ngoài ra bạn cũng có thể tùy chỉnh để phù hợp với mục đích và sở thích của mình như thiết lập các cú pháp comment, chỉnh sửa màu sắc màu nền cho comment.
Bracket Pair Colorizer là tiện ích mở rộng giúp làm nổi bật những dấu ngoặc tương ứng trong đoạn mã với nhau bằng cách sử dụng màu sắc. Nó giúp bạn có thể dễ dàng phát hiện những dấu ngoặc còn thiếu hay có cái nhìn trực quan khi có quá nhiều ngoặc lồng vào nhau trong đoạn code.
Browser Preview hiển thị trình duyệt ngay trên Visual Studio Code giúp bạn có thể xem kết quả cũng như debug cho chương trình một cách dễ dàng hơn.
Code Time giúp bạn có thể tính toán thời gian mình làm việc trên visual studio code. Ngoài ra nó cũng tổng hợp thời gian bạn dành cho mỗi dự án, mức độ làm việc với code thông qua biểu đồ của các ngày trong tuần, hiển thị giá trị thời gian trung bình bạn làm việc trong một tháng…
Code Spell Checker giúp bạn kiểm tra lỗi chính tả của đoạn mã trong chương trình. Tuy nhiên nó chỉ hỗ trợ các ngôn ngữ như tiếng Anh, Thụy Điển, Pháp, Đức… và chưa có tiếng Việt Nam nha.
CSS Peek tiện ích mở rộng giúp tìm các id hoặc class của các thẻ HTML trong những file CSS mà chứa những class hay thuộc tính đó. Ngoài ra nó cũng cho phép bạn đi đến các file CSS đó ngay lập tức.
Color Highlight là một tiện ích giúp bạn hiển thị màu cho các đối tượng được tìm thấy trong trang. Ví dụ nhiều mã màu mà VS Code không hiển thị được thì tiện ích này là một lựa chọn tuyệt vời cho bạn.
Debugger for Chrome giúp bạn có thể debug lỗi mã chương trình ngay trong VS Code mà không cần mở Google Chrome để sử dụng developer tool. Nó có nhiều tính năng hữu ích như là thiết lập breakpoints, hiển thị console…
ES7 React/Redux/GraphQL/React-Native snippets là tiện ích mở rộng cung cấp các snippet cho React, Redux và Graphql trong JS/TS với cú pháp ES7. Bạn có thể tham khảo bảng cú pháp trong trang chính của nó nhé!
ESLint là một công cụ phân tích đoạn mã trong chương trình để đưa ra các lỗi cũng như những đoạn mã cần phải cải thiện. Ngoài ra nó cũng cung cấp cho bạn những giải pháp để tối ưu hay sửa lỗi một cách nhanh hơn. Bạn cũng có thể tùy chỉnh trình phân tích cú pháp của ESLint để phù hợp với mục đích hay dự án của mình.
EditorConfig là một tiện ích mở rộng giúp duy trì sự thống nhất style code cho nhiều lập trình viên khi làm cùng một dự án. Và mỗi lập trình viên có thể làm việc trên nhiều trình soạn thảo mã khác nhau như VSCode, Atom, Notepad++… thì nó đều hỗ trợ các plugin trên mọi nền tảng giúp lập trình viên có thể đọc và chỉnh sửa style code một cách dễ dàng.
GitLens — Git supercharged là tiện ích cung cấp nhiều tính năng hữu ích giúp bạn làm việc với Git một cách tốt hơn như là hiển thị chú thích cho từng dòng code về lập trình viên commit, hiển thị thông tin chi tiết các lần sửa đổi đoạn mã trong File…
Import Cost giúp bạn có thể kiểm tra kích thước của các file import một cách dễ dàng thông qua thông tin được hiển thị trực tiếp bên đoạn mã khi ta thực hiện import.
JavaScript (ES6) code snippets giúp bạn có thể gọi cấu trúc của một hàm hay thuộc tính… một cách nhanh chóng thông qua những cú pháp được cung cấp sẵn. Ví dụ khi bạn gõ là clg thì nó sẽ tự động biên dịch thành console.log(object). Cái này bạn có thể tham khảo thêm bảng chú thích trong trang cài đặt của nó nhé. Ngoài ra nó cũng hỗ trợ nhiều ngôn ngữ trong file extension như là TypeScript, JavaScript React, TypeScript React, Html và Vue.
Live Server giúp khởi chạy local server một cách nhanh chóng với tính năng tự động tải lại trực tiếp cho các trang web tĩnh và động. Ví dụ khi bạn thay đổi một thông tin trên trang HTML thì nó sẽ tự động cập nhật mà không cần chúng ta phải nhấn reload trên trình duyệt. Nó cũng có nhiều lựa chọn cho việc thiết lập sử dụng như là tùy chỉnh số port, thiết lập trình duyệt mặc định, hỗ trợ SVG, https, proxy…
Live Share giúp những lập trình viên trong team có thể chia sẻ đoạn mã trong chương trình theo thời gian thực để dễ dàng trong việc chỉnh sửa cũng như debug cho chương trình như là chia sẻ debugging sessions, terminal instances, localhost web apps, voice calls…
Material Icon Theme là một tiện ích thiết lập icon Material Design cho Visual Studio Code.
Path Intellisense là tiện ích mở rộng giúp bạn tự động thực hiện tên cho file (autocompletes filenames) thông qua cách gợi ý các đường dẫn mỗi khi bạn gõ đường dẫn đến nơi lưu trữ file.
Prettier - Code formatter giúp bạn định dạng lại code một cách tự động và tạo ra một phong cách code chung cho team lập trình thông qua quy tắc riêng được quy định bởi extension. Nó cũng hỗ trợ cho đa dạng loại ngôn ngữ như là JavaScript, TypeScript, Flow, JSX, JSON, HTML, Vue, Angular…
Project Manager tiện ích mở rộng giúp bạn dễ dàng chuyển đổi giữa các dự án trong VS Code. Nó cung cấp một menu phụ giúp bạn có thể lưu trữ các dự cần làm việc và chuyển đổi qua lại một cách nhanh chóng.
Polacode là tiện ích giúp bạn chụp hình đoạn code của mình và lưu lại ngay trên máy tính một cách dễ dàng. Ngoài ra bạn cũng có thể chọn những bộ theme được thiết kế sẵn giúp đoạn mã được nổi bật và đẹp hơn trong quá trình chụp.
Quokka giúp bạn có thể test từng đoạn code nhỏ Javascript, TypeScript và hiển thị trực tiếp trên VS Code mà không cần sử dụng console.log() để hiển thị trong trình duyệt.
REST Client cho phép bạn gửi các yêu cầu HTTP và có thể xem kết quả trực tiếp trên Visual Studio Code.
Settings Sync giúp bạn có thể lưu lại các thiết lập cho Visual Studio Code trên máy tính của mình lên trên Github và sử dụng cho các máy khác một cách dễ dàng ví dụ như là các thông tin về extension, hay các cài đặt mà mình đã thiết lập… Lúc này bạn dễ dàng thiết lập cho nhiều máy khác nhau mà không cần phải nhớ lại các extension, các thiết lập mà mình đã cài đặt cho VS Code.
TODO Highlight giúp bạn làm nổi bật các comment quan trọng trong code để những người lập trình sau hay chính bản thân chúng ta có thể nắm được những điều cần lưu ý hay những việc cần phải làm trước khi sử dụng và lập trình code. Ngoài ra nó còn có một số theme được thiết kế đẹp mắt, hỗ trợ trên nhiều ngôn ngữ như javascript, html, css, php…
Vetur là tiện ích mở rộng cung cấp các công cụ hữu ích cho VueJS như là debug, kiểm tra lỗi, Syntax-highlighting, snippet…
vscode-icons là tiện ích chúng ta có thể thiết lập nhiều icon đẹp mắt cho Visual Studio Code.

Top các extension hay cho Visual Studio Code hay nhất

CSS Peek: Nhiều lập trình viên đánh giá CSS Peek là một trong các extension hay cho Visual Studio Code. CSS Peek giúp mọi người di chuyển nhanh chóng đến nơi định nghĩa các class và id của css. Bạn chỉ cần nhấp chuột phải vào một selector và chọn “Go to Definition”. Peek sẽ nhanh chóng chuyển bạn đến đúng file, vị trí mà class và id đó được định nghĩa. Plugin này khiến việc tìm kiếm class và id để nhanh chóng thực hiện chỉnh sửa những đoạn code. Ngoài ra, nó cũng nhảy ngay lập tức đến phần khai báo được nhắc đến trong file css/scss/less. Từ đó, rút ngắn thời gian hoàn thiện công việc đến mức tối đa.
Open-In-Browser: Thực chất, VSCode không cung cấp những phương pháp để mở file trực tiếp bằng browser. Plugin Open-In-Browser cung cấp thêm cho người dùng tùy chọn “Open With Default Browser”. Với nó, người dùng có thể mở được nhiều loại tài liệu như TXT, PDF, XML và các loại hình ảnh định dạng khác nhau.
HTML Boilerplate: HTML Boilerplate là extension tuyệt vời dành cho cho Visual Studio Code, là lựa chọn của nhiều coder khi nó cung cấp 1 template mẫu cho các file html. Người dùng chỉ cần gõ chữ “html” vào file trống, sau đó bấm nút Tab. Lúc này, HTML Boilerplate sẽ tự động tạo ra một file html cơ bản. Trong đó bao gồm structure, các tag cơ bản của một file html như head, meta, title, body,…
SVG Viewer: SVG Viewer là một trong các extension hay cho Visual Studio Code, được nhiều coder sử dụng trên toàn thế giới. Nó sở hữu khả năng hiển thị các file SVG ngay trong VSCode. Và coder có thể dễ dàng xem file SVG trực tiếp mà không cần sử dụng bất kỳ công cụ mở file nào khác.
Icon Fonts: Khá nhiều coder lựa chọn Icon Fonts là một trong 10 các extension hay cho Visual Studio Code. Nó giúp người dùng dễ dàng thêm các icon fonts vào trong dự án đang thực hiện. Ở thời điểm này, Icon Fonts đã có sẵn 20 bộ font icon. Trong đó có các bộ font nổi tiếng như Font Awesome, Ionicons, Glyphicons và Material Design Icons. Rõ ràng, tính ứng dụng của nó đối với coder rất cao. Đặc biệt, những bạn coder trẻ trung, ưa chuộng sự sặc sỡ sẽ không thể bỏ qua được plugin này.
Faker: Extension dành cho Visual Studio Code Faker giúp coder dễ dàng điền các placeholder data. Chỉ sau vài thao tác đơn giản, mọi người có thể tạo random tên, ảnh, số điện thoại,… Thậm chí, bạn còn có thể tạo văn bản “Lorem Ipsum” thần thánh – một tính năng luôn được các coder quan tâm để đẩy nhanh tốc độ, nâng cao hiệu quả công việc một cách triệt để.
Quokka: Quokka được đánh giá là một trong các extension dành cho Visual Studio Code tuyệt vời khi gần như lập tức phản hồi với code mà người dùng đang viết. Quokka giúp chúng ta dễ dàng xem trước kết quả của các hàm, giá trị được tính toán của các variable trong quá trình code. Chỉ cần gõ hàm, bạn sẽ nhìn thấy kết quả chính xác của nó dưới. Trong trường hợp hàm của không chính xác, bạn cũng sẽ nhận được một thông báo nhắc nhở của Quokka ngay lập tức. Đăc biệt, Quokka cũng rất dễ cấu hình, hoạt động tốt với tất cả các project về JSX và TypeScript đang được sử dụng hiện nay. Chỉ với vài thao tác cài đặt cơ bản, coder có thể tận dụng sức mạnh của Quokka để mang lại nhiều lợi ích cho công việc. Nó thực sự là lựa chọn dành cho mọi coder ở thời điểm này.
Prettier: Trong danh sách các Extension hay cho Visual Studio Code, Prettier là cái tên không thể bỏ qua. Nó là một plugin giúp người dùng tạo ra format, tiến hành sắp xếp code trong các dòng code một cách hiệu quả. Plugin này đặc biệt hữu ích khi sử dụng cho các nhóm làm việc. Nhất là với những nhóm có phong cách làm việc đa dạng, mang dấu ấn cá nhân của từng thành viên. Lúc này, Prettier sẽ giúp mọi người “đồng bộ hóa” công việc một cách hiệu quả. Nó sẽ tự động áp dụng định dạng toàn bộ các file JS và CSS cho kết quả làm việc của cả nhóm.
TODO Highlight: TODO Highlight là plugin dành cho Visual Studio Code có thể dễ dàng highlight mọi comment TODO có trong code. Nó giúp người dùng dễ dàng thực hiện quy trình tìm kiếm các code còn chưa hoàn thiện (Xác định trong trường hợp những đoạn code chưa hoàn thiện và người dùng đang cần tìm kiếm để thêm comment Todo).
Color Info: Trong danh sách các extension hay cho Visual Studio Code, Color Info là một extension nhỏ, cung cấp nhiều thông tin về màu sắc mà lập trình viên đã sử dụng trong CSS. Khi di chuyển con trỏ chuột của bạn vào một file CSS, bạn có thể xem được màu sắc thực của nó. Cùng với đó là thông tin mã màu trong các định dạng khác nhau như HEX, HSK, CMYK, RGB.

Vscode extionsion khi lập trình nodejs

Gitlens: Kiểm tra thay đổi code. Điều này sẽ cho bạn biết khi nào một dòng đã được thay đổi và bởi ai. Nó cũng sẽ cho biết số người đã làm việc trên một file, file được chỉnh sửa lần cuối khi nào và hơn nữa.
Visual Studio IntelliCode: Cung cấp các suggest code do AI và hỗ trợ Python, TypeScript / JavaScript và Java.
VSCode Icons: Cho phép thêm icon vào các menu.
Path Intellisense: Giúp suggest cho việc auto import các file or thư viện cần dùng.
Prettier: Format code.
Bracket Pair Colorizer: Giúp các dấu ngoặc được matching với nhau bằng màu sắc.
JavaScript (ES6) code snippets: Code snippets cho JavaScript ES6.
Quokka.js: Tính toán giá trị của biến ngay sau khi code xong.
Code Spell Checker: Kiểm tra lỗi chính tả.
ENV: Highlight syntax, format cho file env.
Error Lens: Highlight các error,warning,…
Eslint: Intergrate eslint cho vscode. Còn eslint là gì thì xem ở đây here.
Settings Sync: Đồng bộ toàn bộ config,extension,… của vscode khi đăng nhập tài khoản github.
TODO Highlight: Highlight mấy cái todo.
Todo Tree: Hiển thị todo theo mô hình tree.

Top Visual Studio Extensions for Developers

Những công cụ tôi ước giá như mình biết sớm hơn

Vì sao cần cài đặt Extension cho Visual Studio Code?

Top các extension hay cho Visual Studio

Top các extension hay cho Visual Studio Code hay nhất

Vscode extionsion khi lập trình nodejs

Reference