Đã đăng vào khoảng 11 giờ trước 4 phút đọc

Quản lý Vue Component hiệu quả bằng Extension VS Code này!

MayFest2026

Bạn đã bao giờ tự hỏi: "Component này có ai đang dùng không?" hay "Cái component cũ kia liệu có xóa được chưa?" — Vue Component Usage Counter sẽ trả lời giúp bạn ngay trong VS Code.

Vấn Đề Thực Tế

Khi dự án Vue phát triển đến hàng trăm component, việc quản lý chúng trở nên rối rắm:

🤔 Không biết component nào đang thực sự được sử dụng — Bạn muốn refactor nhưng sợ "đụng" vào component mà nơi khác đang import.
🗑️ Dead code tích tụ — Những component đã lỗi thời vẫn nằm yên trong project vì không ai dám xóa.
🔍 Tìm kiếm thủ công mất thời gian — Ctrl+Shift+F rồi đọc từng kết quả? Chậm và dễ bỏ sót.
🏗️ Monorepo phức tạp — Khi component được re-export qua barrel file (index.ts), tìm kiếm đơn giản không đủ.

Vue Component Usage Counter ra đời để giải quyết chính xác những nỗi đau này.

Vue Component Usage Counter Là Gì?

Đây là một VS Code extension nhẹ, nhanh, giúp bạn:

✅ Hiển thị ngay số lần một Vue component được import trong toàn bộ workspace
✅ Click để xem danh sách tất cả các file đang import component đó
✅ Tự động cập nhật khi bạn save file, tạo file mới, hoặc xóa file
✅ Hỗ trợ barrel file (index.ts re-export) và path alias (@/components)

Tất cả diễn ra ngay trong editor, không cần chuyển tab hay chạy CLI.

Các Tính Năng Nổi Bật

📦 CodeLens — Đếm Usage Ngay Trên Dòng Đầu

Mở bất kỳ file .vue nào, bạn sẽ thấy ngay ở dòng đầu tiên một annotation hiển thị số lần component được import:

CodeLens hiển thị số lần usage trên dòng đầu của Vue component

Click vào → mở Peek References View liệt kê mọi nơi đang import component.
Nếu không có ai dùng → hiển thị ℹ️ No usages found — rất hữu ích để phát hiện dead code.
Tự động refresh khi bạn save file hoặc tạo/xóa file .vue.

📊 Status Bar — Nhìn Lướt Là Biết

Ở góc dưới-trái của VS Code, khi bạn đang mở file .vue:

Status Bar hiển thị số lượng usage của Vue component

Chỉ xuất hiện khi file .vue đang active — không gây rối khi làm việc với file khác.
Hiển thị icon quay 🔄 Vue: scanning... khi đang quét.
Click vào cũng mở Peek References View.

⚡ Quét Siêu Nhanh — Chiến Lược Hai Phase

Extension sử dụng kiến trúc Two-Phase Scanning để đạt hiệu suất cao ngay cả với project lớn:

Phase	Công việc	Tốc độ
Phase 1	Sử dụng ripgrep (bundled trong VS Code) để tìm candidate files ở tầng OS	Mili-giây
Phase 2	Đọc từng candidate, resolve import path thành absolute path, so khớp chính xác	Chính xác

Tại sao không dùng vscode.workspace.findFiles? Vì ripgrep chạy ở tầng hệ điều hành, nhanh hơn rất nhiều so với API của VS Code khi cần quét toàn bộ workspace.

🔗 Hỗ Trợ Barrel File / Re-export

Extension hiểu được pattern barrel file — một kỹ thuật phổ biến trong các dự án Vue lớn:

// components/index.ts
export { default as GModal } from './GModal.vue';
export { MarkImage } from './MarkImage';

Khi file khác import từ barrel:

import { GModal } from '@/components';

Extension truy ngược đúng về GModal.vue — không bỏ sót!

Các Pattern Import Được Hỗ Trợ

Pattern	Ví dụ
Default import	`import MyComponent from './MyComponent.vue'`
Named import	`import { MyComponent } from '@/components'`
Re-export	`export { MyComponent } from './components'`
Dynamic import	`import('./MyComponent.vue')`
Kebab-case dynamic	`import('./my-component.vue')`
Barrel re-export	`import { MyComponent } from '@/components'` (qua `index.ts`)

Extension tự động match cả PascalCase lẫn kebab-case của tên component.

Kiến Trúc Bên Trong

┌──────────────────────────────────────────────────────────┐
│  Mở file .vue                                            │
│  → vueParser trích xuất tên component từ đường dẫn file  │
│  → CodeLens & StatusBar yêu cầu dữ liệu từ CacheManager│
└──────────────────────┬───────────────────────────────────┘
                       │
                       ▼
┌──────────────────────────────────────────────────────────┐
│  CacheManager                                            │
│  → Trả về cache nếu còn tươi (< 30 giây)                │
│  → Nếu không, gọi ComponentScanner                      │
└──────────────────────┬───────────────────────────────────┘
                       │
                       ▼
┌──────────────────────────────────────────────────────────┐
│  ComponentScanner (Two-Phase)                            │
│                                                          │
│  Phase 1: ripgrep tìm tất cả file chứa tên component    │
│                                                          │
│  Phase 2: Với mỗi candidate:                            │
│    1. Trích xuất import path                             │
│    2. Resolve thành absolute path (alias, extension)     │
│    3. Kiểm tra direct match HOẶC barrel re-export        │
│    4. Chỉ giữ lại những usage đã xác minh               │
└──────────────────────────────────────────────────────────┘

Cài Đặt

Bạn có thể tải trực tiếp extension tại: Vue Component Usage Counter trên VS Code Marketplace

Hoặc cài đặt trực tiếp trong editor:

Mở VS Code
Vào Extensions (Ctrl+Shift+X)
Tìm "Vue Component Usage Counter"
Click Install

Tại Sao Nên Dùng?

Trước	Sau khi cài extension
`Ctrl+Shift+F` → đọc từng kết quả → phân tích thủ công	Nhìn CodeLens → biết ngay số usage
Không biết component nào là dead code	`0 usages` → tự tin xóa
Barrel file làm mất dấu import	Extension trace qua barrel file tự động
Mỗi lần tìm kiếm mất 10-30 giây	Cache + ripgrep → kết quả trong mili-giây

Kết Luận

Vue Component Usage Counter là một công cụ nhỏ nhưng giải quyết một bài toán lớn: hiểu rõ dependency graph của component ngay trong editor. Dù bạn đang làm việc với project nhỏ hay monorepo phức tạp, extension này sẽ giúp bạn:

🧹 Dọn dẹp dead code một cách tự tin
🔍 Navigate nhanh đến nơi sử dụng component
📊 Đánh giá impact trước khi refactor
⚡ Tiết kiệm thời gian so với tìm kiếm thủ công

Cài thử ngay và cho mình biết cảm nhận nhé! 🚀

VueJS vscode extension