Giống như nhiều nhà phát triển, tôi từng nghĩ VS Code chỉ là một trình soạn thảo mã nguồn đơn giản – tuyệt vời cho việc viết, gỡ lỗi và quản lý dự án. Không thể phủ nhận rằng đây là một công cụ tuyệt vời, nhưng quan điểm của tôi đã thay đổi khi tôi bắt đầu khám phá hệ sinh thái phong phú của các tiện ích mở rộng. Đây không chỉ là những công cụ đánh dấu cú pháp hay linter thông thường; chúng là những công cụ mạnh mẽ biến VS Code thành một thứ đa năng hơn nhiều. Dưới đây là những viên ngọc ẩn chứng minh rằng VS Code có thể làm được nhiều hơn chỉ là một Môi trường Phát triển Tích hợp.


Excalidraw

Nảy sinh ý tưởng trong thời gian ngắn

Gallery Image

Tiện ích Excalidraw cho VS Code là một ví dụ tuyệt vời về cách một công cụ đơn giản có thể cải thiện quy trình phát triển của bạn. Nó tích hợp bảng trắng ảo nổi tiếng trực tiếp vào VS Code của bạn. Bạn có thể tạo và chỉnh sửa sơ đồ Excalidraw khi nó xử lý các tệp với các phần mở rộng như .excalidraw, .excalidraw.json, .excalidraw.svg hoặc .excalidraw.png.

Nó duy trì phong cách vẽ tay đặc trưng của Excalidraw, rất tuyệt cho các sơ đồ nhanh không cần phải trau chuốt hoàn hảo. Tiện ích cung cấp tất cả các công cụ cơ bản như hình chữ nhật, hình tròn, hình kim cương, mũi tên, đường kẻ và nhiều hơn nữa.

Nó rất tiện lợi cho các phác thảo thiết kế nhanh và sơ đồ khung dây, sơ đồ kiến trúc phần mềm, sơ đồ luồng, hình ảnh hóa và các phiên động não. Bạn chỉ cần tạo một tệp mới với một trong các phần mở rộng được hỗ trợ và mở khóa trình soạn thảo Excalidraw trong VS Code.


Mermaid Chart

Thêm các loại biểu đồ khác nhau bằng ngôn ngữ mã nguồn mở

Mermaid extension for VS Code

Nếu Excalidraw quá cơ bản với bạn, hãy khám phá tiện ích Mermaid Chart cho VS Code. Như dự kiến, nó tận dụng thư viện Mermaid.js để cho phép các nhà phát triển tạo, hình dung và quản lý sơ đồ bằng cú pháp văn bản đơn giản, giống như Markdown, trực tiếp trong trình soạn thảo của họ.

Khi bạn nhập cú pháp Mermaid của mình vào một tệp, tiện ích cung cấp một bản xem trước tức thì, trực tiếp của sơ đồ được hiển thị trong một bảng riêng. Tiện ích tự động nhận diện các tệp .md và các khối mã Mermaid trong Markdown. Nó hỗ trợ nhiều loại sơ đồ như Sơ đồ luồng, Sơ đồ tuần tự, Sơ đồ lớp, Biểu đồ Gantt, Biểu đồ tròn, và nhiều hơn nữa.

Đây là một tiện ích không thể thiếu cho tài liệu kỹ thuật, hình dung luồng mã và thuật toán, và tài liệu API.


Foam

Công cụ PKM lý tưởng

Foam extension for VS Code

Tiện ích Foam biến trình soạn thảo mã nguồn quen thuộc của bạn thành một hệ thống PKM mạnh mẽ. Nó được lấy cảm hứng nhiều từ các khái niệm từ Roam Research và phương pháp Zettelkasten. Nó kết nối các ý tưởng, xây dựng một mạng lưới kiến thức và cung cấp nội dung tốt hơn trong các tệp Markdown cục bộ của bạn.

Bạn có thể liên kết các ghi chú với nhau bằng cú pháp [[wiki link]], và Foam tự động hiển thị cho bạn các liên kết ngược. Điều này giúp bạn khám phá các kết nối không ngờ tới và cung cấp ngữ cảnh. Foam hỗ trợ hình dung đồ thị, xem trước và điều hướng liên kết, ghi chú hàng ngày, và nhiều hơn nữa.


