Image default
Máy Tính

10 Tiện Ích Mở Rộng VS Code “Must-Have” Giúp Lập Trình Viên Việt Tăng Tốc Độ Viết Code Gấp Bội

Mặc dù thế giới lập trình ngày càng sôi động với vô vàn trình soạn thảo mã hiện đại, nhưng Visual Studio Code (VS Code) vẫn là lựa chọn hàng đầu của đông đảo nhà phát triển (trong đó có cả tôi) để xây dựng ứng dụng, tạo script hay chỉnh sửa các tệp cấu hình. Lý do rất đơn giản: VS Code không chỉ nhẹ, tương thích với ba hệ điều hành lớn (Windows, macOS, Linux), hỗ trợ nhiều ngôn ngữ lập trình mà còn sở hữu hàng loạt tính năng nâng cao trải nghiệm người dùng. Tuy nhiên, chính khả năng tùy biến vô tận mới là yếu tố thực sự đưa VS Code vượt lên trên các đối thủ, với vô số tiện ích mở rộng (extensions) có thể bổ sung để tăng cường mạnh mẽ chức năng của trình soạn thảo mã này.

Kể từ khi chuyển sang sử dụng VS Code, tôi đã trải nghiệm rất nhiều plugin khác nhau. Mặc dù hầu hết các plugin trên marketplace của Visual Studio Code đều có những ưu điểm riêng, một số trong đó thực sự nổi bật và hữu ích đến mức tôi coi bộ công cụ lập trình của mình sẽ không thể hoàn thiện nếu thiếu chúng. Những extension này không chỉ tối ưu hóa quy trình làm việc mà còn giúp tiết kiệm thời gian đáng kể, biến VS Code thành một môi trường phát triển mạnh mẽ và linh hoạt hơn bao giờ hết.

Logo Visual Studio Code với hiệu ứng công nghệ hiện đạiLogo Visual Studio Code với hiệu ứng công nghệ hiện đại

10. File Utils

Thao tác với tệp tin dễ dàng hơn bao giờ hết

Mặc dù Visual Studio Code cung cấp một giao diện thư mục gọn gàng giúp bạn truy cập các script, nhưng ứng dụng lại không có các tùy chọn chuyên dụng để sao chép (duplicate) hoặc di chuyển (move) tệp tin. Điều này khá bất tiện, đặc biệt là khi tôi còn mới làm quen với Docker Compose, tôi đã học được rằng mình nên luôn sao chép các tệp đã mã hóa cẩn thận và sao lưu chúng vào các thư mục riêng biệt để đề phòng rủi ro.

May mắn thay, tiện ích mở rộng File Utils đã bổ sung các tùy chọn này vào VS Code. Không chỉ vậy, File Utils còn cho phép bạn thiết lập các phím tắt cho các thao tác tệp khác nhau để nâng cao hơn nữa quy trình làm việc của bạn. Điều này giúp giảm thiểu việc chuyển đổi giữa VS Code và trình quản lý tệp của hệ điều hành, tập trung hơn vào công việc lập trình.

Giao diện tiện ích File Utils hỗ trợ quản lý tệp tin trong VS CodeGiao diện tiện ích File Utils hỗ trợ quản lý tệp tin trong VS Code

9. Bookmarks

Lưu giữ những dòng code quan trọng (và phiền phức) nhất của bạn

Khi tôi vận dụng kỹ năng viết mã của mình, thường có một khối mã nào đó không chịu hoạt động ăn ý với phần còn lại của chương trình. Trước khi thử Bookmarks, tôi thường chú thích toàn bộ phần đó trước khi chuyển sang khối mã tiếp theo, hy vọng rằng bản thân tôi trong tương lai sẽ sửa chữa mọi thứ khi đã hoàn thành phần còn lại của script.

Tiện ích Bookmarks giúp quá trình này trở nên dễ dàng hơn nhiều, vì tôi có thể đánh dấu các dòng mã gây rắc rối trước khi chuyển sang phần còn lại của chương trình. Và khi tôi có nhiều khối mã lỗi, tôi có thể chuyển đổi giữa chúng chỉ bằng một phím tắt duy nhất. Điều này cực kỳ hữu ích cho việc quản lý các điểm cần sửa chữa hoặc những đoạn code cần xem lại sau.

