Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
30 Visual Studio Code Extension Tốt Nhất Cho Phát Triển Web(2020)

30 Visual Studio Code Extension Tốt Nhất Cho Phát Triển Web(2020)


Ngày 27 Tháng 6 Năm 2020

30 Visual Studio Code Extension Tốt Nhất Cho Phát Triển Web(2020)

Trong bài viết hôm này chúng ta sẽ đi vào tìm hiểu những extension mở rộng trong Visual Studio Code giúp bạn cải thiện hiệu suất cũng như thời gian làm việc. Nào chúng ta hãy cùng nhau đi vào tìm hiểu 30 Visual Studio Code Extension được sử dụng phổ biến trong lập trình và thiết kế web năm 2020 nhé!

Trước khi đi vào vấn đề chính thì mình sẽ giải thích sơ qua về Visual Studio Code tí nhé!

Visual Studio Code là một mã nguồn mở và được phát triển bởi Microsoft nên các bạn cứ yên tâm sử dụng vì nó hoàn toàn miễn phí và luôn được cập nhật những phiên bản mới nhất. Không chỉ vậy nó còn rất thích hợp cho việc phát triển các dự án lớn, phức tạp ngoài ra còn hỗ trợ việc tích hợp Git. Công cụ này còn cung cấp các phần mở rộng(extension) giúp chúng ta có thể code một cách nhanh hơn, quản lý file hiệu quả...

Nếu bạn muốn tim hiểu thêm hay tải về thì có thể xem ở đây nhé.

Debugger for Chrome

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...

Debugger for Chrome

JavaScript (ES6) code snippets

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.

JavaScript (ES6) code snippets

Live Server

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 Server

Auto Close Tag

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 Close Tag

Prettier - Code formatter

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...

Prettier - Code formatter

TODO Highlight

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...

TODO Highlight

Auto Rename Tag

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é.

Auto Rename Tag

Better Comments

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.

Better Comments

ESLint

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.

ESLint

Beautify

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.

Beautify

Bracket Pair Colorizer

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.

Bracket Pair Colorizer

Path Intellisense

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.

Path Intellisense

Import Cost

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.

Import Cost

Code Time

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 Time

CSS Peek

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.

CSS Peek

Project Manager

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.

Project Manager

Browser Preview

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.

Browser Preview

GitLens — Git supercharged

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...

GitLens — Git supercharged

Polacode

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.

Polacode

vscode-icons

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.

vscode-icons

Settings Sync

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.

Settings Sync

Quokka

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.

Quokka

EditorConfig

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.

EditorConfig

Material Icon Theme

Material Icon Theme là một tiện ích thiết lập icon Material Design cho Visual Studio Code.

Material Icon Theme

Color Highlight

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.

Color Highlight

REST Client

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.

REST Client

Live Share

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...

Live Share

Code Spell Checker

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.

Code Spell Checker

Vetur

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...

Vetur

ES7 React/Redux/GraphQL/React-Native snippets

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 ccu1 pháp ES7. Bạn có thể tham khảo bảng cú pháp trong trang chính của nó nhé!

	ES7 React/Redux/GraphQL/React-Native snippets

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những extension Visual Studio Code hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!