10 tiện ích mở rộng VSCode nâng tầm hiệu quả làm việc của bạn

Với tư cách là một lập trình viên, năng suất làm việc là yếu tố quyết định sự thành công của chúng ta. Tôi tình cờ bắt gặp một số tiện ích mở rộng VSCode tuyệt vời mà tôi đã không sử dụng hết tiềm năng của chúng khi đang tìm kiếm các công cụ để giúp tăng năng suất của chính mình. Sau khi tôi thiết lập chúng với các tiện ích mở rộng khác của mình, tôi đã vô cùng ngạc nhiên với việc chúng đã thay đổi cách tôi viết mã và quản lý dự án trong VSCode như thế nào.

Tôi sẽ chia sẻ những tiện ích mở rộng đó cũng như một số tiện ích khác đã được đề xuất và tìm thấy thông qua nghiên cứu để giúp bạn làm việc hiệu quả hơn với tư cách là nhà phát triển trong trình soạn thảo mã ưa thích của bạn: VSCode!

Trong bài viết này, tôi sẽ giới thiệu cho bạn 10 tiện ích mở rộng VSCode tốt nhất, hoàn hảo cho cả người mới bắt đầu và cả những nhà phát triển có kinh nghiệm, giúp bạn tiết kiệm thời gian và nhìn chung làm cho việc lập trình trong đó trở nên dễ dàng và thú vị hơn rất nhiều.

1. Prettier – Code Formatter

Prettier là một công cụ tuyệt vời khi nói đến việc duy trì phong cách mã trong suốt dự án của bạn. Nó sẽ tự động định dạng mã của bạn với các phương pháp hay nhất và ý nghĩa phổ biến.

Nó giúp ích như thế nào:

• Tiết kiệm thời gian của bạn: định dạng mã khi lưu.
• Giảm các nhận xét đánh giá mã liên quan đến định dạng.

Ví dụ: Hãy tưởng tượng bạn làm việc trong một nhóm lớn và mọi người đều có phong cách lập trình khác nhau. Prettier đảm bảo rằng dù ai viết mã, nó vẫn trông nhất quán.

npm install --save-dev đẹp hơn

2. GitLens

GitLens giúp Git trong VSCode trở nên dễ dàng. Nó nâng cao khả năng của Git với trình soạn thảo của bạn, hiển thị cho bạn ai là người cuối cùng đã sửa đổi một phương thức/dòng mã với một số chú thích.

Nó giúp ích như thế nào:

• Kiểm soát phiên bản giúp bạn dễ dàng theo dõi các thay đổi mã và lý do tại sao chúng được thực hiện.
• Xem lịch sử của một tệp hoặc một khối mã cụ thể.

Ví dụ: Giả sử bạn gặp phải một số logic trong cơ sở mã gây khó hiểu cho bạn. Với GitLens, bạn có thể xem ai đã viết nó, thông báo cam kết của họ và chính xác những thay đổi họ đã thực hiện.

3. CodeSnap

Bạn là người rất yêu thích chia sẻ các đoạn mã? Thế nên bạn cần phải có CodeSnap. Nó cho phép bạn chụp ảnh màn hình đẹp về mã của mình chỉ với 1 cú nhấp chuột, bao gồm cả tô sáng cú pháp.

Nó giúp ích như thế nào:

• Đoạn mã trực quan hấp dẫn cho blog hoặc hình nền năng suất của bạn.
• Tiết kiệm thời gian bằng cách tự động hóa quy trình tạo kiểu và định dạng đoạn mã.

Ví dụ: Bạn đang viết một bài đăng trên blog hoặc chuẩn bị một bài thuyết trình. Thay vì tạo kiểu đoạn mã theo cách thủ công, CodeSnap mang đến cho bạn kết quả trông chuyên nghiệp chỉ trong vài giây.

4. Live Server

Live Server khởi chạy Máy chủ cục bộ phát triển với tính năng tải lại trực tiếp cho các trang tĩnh và động. Tự động tải lại trình duyệt khi tệp của bạn thay đổi. Trong trường hợp tệp HTML, nó cũng tự động thêm CSS và JavaScript Include đã cập nhật (Bạn không cần thêm Plugin Trình duyệt).

Nó giúp ích như thế nào:

• Phản hồi tức thì cho các dự án frontend.
• Tăng tốc phát triển bằng cách tự động làm mới trình duyệt.

Ví dụ: Xây dựng một trang đích và bạn sẽ thấy các thay đổi khi bạn lưu tệp của mình, không cần làm mới trình duyệt theo cách thủ công.

5. ESLint

Bắt lỗi và thực thi các tiêu chuẩn mã hóa với ESLint. Nó thậm chí tích hợp trực tiếp với VSCode, làm nổi bật các lỗi ngay lập tức.

Nó giúp ích như thế nào:

• Nó xác định và sửa các lỗi mã hóa phổ biến.
• Giúp áp dụng các phương pháp hay nhất và cải thiện chất lượng mã.

Ví dụ: Bạn đang làm việc trên một dự án Javascript và bạn đã vô tình để lại một câu lệnh console.log, ESLint sẽ bắt được điều đó ngay khi bạn viết, do đó giúp giữ cho mã sản xuất của bạn sạch hơn.

6. REST Client