Sử dụng tính năng đánh dấu Bookmarks để quản lý dòng code quan trọngSử dụng tính năng đánh dấu Bookmarks để quản lý dòng code quan trọng

8. Prettier và Indent Rainbow

Để mã nguồn của bạn dễ đọc hơn

Giống như dấu vân tay, mỗi lập trình viên có một cách định dạng mã nguồn độc đáo. Thật không may, “mớ mì spaghetti” code của tôi thường nằm ở phía khó hiểu của phổ định dạng – đến mức tôi gặp khó khăn khi tìm ra sự phức tạp của các script do chính mình tạo ra. May mắn thay, tôi có Prettier để định dạng lại các khối mã bị format kém.

Là một công cụ định dạng, Prettier sử dụng một vài quy tắc được xác định trước để phân tích lại các khối mã một cách có tổ chức và hỗ trợ bộ plugin riêng để nâng cao hơn nữa định dạng mã của bạn. Nếu bạn thường xuyên làm việc với YAML và các ngôn ngữ khác yêu cầu cấu trúc mã được tổ chức, bạn cũng sẽ muốn trang bị cho VS Code của mình Indent Rainbow, tiện ích này sẽ đặt các màu sắc riêng biệt cho các cấp độ phân cấp thụt lề khác nhau, giúp dễ dàng nhận biết cấu trúc lồng nhau của mã.

Hình ảnh minh họa Prettier tự động định dạng mã nguồn trong VS CodeHình ảnh minh họa Prettier tự động định dạng mã nguồn trong VS Code

7. GitHub Copilot

Hoặc Cline, nếu bạn muốn tận dụng các mô hình LLM tự host

Mặc dù có những bước phát triển vượt bậc trong hệ sinh thái AI, sẽ mất một thời gian dài để các mô hình ngôn ngữ lớn (LLM) thay thế mã do con người tạo ra. Tuy nhiên, các trợ lý lập trình AI có thể là một công cụ hỗ trợ vững chắc cho lập trình viên nhờ khả năng tự động hoàn thành, gỡ lỗi và tạo mã mẫu.

GitHub Copilot là một trong những nhân tố chủ chốt trong không gian lập trình, và bạn có thể tích hợp trợ lý AI này vào VS Code thông qua tiện ích mở rộng chính thức. Ngoài ra, nếu bạn thích các mô hình được lưu trữ cục bộ cho các tác vụ lập trình của mình, Cline sẽ là một bổ sung đáng giá cho bộ tiện ích mở rộng VS Code của bạn, mang lại sự riêng tư và kiểm soát tốt hơn.

GitHub Copilot hỗ trợ gợi ý mã nguồn thông minh cho lập trình viên VS CodeGitHub Copilot hỗ trợ gợi ý mã nguồn thông minh cho lập trình viên VS Code

6. Remote Development

SSH, tunnels và WSL trong tầm tay bạn

Ngoài việc cung cấp năng lượng cho các thí nghiệm phòng lab tại nhà của tôi, các máy ảo (virtual machines) và container cũng rất hữu ích cho các tác vụ lập trình của tôi. Ví dụ, tôi có một máy chủ máy ảo trung tâm nơi tôi thực thi các mã thử nghiệm và cài đặt tất cả các loại gói kỳ lạ để thỏa mãn niềm đam mê vọc vạch của mình – điều mà tôi không muốn sao chép trên máy chính của mình.

Bộ tiện ích mở rộng Remote Development là một món quà trời ban cho các dự án lập trình nặng về máy ảo của tôi. Remote SSH và Remote Tunnels rất tuyệt vời để kết nối ứng dụng VS Code cục bộ của tôi với các phiên bản Server của nó. Tiện ích Dev Containers ít nhiều cũng thực hiện vai trò tương tự, ngoại trừ việc nó được thiết kế cho các môi trường container hóa thay vì máy ảo. Sau đó là tiện ích WSL, rất hữu ích khi tôi muốn truy cập ứng dụng Visual Studio Code bên trong môi trường Windows Subsystem for Linux từ giao diện người dùng VS Code chính trên máy Windows 11 của mình.