Vscode-icons

Thêm điểm nhấn thẩm mỹ

VS Code icons

VS Code cho phép các tiện ích mở rộng đóng góp các chủ đề biểu tượng khác nhau, và vscode-icons cung cấp một bộ biểu tượng tùy chỉnh phong phú, dễ nhận diện cho một loạt ngôn ngữ lập trình. Thay vì các biểu tượng tài liệu hoặc thư mục chung chung, bạn sẽ thấy một biểu tượng cụ thể cho tệp .js, tệp .css, thư mục .git, và nhiều hơn nữa. Nó hỗ trợ một loạt các phần mở rộng tệp, tên tệp và tên thư mục.

Đó có vẻ là một chi tiết nhỏ, nhưng nó tăng cường độ rõ ràng hình ảnh, tốc độ điều hướng, và trải nghiệm người dùng tổng thể.


Markdown All in One

Nâng cao trải nghiệm Markdown

Markdown extension in VS Code

Mặc dù VS Code có hỗ trợ Markdown tích hợp khá tốt, tiện ích này đưa trải nghiệm lên một tầm cao mới. Đây là một ví dụ điển hình về cách một tiện ích có thể nâng cấp trình soạn thảo thành một nền tảng tạo nội dung mạnh mẽ.

Markdown All in One hỗ trợ các phím tắt cho định dạng thông thường. Đây là một tiết kiệm thời gian đáng kể. Thay vì gõ ** cho chữ đậm hoặc * cho chữ nghiêng, bạn có thể sử dụng các phím tắt cho các tùy chọn định dạng thông thường. Tiện ích cũng hỗ trợ Bảng mục lục, chỉnh sửa danh sách thông minh, tự động hoàn thiện, và nhiều hơn nữa.


Project Manager

Quản lý dự án của bạn như một chuyên gia

Project Manager extension for VS Code

Nếu bạn thường xuyên xoay sở nhiều dự án, hãy sử dụng tiện ích Project Manager. Trong khi các tính năng Open Folder và Workspaces tích hợp của VS Code xử lý tốt các dự án riêng lẻ, tiện ích Project Manager cung cấp một cách tổ chức, truy cập và chuyển đổi giữa tất cả các dự án phát triển của bạn một cách tập trung, nhanh chóng và hiệu quả.

Các tính năng chính bao gồm danh sách dự án tập trung, khả năng lưu bất kỳ thư mục nào dưới dạng dự án, tự động phát hiện các kho lưu trữ, tổ chức với thẻ, và nhiều hơn nữa. Nó nâng cấp tổ chức dự án, giảm bớt chuyển đổi ngữ cảnh và tăng cường năng suất.


Figma for VS Code

Truy cập tệp Figma của bạn

Figma extension for VS Code

Plugin này cầu nối khoảng cách giữa quy trình thiết kế và phát triển. Nó tích hợp sức mạnh của các tính năng hợp tác thiết kế của Figma và chế độ Dev Mode tập trung vào nhà phát triển trực tiếp vào môi trường VS Code.

Truyền thống, các nhà phát triển sẽ chuyển đổi giữa IDE của họ và ứng dụng Figma để kiểm tra thông số thiết kế, sao chép giá trị và hiểu bố cục. Tiện ích này loại bỏ sự chuyển đổi ngữ cảnh liên tục bằng cách mang thông tin thiết kế cần thiết đến ngay phía nhà phát triển với VS Code.

Khám phá sức mạnh thực sự của VS Code

Như bạn có thể thấy, VS Code không chỉ là nơi để viết và xem lại mã. Những tiện ích này biến nó từ một trình soạn thảo đơn thuần thành một trạm làm việc mạnh mẽ, có khả năng xử lý các nhiệm vụ mà bạn có thể chưa bao giờ nghĩ tới. Bạn còn chờ gì nữa? Tải VS Code bằng liên kết dưới đây, truy cập menu tiện ích mở rộng và mở rộng hệ sinh thái phát triển của bạn trong thời gian ngắn.

Nếu bạn đang sử dụng Ubuntu làm máy chính, đây là cách cài đặt VS Code trên đó.