Tổng hợp những extension hay của Vscode

VSCode là gì?

Visual Studio Code, hay còn được gọi là VSCode, là một trình soạn thảo mã nguồn mở do Microsoft phát triển. Được thiết kế để xây dựng các trang web và ứng dụng, VSCode là một công cụ miễn phí với sự hỗ trợ rộng rãi cho nhiều ngôn ngữ lập trình khác nhau, kèm theo một loạt các tiện ích mở rộng để giúp lập trình viên.

Điều làm cho VSCode trở nên phổ biến đến vậy là nhờ vào kho extension đa dạng và không ngừng được cập nhật. Đây là một nguồn tài nguyên phong phú cho lập trình viên, giúp họ tối ưu hóa trải nghiệm làm việc và mở rộng khả năng làm việc với nhiều loại dự án.

(Xem thêm: Code Editor Mobile – Soạn thảo mã code trên mobile)

Vì sao nên cài extension cho VSCode?

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

• Hổ trợ các công việc liên quan đến kiến thức như quản lí database, gở lỗi.
• Cập nhật thêm ngôn ngữ lập trình mới vào VScode.
• Giúp người dùng tạo ra các tính năng ảo giúp trải nghiệm tốt hơn.
• Giúp thao tác người dùng nhanh hơn bằng việc tạo ra các lỗi tắt từ đó giúp công việc của lập trình viên nhanh chóng hơn.
• Giúp code đẹp hơn, gọn gàng hơn, dể nhìn dể đọc và dể hiểu.

Không để các bạn đợi lâu nửa, hãy cùng Lùn Dev xem thử top 10 extension hay nhất của VScode nhé.

Các extension hay cho VSCode hay nhất

1. CSS Peek

Bằng cách sử dụng CSS Peek trong VSCode, nhiều lập trình viên đều đánh giá cao vì đây là một extension hữu ích. Được xem như một plugin xuất sắc, CSS Peek đồng hành cùng VSCode, giúp lập trình viên dễ dàng di chuyển đến định nghĩa của các class và id trong mã CSS.

Với CSS Peek, việc định rõ vị trí của các selector trở nên nhanh chóng và thuận tiện. Lập trình viên chỉ cần nhấp chuột phải vào một selector và chọn “Go to Definition”. CSS Peek sẽ ngay lập tức đưa bạn đến file và vị trí chính xác mà class hoặc id được định nghĩa.

Extension 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. Từ đó, rút ngắn thời gian hoàn thiện công việc đến mức tối đa bởi vì chúng ta không cần tìm kiếm, chỉ cần một click là song.

2. Live SERVER

Live Server là một tiện ích dành cho VSCode giúp lập trình viên đỡ khổ khi cần phải phát triển một trang web. Extension này được phát triển trên một bộ core cùng tên, tích hợp thêm nhiều tính năng, nhưng chung quy lại vẫn xoay quanh 2 tính năng cơ bản sau:

• Cho phép gửi Http request lên các service, việc mà các bạn không thể thực hiện với giao thức file:// vì lý do an ninh, bảo mật.
• Tự động reload lại trang khi có sửa đổi trong các file được theo dõi (watch), giúp tốc độ code tăng đáng kể.

3. Prettier – Code formatter

Prettier – Code formatter là một công cụ hữu ích giúp lập trình viên tự động định dạng mã nguồn và thiết lập một quy tắc chung về phong cách lập trình cho toàn độ nhóm thông qua các quy tắc đã được định nghĩa bởi tiện ích mở rộng. Điều này đảm bảo sự đồng nhất trong cách mã nguồn được biểu diễn, bất kể loại ngôn ngữ sử dụng, từ HTML, CSS, Javascript đến PHP…

4. ESLint

ESLint là một công cụ phân tích mã nguồn trong hệ thống, tập trung vào việc phát hiện và báo cáo các lỗi trong mã nguồn cũng như đề xuất các cách cải thiện. Nó cung cấp cho nhà phát triển không chỉ những thông báo về lỗi mà còn những gợi ý và quy tắc để làm cho mã nguồn trở nên ngắn gọn và dễ đọc hơn.

Điều đặc biệt là lập trình viên có khả năng điều chỉnh cấu hình của ESLint để tương thích với phong cách và mục đích lập trình của riêng họ. Điều này đồng nghĩa với việc họ có quyền kiểm soát những gì được coi là lỗi và những đề xuất nào nên được thực hiện để đảm bảo mã nguồn chất lượng và tuân thủ theo các quy tắc đặt ra.

5. 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 code với nhau bằng cách sử dụng màu sắc. Nó giúp lập trình viê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.

6. Clipboard Manager

Clipboard Manager giúp lập trình viên dể dàng ghi nhớ những đoạn code đã copy trước đó để dể dàng tái sử dụng lại nhờ đó lập trình viên sẽ không mất quá nhiều thời gian khi phải tìm và copy từng đoạn code và dán vào liên tục.

Thay vào đó lập trình viên có thể copy một lần tất cả sau đó tiến hành paste lần lược ra.

7. Dracula Official

Dracula Official chính là một extension mở rộng với mục đích làm đẹp cho code rất phổ biến với tông màu neon, phông chử đẹp và hổ trợ rất nhiều ngôn ngử khác nhau từ HTML, CSS, Javascript, PHP,… giúp lập trình viên nhìn code đẹp hơn và dể nhìn hơn.

8. Gitlens 

GitLens là một extension hữu ích cho VSCode, giúp đơn giản hóa quá trình làm việc với Git bằng cách cung cấp toàn bộ thông tin về dự án của bạn trên Git. Từ các thay đổi nhỏ nhất đến những cập nhật mới nhất, GitLens hiển thị chi tiết về lịch sử của bạn, cho phép bạn theo dõi sự thay đổi ở mức dòng code.

9. Polacode

Polacode là một extension thú vị của VSCode được xin ra với mục đích giúp lập trình viên chụp lại đoạn code của mình một cách đẹp hơn, dể nhìn hơn, giữ đúng form, đúng khung hình và màu sắc của code khi chụp.

10. Auto Rename Tag

Auto Rename Tag là một tiện ích mở rộng phổ biến trong VSCode, đặc biệt hữu ích cho các nhà phát triển làm việc với mã HTML. Tiện ích này giúp lập trình viên tự động đổi tên phần kết thúc của một thẻ khi họ chỉ đang cố gắng chỉnh sửa phần mở của nó.

Ví dụ, nếu bạn muốn thay đổi một thẻ từ <a> sang <div>, bạn sẽ phải chỉnh sửa <div> ở vị trí mở và </div> ở vị trí đóng. Tuy nhiên, với Auto Rename Tag, khi nó phát hiện bạn đang muốn thay đổi giá trị của thẻ, nó sẽ tự động điền phần còn lại cho bạn ở thẻ đóng.

Kết luận

Dưới đây là một số tiện ích mở rộng (extension) hữu ích trong Vscode mà Lùn Dev thường xuyên sử dụng và muốn chia sẻ với mọi người. Vẫn còn nhiều extension hay khác, hãy đón chờ trong bài viết tiếp theo nhé.