5. Git Graph

Dành cho các bậc thầy Git

Là công cụ kiểm soát phiên bản tiêu chuẩn, Git (và rộng hơn là GitHub) vẫn là một phần thiết yếu trong bộ công cụ của mọi lập trình viên. Mặc dù bạn có thể cài đặt Git trên hệ thống và sử dụng nó với VS Code, tiện ích Git Graph giúp việc làm việc với hệ thống kiểm soát phiên bản này dễ dàng hơn nhiều.

Trước hết, Git Graph cho phép bạn xem các nhánh (branches), tìm chi tiết và so sánh các commit đã thực hiện vào kho lưu trữ của bạn ngay trong VS Code. Tương tự, bạn có thể sử dụng plugin để thực hiện xem xét mã (code reviews) cũng như chỉnh sửa các commit. Chưa kể, tiện ích tuyệt vời này còn cho phép bạn thực hiện các hành động Git thông thường, bao gồm push, merge, revert và fetch các nhánh của dự án từ giao diện người dùng tiện lợi của Visual Studio Code.

Biểu đồ lịch sử Git trực quan với tiện ích Git Graph trong Visual Studio CodeBiểu đồ lịch sử Git trực quan với tiện ích Git Graph trong Visual Studio Code

4. Language extensions

Python, Ruby và rất nhiều ngôn ngữ khác

Mặc định, VS Code hỗ trợ một vài ngôn ngữ lập trình, bao gồm CSS, JavaScript và HTML, và cho phép bạn làm việc với các định dạng .yaml, .tf và .json. Tuy nhiên, bạn có thể nhập các tiện ích mở rộng dành riêng cho ngôn ngữ để biến VS Code thành một trình soạn thảo mã toàn diện.

Ngoài các tiện ích mở rộng cho các ngôn ngữ chính thống như C++/C, Python và C#, VS Code Marketplace còn có các plugin cho các ngôn ngữ chuyên biệt hơn, như Dart, Kotlin và Julia. Thậm chí còn có một tiện ích mở rộng chuyên dụng cho phép bạn phát triển các module PowerShell ngay trong Visual Studio Code. Điều này khẳng định sự linh hoạt và khả năng mở rộng của VS Code, phù hợp với mọi nhu cầu lập trình.

Cài đặt tiện ích mở rộng ngôn ngữ Python trong VS CodeCài đặt tiện ích mở rộng ngôn ngữ Python trong VS Code

3. Dendron

Tạm biệt Obsidian!

Các ứng dụng ghi chú và hệ thống quản lý kiến thức cá nhân (PKM) rất tuyệt vời khi bạn cần tổ chức suy nghĩ và ý tưởng của mình. Nhưng điều gì sẽ xảy ra nếu bạn chỉ muốn thêm một vài ghi chú trong khi làm việc trên các tệp mã của mình? Chà, vì Visual Studio Code hỗ trợ cú pháp markdown, về mặt kỹ thuật bạn có thể sử dụng trình soạn thảo mã mạnh mẽ này để lưu trữ ghi chú của mình.

Tuy nhiên, bạn sẽ thấy khả năng ghi chú của VS Code khá hạn chế nếu bạn đến từ Obsidian, Joplin, TriliumNext Notes hoặc các hệ thống PKM khác. Đó là lúc Dendron phát huy tác dụng bằng cách cho phép bạn thêm các sơ đồ mermaid, công thức toán học KaTeX, ghi chú nhúng và một loạt các tính năng PKM khác vào thiết lập VS Code của bạn, biến trình soạn thảo này thành một công cụ quản lý kiến thức mạnh mẽ.

Giao diện tiện ích Dendron hỗ trợ ghi chú và quản lý kiến thức trong VS CodeGiao diện tiện ích Dendron hỗ trợ ghi chú và quản lý kiến thức trong VS Code