Tiện ích mở rộng REST Client cho phép bạn kiểm tra API trực tiếp từ VSCode mà không cần bất kỳ công cụ bên ngoài nào như Postman.

Nó giúp ích như thế nào:

• Kiểm tra API trực tiếp từ trình soạn thảo của bạn.
• Lưu các yêu cầu mà bạn thường xuyên sử dụng và bạn có thể truy cập chúng một cách nhanh chóng.

Ví dụ: Nếu bạn đang xây dựng API RESTful và muốn kiểm tra các điểm cuối của mình một cách nhanh chóng mà không cần chuyển sang postman.

7. Better Comments

Tiện ích mở rộng Better Comments thực sự thú vị vì nó giúp tăng khả năng đọc hiểu các nhận xét của bạn có trong mã, bạn có thể phân loại và mã màu nhận xét của mình dựa trên loại nhận xét để chúng hiển thị rõ ràng và dễ đọc hơn.

Nó giúp ích như thế nào:

• Cộng tác tốt hơn: Bằng cách phân biệt giữa các ghi chú, cảnh báo và nhiệm vụ, các thành viên trong nhóm có thể nhanh chóng quét để tìm thông tin họ cần.
• Khả năng đọc tốt hơn - Các nhận xét được mã màu dễ nhìn hơn và cho phép bạn nhanh chóng hiểu ý định đằng sau một nhận xét là gì.
• Tính nhất quán - Nhiều công ty sử dụng TODO và FIXME trong nhận xét của họ để giúp các nhà phát triển khác dễ dàng xem xét hoặc duy trì mã hơn.

Ví dụ: Hãy nghĩ đến một trường hợp bạn đang làm việc trên một số dự án lớn với nhiều người và vì vậy sẽ đến một phần cụ thể nào đó của mã chưa được triển khai hoàn chỉnh, vì vậy bạn đặt nhận xét TODO cho chính mình hoặc nhóm của bạn, giờ đây bằng cách sử dụng Better Comments, bạn có thể làm cho điều đó trở nên rõ ràng bằng một số màu tương phản, điều này sẽ giúp đảm bảo rằng nó không bị bỏ sót.

Tiện ích mở rộng sẽ sử dụng một màu khác nhau cho mỗi nhận xét này và bạn có thể dễ dàng thấy rằng đó là nhận xét TODO hoặc một số loại ghi chú khác cho bản thân mà bạn đã thực hiện ở giữa quá trình phát triển.

8. Path Intellisense

Tiện ích mở rộng này tự động hoàn thành đường dẫn tệp khi bạn nhập, điều này có thể rất tiện dụng khi làm việc với các lần nhập trong các dự án lớn hơn.

Nó giúp ích như thế nào:

• Tăng tốc độ viết import bằng cách gợi ý đường dẫn tệp.
• Giảm lỗi xảy ra do đường dẫn tệp sai.

Ví dụ: Khi bạn đang nhập một thành phần trong một dự án react, trong khi nhập Path Intellisense sẽ gợi ý đường dẫn tệp chính xác, vì vậy bạn không phải tự nhập thủ công.

9. Tabnine

Tabnine là công cụ hoàn thành mã AI tốt nhất. Tất cả những gì bạn phải làm là nhập tên của một lớp hoặc phương thức và Tabnine sẽ cung cấp phần còn lại của mã cho bạn.

Nó giúp ích như thế nào:

• Tăng năng suất với tính năng hoàn thành mã thông minh.
• Bạn có thể tránh lặp lại mọi thứ và thực sự suy nghĩ nhiều hơn về logic trong khi viết.

Ví dụ: Trong khi viết một thuật toán không quá đơn giản, tabnine sẽ đề xuất các đoạn mã có liên quan dựa trên ngữ cảnh của bạn, giúp bạn viết nhanh hơn.

10. VSCode-icons

Không hoàn toàn mang đến năng suất tốt hơn nhưng tiện ích mở rộng này giúp dễ dàng phân biệt giữa các loại tệp hơn nhiều bằng cách thêm các biểu tượng tệp trong trình chỉnh sửa của bạn cho tệp cụ thể.

Nó giúp ích như thế nào:

• Cải thiện điều hướng tệp bằng các dấu hiệu trực quan.
• Cải thiện quy trình làm việc, đặc biệt là trong các dự án lớn.

Ví dụ: Trong một dự án có nhiều loại tệp, bạn có thể nhanh chóng xác định các tệp JavaScript, CSS hoặc tệp cấu hình bằng các biểu tượng của chúng, giảm tải nhận thức.

Kết luận

Tất nhiên, còn rất nhiều điều khác bạn có thể làm với sức mạnh của hệ sinh thái VSCode. Từ hỗ trợ gỡ lỗi, định dạng mã, làm việc với kho lưu trữ Git và hơn thế nữa! Tuy nhiên, các tiện ích mở rộng mà tôi đã tóm tắt ở đây đã giúp công việc khá hiệu quả và làm cho việc viết mã trở nên thú vị. Nếu bạn đang sử dụng VSCode, hãy thử những tiện ích này và cho tôi biết kết quả như thế nào.

Và nếu có tiện ích mở rộng nào bạn yêu thích mà tôi chưa đề cập đến, vui lòng chia sẻ nhé!