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

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ở

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

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

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

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

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

The post Khám phá hệ sinh thái mở rộng của VS Code appeared first on Nhật Phúc.

Việc qua lại này có thể hơi chậm và làm gián đoạn dòng chảy công việc của bạn.

Nhưng bây giờ, với phiên bản mới nhất, ChatGPT có thể làm việc trực tiếp với các ứng dụng trên máy tính của bạn, bao gồm cả VS Code. Điều này có nghĩa là ChatGPT có thể “nhìn thấy” các tệp bạn đang mở khi bạn yêu cầu trợ giúp, vì vậy nó hiểu ngữ cảnh mà không cần bạn phải sao chép và dán mọi thứ.

Kích hoạt tích hợp

Đầu tiên, bạn cần cài đặt tiện ích mở rộng chính thức ChatGPT cho VS Code.

Tiếp theo, bạn sẽ cần đảm bảo rằng cài đặt trong Settings > Works with Apps > Enable Work with Apps đang được bật.

Cách sử dụng ChatGPT với VS Code

Đầu tiên, đảm bảo rằng ChatGPT đang mở và chạy. Sau đó, gõ Option + Space. Phím tắt này sẽ mở cửa sổ “Companion Chat” của ChatGPT trên VS Code.

Bây giờ, chúng ta sẽ xem cách sử dụng ChatGPT với VS Code.

Chỉnh sửa hàng loạt

Một cách mạnh mẽ để sử dụng tích hợp ChatGPT với VS Code là thực hiện thay đổi đối với nhiều hàm, lớp, biến, đối số hoặc chỉ các chuỗi cùng một lúc. Trong ví dụ dưới đây, chúng ta yêu cầu ChatGPT đổi tên các plugin hooks.

Phần tuyệt nhất? Bạn không cần phải sao chép và dán bất kỳ mã nào. ChatGPT có thể quét mã trực tiếp và đề xuất chỉnh sửa. Nó thậm chí còn hiển thị sự khác biệt và cung cấp cho bạn một nút để áp dụng các thay đổi chỉ với một cú nhấp chuột.

Tạo đoạn mã mẫu

Với phiên bản mới nhất, bạn có thể dễ dàng tạo ra các đoạn mã mẫu chỉ với một cú nhấp chuột. Tiếp theo, bạn cần phải làm theo những bước hướng dẫn dưới đây để hoàn tất quá trình.

Ngoài việc thực hiện các thay đổi đối với mã hiện có, ChatGPT cũng đủ thông minh để tạo ra mã mẫu giúp bạn bắt đầu nhanh chóng.

Trong ví dụ này, tôi đã tạo một tệp mới và yêu cầu nó tạo mã để thêm một menu con trong bảng điều khiển WordPress.

Điều tuyệt vời là nó hiểu cấu trúc của mã nguồn của bạn và tuân theo phong cách mã hóa giống như các tệp khác.

Tạo các bài kiểm tra

Một trường hợp sử dụng hữu ích khác là tạo các bài kiểm tra. Trong ví dụ này, tôi đã yêu cầu ChatGPT tạo các bài kiểm tra cho tất cả các phương thức trong một lớp. Lời nhắc tôi đã sử dụng là: Tạo các bài kiểm tra cho tất cả các phương thức công khai trong lớp này.

Tuy nhiên, ChatGPT hiện chưa hỗ trợ tạo các bài kiểm tra này trong một tệp riêng biệt. Điều đó có nghĩa là bạn không thể chỉ nhấp vào nút “Áp dụng”. Bạn sẽ cần sao chép mã đã tạo và dán nó vào một tệp mới theo cách thủ công.

Viết tài liệu trực tiếp

Một tiện ích phổ biến khác là tạo tài liệu hướng dẫn trực tiếp. Trong ví dụ này, tôi đã yêu cầu nó thêm tài liệu hướng dẫn trực tiếp cho lớp và phương thức với lời nhắc sau: Tạo tài liệu hướng dẫn trực tiếp cho các phương thức trong lớp. Mô tả chi tiết nhất có thể về từng phương thức được sử dụng cho việc gì.

Cải thiện khả năng đọc code

Nếu bạn không chắc code của mình có dễ đọc hay không, bạn có thể nhờ ChatGPT giúp làm cho nó rõ ràng hơn. Trong ví dụ này, tôi đã nhờ nó cải thiện khả năng đọc của một đoạn mã. Bạn có thể đơn giản sử dụng một câu nhắc như: Làm cho mã dễ đọc hơn.

Mẹo: Chọn phần mã mà bạn muốn cải thiện trước khi nhấn Option + Space. Bằng cách này, ChatGPT sẽ chỉ tập trung vào đoạn mã đã chọn thay vì cố gắng cập nhật toàn bộ tập tin.

Tìm kiếm lỗ hổng tiềm ẩn

Nếu bạn lo lắng về bảo mật của mã nguồn, bạn có thể yêu cầu ChatGPT kiểm tra để phát hiện các lỗ hổng tiềm ẩn. Mặc dù nó không thể thay thế cho một cuộc kiểm tra bảo mật toàn diện, nhưng đây có thể là một bước đầu tiên tuyệt vời để phát hiện các vấn đề phổ biến như bí mật được mã hóa cứng, sử dụng hàm không an toàn, hoặc thiếu xác thực hay làm sạch dữ liệu đầu vào.

Chỉ cần chọn mã mà bạn muốn phân tích và sử dụng một gợi ý như: Kiểm tra mã này để tìm vấn đề bảo mật..

Tôi nhận thấy các gợi ý là tốt và hợp lý. Vì nó không hiểu toàn bộ bức tranh của mã, nó không đề xuất áp dụng các cập nhật mã ngay lập tức vì bạn cần xem xét liệu đây có phải là điều bạn thực sự cần áp dụng hay không.

Kết luận

ChatGPT và VS Code là một cặp đôi tuyệt vời. Mặc dù nó có thể không được tích hợp chặt chẽ hoặc mạnh mẽ như GitHub Copilot, ChatGPT vẫn là một trợ lý hữu ích. Đây là một lựa chọn thay thế đáng tin cậy, đặc biệt nếu bạn thích một AI ít can thiệp và chỉ tham gia khi bạn yêu cầu.

The post Cách sử dụng ChatGPT với Visual Studio Code để nâng cao hiệu suất làm việc appeared first on Nhật Phúc.