2. Container Tools

Những người đam mê container, hãy vui mừng!

Có khả năng chạy ứng dụng trong các môi trường cô lập mà không tiêu tốn quá nhiều tài nguyên, các runtime container cực kỳ hữu ích cho các nhà phát triển. Tuy nhiên, việc liên tục chuyển đổi giữa VS Code và giao diện terminal có thể trở nên cồng kềnh.

Giải pháp là bạn có thể cài đặt tiện ích Container Tools trên VS Code và thực thi các lệnh liên quan đến container mà không cần mở terminal. Dù là triển khai các tệp docker-compose.yml, kiểm tra nhật ký container hay kéo hình ảnh từ một registry, Container Tools hỗ trợ một kho tàng các lệnh Docker. Nó tương thích với Azure API và cũng cho phép bạn gỡ lỗi các container bị lỗi bằng cách tận dụng framework .NET và môi trường runtime Node.js.

Quản lý Docker container trực tiếp từ VS Code với Container ToolsQuản lý Docker container trực tiếp từ VS Code với Container Tools

1. Live Server

Công cụ không thể thiếu cho các nhà phát triển web

Nếu bạn đã từng đặt chân vào lĩnh vực phát triển web, có lẽ bạn đã quen thuộc với cơn ác mộng gỡ lỗi các khối mã CSS, nơi một lỗi nhỏ cũng có thể phá hỏng hàng giờ làm việc vất vả.

Đúng như tên gọi của nó, Live Server cho phép bạn theo dõi mọi thay đổi đối với tệp HTML của mình theo thời gian thực. Bất cứ khi nào bạn lưu tệp mã của mình, Live Server sẽ tự động cập nhật trang web, giúp dễ dàng theo dõi các khối mã chứa lỗi, đặc biệt nếu bạn nhấn tổ hợp phím Ctrl+S thường xuyên như tôi. Tiện ích này thực sự là một cứu cánh, giúp tăng tốc độ phát triển và giảm thiểu thời gian debug.

Live Server giúp xem trước website theo thời gian thực khi lập trình webLive Server giúp xem trước website theo thời gian thực khi lập trình web

Còn rất nhiều tiện ích khác đang chờ bạn khám phá

Với hàng ngàn tiện ích hữu ích trên VS Code Marketplace, danh sách này chỉ là phần nổi của tảng băng chìm. Tiện ích Cmake rất tuyệt vời cho các lập trình viên muốn sử dụng các tính năng xây dựng và kiểm thử ứng dụng từ giao diện người dùng của Visual Studio Code. Trong khi đó, plugin Color Highlight thêm các đường viền màu vào mã CSS của bạn, giúp dễ nhìn hơn rất nhiều. Sau đó, bạn còn có các tiện ích bổ sung SQLite và Azure Databases dành cho những người có khối lượng công việc lập trình liên quan đến việc thực thi các truy vấn trên các máy chủ cơ sở dữ liệu bên ngoài. Tôi cũng muốn nhắc đến các tiện ích mở rộng của GitLab, nhưng mô hình đăng ký trả phí của nó khiến tôi hơi khó lòng giới thiệu cho các lập trình viên thích các dịch vụ FOSS (Phần mềm Tự do và Mã nguồn Mở).

Hy vọng danh sách này đã cung cấp cho bạn những gợi ý hữu ích để tối ưu hóa môi trường làm việc của mình trên VS Code. Bạn đã và đang sử dụng những extension nào? Hãy chia sẻ ý kiến và những khám phá của bạn để cộng đồng lập trình viên Việt Nam cùng học hỏi và phát triển nhé!

Related posts

APU AMD Ryzen: Lựa chọn khởi đầu tối ưu cho PC Gaming giá rẻ năm 2024

Administrator

Súng Gatling Laser Fallout In 3D: Nòng Súng Quay Thực Tế Gây Sốt Cộng Đồng Game Thủ

Administrator

Tối Ưu Obsidian Với AI Của NotebookLM: Biến Ghi Chú Thành Thông Tin Chi Tiết Đột Phá

Administrator