Giới thiệu
Bạn có mệt mỏi với những danh sách "tiện ích VS Code tốt nhất" chỉ lặp đi lặp lại những cái tên quen thuộc? Tôi cũng vậy. Vì vậy, tôi đã tìm kiếm trong bộ sưu tập của mình và tìm ra một số tiện ích chưa nổi bật nhưng thực sự đã cải thiện quy trình lập trình hàng ngày của tôi. Trong bài viết này, bạn sẽ tìm thấy một danh sách chọn lọc các tiện ích VS Code ít người biết đến (nhưng rất hữu ích) — mỗi tiện ích đều có mô tả ngắn gọn về chức năng và lý do tại sao tôi vẫn giữ chúng. Cho dù bạn đang tìm kiếm cách để tối ưu hóa việc điều hướng, cá nhân hóa thiết lập của mình, hay chỉ đơn giản là thêm một chút niềm vui vào môi trường lập trình, có lẽ sẽ có điều gì đó ở đây mà bạn chưa từng thấy trước đây.
Trước khi bắt đầu, tôi xin lưu ý rằng không có tiện ích nào trong danh sách này được tài trợ. Chúng chỉ là những công cụ mà tôi đã đưa vào quy trình làm việc của mình và thấy thực sự hữu ích. Tôi sẽ cung cấp một mô tả ngắn gọn cho mỗi tiện ích, cùng với một vài suy nghĩ về lý do tại sao chúng nổi bật với tôi.
Hy vọng bạn sẽ khám phá ra điều gì đó thú vị hoặc giải quyết một vấn đề mà bạn thậm chí không nhận ra rằng mình đã gặp phải. Giờ thì hãy cùng khám phá danh sách nhé.
Line Surfer 🔗
Không bao giờ đánh mất vị trí dòng mã hiện tại của bạn
Điều đầu tiên ai đọc danh sách này sẽ hiểu là tôi thích thử nghiệm xem có bao nhiêu biểu tượng, emoji và màu sắc tôi có thể đưa vào thiết lập VS Code của mình mà không mất quá nhiều sự tập trung 😓 Line Surfer giúp tôi với cả hai điều này. GIF dưới đây minh họa chính xác những gì nó làm.
Vậy tôi chủ yếu có màu sắc đã được cấu hình (⚠️ với độ trong suốt) và bất cứ khi nào tôi mất phương hướng với con trỏ của mình, tôi có thể dễ dàng xác định vị trí của nó nhờ vào những gì Line Surfer làm. Nó làm nổi bật dòng mã mà bạn đang tập trung vào và một vài dòng bên trên/bên dưới nó. Tất cả những điều này đều có thể cấu hình.
Squarl Bookmarks 🔗
Một trình quản lý đánh dấu cho mã nguồn của bạn
Tiện ích đánh dấu mạnh mẽ này giúp bạn dễ dàng lưu trữ các tệp trong các mã nguồn lớn, và đặc biệt hữu ích ngay cả khi xử lý các tệp có tên giống nhau hoặc đường dẫn phức tạp, khó hiểu. Bạn có thể có các đánh dấu cá nhân hoặc lưu một cấu hình trong .vscode/settings.json, nơi bạn có thể bao gồm các đánh dấu cần thiết và các liên kết hữu ích để đơn giản hóa việc làm quen cho các thành viên mới trong nhóm. Tiện ích này cũng cho phép bạn tổ chức các đánh dấu của mình thành các nhóm hoặc danh mục để dễ dàng điều hướng và quản lý.
HSL Color Preview 🔗
Xem trước màu hsl trong trình soạn thảo của bạn
Tiện ích này khá đơn giản trong mục đích sử dụng. Tôi không nhớ chính xác lý do tại sao hoặc khi nào, nhưng rõ ràng tôi đã cần xem màu hsl trông như thế nào trong VS Code và tiện ích này thực hiện đúng điều đó.
VSCode Git Commit Message 🔗
Thêm một bộ emoji và tiền tố tiêu đề commit của bạn với chúng
Đây là tiện ích mà tôi đã cài đặt lâu nhất. Như đã đề cập trước đó, tôi là một fan lớn của việc (quá) sử dụng emoji. Khi tôi phát hiện ra xu hướng gitmoji và emoji log, tôi bắt đầu sử dụng tiêu chuẩn đó cho khoảng 90% các commit cá nhân của mình.
Tuy nhiên, tôi thích cá nhân hóa thiết lập của mình, và các tiện ích hiện có thường tuân theo một tiêu chuẩn nghiêm ngặt, thường được điều chỉnh theo sở thích của nhà phát triển. Vì vậy, tôi muốn một tiện ích không chỉ cho phép tôi sử dụng bất kỳ bộ emoji nào tôi muốn, mà còn cho phép tôi tùy chỉnh các tiền tố/hậu tố khác, và tiện ích này thực hiện đúng điều đó.
Sau khi tôi đã stage các tệp, tôi có một phím tắt kích hoạt một commit và nhắc nhở về thông điệp commit. Thông điệp đầu tiên là hình ảnh ở trên và tôi sử dụng cấu hình sau cho các nhắc nhở tiếp theo:
json
"action": [
{
"label": "",
"detail": "Empty"
},
{
"label": "⚒️ part of",
"detail": "A commit that progresses a task or an epic"
},
{
"label": "✅ closes",
"detail": "A commit that marks the finish of a task or an epic"
},
{
"label": "💀 deprecates",
"detail": "A commit that deprecates something"
}
],
"scope": [
{
"label": "🕹️game",
"detail": "Game related changes"
},
{
"label": "📦assets",
"detail": "Adds/Moves assets in the codebase"
},
{
"label": "🛠️tools",
"detail": "Tooling related changes"
},
{
"label": "📐ui",
"detail": "Changes related to the UI"
}
],
"vscodeGitCommit.template": [
"{prefix}: {message}",
" {scope}",
" {action} {taskCode}",
" by David Morais <david@davidmorais.com>"
],Theming 🎨
Trừ khi tôi làm việc dưới ánh sáng mạnh và cần chuyển sang chủ đề sáng, đây là cách VS Code thường xuất hiện với tôi.
Trùng hợp thay, tất cả các tiện ích thay đổi giao diện này đều nằm ở cuối danh sách tiện ích của tôi, khi được sắp xếp theo số lượng cài đặt 🎯 Vậy hãy để tôi nói cho bạn một chút về chúng.
Carbon Product Icons 🔗
Tôi đã mất một thời gian để nhận ra rằng các biểu tượng cho "Explorer," "Source Control," "Debug," và các tính năng tương tự có thể được tùy chỉnh. Vì vậy, tôi đã tìm kiếm các tiện ích "Product Icons" và đây là bộ biểu tượng mà tôi thích nhất.
Vira Theme🔗
Một thay đổi khá gần đây tôi đã thực hiện trong các biểu tượng của mình là sử dụng các biểu tượng đẹp được cung cấp bởi gói chủ đề này, cũng thêm một số chủ đề khác để lựa chọn. Tôi thích rằng chúng có các biểu tượng tùy chỉnh cho nhiều thư viện.
Dark Magic Themes 🔗
Thời gian để tôi tự quảng cáo một chút. Tôi đã tạo ra những điều này vài năm trước vì tôi muốn thứ gì đó giống như Tokyo Night hoặc Dracula nhưng với một điểm nhấn teal. Gói này bao gồm 2 chủ đề cá nhân (Dark Magic + Night Variant) với màu sắc cú pháp cá nhân của tôi. Sau đó, tôi cũng đã thêm các biến thể Nord, Dracula, Tokyo và một biến thể Frankenstein (màu xanh lá) với các màu sắc cú pháp tùy chỉnh. Một biến thể sáng đang được phát triển và sẽ ra mắt sớm ™️.
Million Lint🔗
một linter cho hiệu suất của các thành phần React của bạn.
Đây là một tiện ích mà tôi đã sử dụng trong một số dự án cá nhân với mức độ vừa phải. Tiện ích này cơ bản kết nối và lắng nghe máy chủ phát triển của bạn và không chỉ chỉ ra các vấn đề hiệu suất, mà còn có thể gợi ý một số cách sửa chữa hoặc cải tiến. Thật hữu ích khi có nó vì nó không tiêu tốn nhiều tài nguyên để chạy ở chế độ phát triển, chỉ cần cài đặt gói npm và khởi tạo nó và Million Lint sẽ bắt đầu chỉ ra tất cả những lần re-render không cần thiết trong các thành phần ứng dụng của bạn.
⚠️ Tôi nghĩ tiện ích này sắp bị ngừng hoạt động do việc loại bỏ README của tiện ích và trang web của họ.
Vitest Runner🔗
cách nhanh nhất để chạy các spec trực tiếp trong VS Code
Tiện ích này thực hiện chính xác những gì tên của nó gợi ý: nó thêm các nút "Chạy" và "Gỡ lỗi" vào tất cả các tệp spec của tôi. Điều này giúp tôi không phải sao chép đường dẫn tệp và gõ lệnh vitest tương ứng mỗi lần. Đó là tất cả. Trong khi có nhiều tiện ích tương tự cho Jest, cũng như nhiều cái thêm giao diện người dùng kiểm tra vào thanh bên, tôi thích sự đơn giản của việc chỉ có một vài nút bổ sung trong mã của mình hơn là các yếu tố giao diện bổ sung.
Total Typescript🔗
dịch các lỗi Typescript sang ngôn ngữ con người
Tôi đã cài đặt tiện ích này một thời gian, gần như từ khi tôi thêm Typescript vào bộ công cụ của mình cách đây khoảng 3 hoặc 4 năm. Total Typescript giúp giải thích những thông điệp lỗi Typescript đôi khi khó hiểu và dịch chúng thành thứ gì đó mà một lập trình viên có thể đọc được. Đây là một tiện ích tôi hoàn toàn khuyên dùng nếu bạn mới bắt đầu với TS vì nó có thể giúp quá trình học hỏi trở nên dễ dàng hơn và tiết kiệm cho bạn một vài giờ trong việc gỡ lỗi những lỗi TS ban đầu đó.
FrontMatter CMS 🔗
biến VS Code thành một CMS
Đây là một viên ngọc thực sự 💎 và là công cụ tôi sử dụng để quản lý các bài viết trên trang web của mình. Nó mang lại cho VS Code sức mạnh CMS ma thuật, cung cấp cho nó một giao diện người dùng đẹp để bạn có thể quản lý nội dung. Bạn có thể có các trường tùy chỉnh, có thể đọc trực tiếp từ các thuộc tính YAML trong tệp markdown của bạn và thậm chí cung cấp cho bạn các gợi ý cải thiện SEO cho nội dung của bạn.
Tôi rất khuyên dùng tiện ích này; tuy nhiên, tôi phải thừa nhận rằng tôi thường tắt nó khi làm việc trên các dự án không liên quan đến CMS hoặc tệp markdown.
Gistpad 🔗
giúp bạn truy cập các gists của bạn từ VS Code
GistPad là cách yêu thích của tôi để làm việc với GitHub gists. Nó thêm một biểu tượng sản phẩm vào thanh bên của bạn (cá nhân, tôi giữ tất cả các công cụ không cục bộ như Copilot và GistPad ở thanh bên thứ cấp), cho phép bạn truy cập cả gists công khai và riêng tư ngay từ trong VS Code. Sử dụng chính của tôi cho điều này là lưu trữ các tệp cấu hình — như zsh, PowerShell scripts, các chủ đề tùy chỉnh và nhiều hơn nữa. Mỗi khi tôi gặp phần mềm sử dụng văn bản thuần cho cấu hình của nó (điều này khá phổ biến với nhiều công cụ phát triển), tôi lưu tệp cấu hình dưới dạng một gist riêng tư. Sau đó, khi tôi cần thiết lập phần mềm đó trên một máy mới, tôi chỉ cần mở tệp cấu hình trong VS Code, nhấp vào biểu tượng GistPad, tìm gists liên quan và sao chép-nhúng nội dung nơi tôi cần.
Nếu bạn không sử dụng gists hoặc đã có một phương pháp ưa thích để quản lý các tệp cấu hình, GistPad có thể không mang lại nhiều giá trị cho bạn.
Tuy nhiên, nếu bạn thường xuyên phải xử lý nhiều cấu hình trên các máy khác nhau, hoặc chỉ muốn một cách nhẹ nhàng để đồng bộ hóa các đoạn mã và mẫu, GistPad xứng đáng để xem xét. Tiện ích này cũng hỗ trợ nhiều hơn cả các tệp văn bản — bạn có thể tổ chức ghi chú markdown, mẫu mã và thậm chí cả các tập dữ liệu nhỏ, tất cả đều có thể tìm kiếm thuận tiện trong cùng một giao diện. Thêm vào đó, nhờ tích hợp GitHub liền mạch, bất kỳ chỉnh sửa nào bạn thực hiện trong VS Code sẽ được lưu ngay lập tức lại vào gists của bạn, đảm bảo bạn không bao giờ mất dấu các điều chỉnh hoặc cập nhật quan trọng. Tổng thể, đây là một bổ sung đơn giản nhưng mạnh mẽ đáng ngạc nhiên cho bất kỳ bộ công cụ nào của nhà phát triển.
Kết luận
Đó là tổng hợp các tiện ích VS Code ít người biết nhưng thực sự hữu ích mà tôi sử dụng để làm cho cuộc sống lập trình của mình tốt hơn từng ngày. Trong khi dễ dàng để dán với các plugin đã được thử nghiệm và tin cậy mà mọi người hay nói đến, đôi khi chính những viên ngọc ẩn này giải quyết những vấn đề mà bạn thậm chí không nhận ra bạn đã gặp phải. Tôi hy vọng bạn đã tìm thấy ít nhất một tiện ích mới để thử nghiệm, hoặc một điều chỉnh nào đó mang lại cho thiết lập của bạn một làn gió mới. Nếu bạn có bất kỳ tiện ích ít người biết nào khác, hãy cho tôi biết — tôi luôn tìm kiếm những công cụ mới để thử nghiệm. Chúc bạn lập trình vui vẻ!
