React Native Asset & Icon Lens (vscode-rn-asset-lens)

The ultimate all-in-one developer companion for React Native & Expo:
Lightning-fast offline icon picker, smart auto-imports, image hover previews (dimensions, file size, @2x/@3x scales), and real-time asset path diagnostics.

🚀 Nỗi đau thực tế & Giải pháp (Problem & Solution)

✨ Tính năng nổi bật (Key Features)

1. 🔍 Icon Picker Panel (Webview) & Keyboard QuickPick

• Hỗ trợ hơn 15,000+ vector icons offline từ tất cả các bộ icon phổ biến nhất:
  • Ionicons (bộ icon số 1 của Expo)
  • MaterialCommunityIcons (7,000+ icons)
  • MaterialIcons (Google Material)
  • Feather
  • Lucide (lucide-react-native)
  • AntDesign
  • FontAwesome, FontAwesome 5, FontAwesome 6
  • Octicons (GitHub Primer)
  • Entypo, SimpleLineIcons, Foundation, EvilIcons, Zocial
• Visual Explorer Panel:
  • Lọc theo từng Family hoặc tìm kiếm toàn bộ.
  • Tùy chỉnh trực tiếp Size (12px - 96px) và Color (color picker + swatches).
  • Tự chọn framework: Expo (@expo/vector-icons), React Native CLI (react-native-vector-icons), hoặc Lucide (lucide-react-native).
• Smart Auto-Import:
  • Tự động phát hiện project dùng Expo hay React Native CLI thông qua package.json.
  • Nếu file code đã có import { Feather } from '@expo/vector-icons', khi chèn Ionicons extension sẽ tự merge thành import { Feather, Ionicons } from '@expo/vector-icons'.
  • Nếu chưa có import, tự động chèn import mới vào đầu file code.

2. 🖼️ Image Hover Preview (Dimensions, Size & Scale Variants)

• Rê chuột qua bất kỳ khai báo ảnh:
  • require('./assets/logo.png')
  • require('../images/banner.jpg')
  • require('@/assets/avatar.webp') (hỗ trợ cả tsconfig baseUrl và paths alias!)
  • source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
• Hiển thị đầy đủ thông số kỹ thuật:
  • Visual Image Preview trực quan.
  • Kích thước thực tế: Width × Height px (dùng thư viện phân tích header siêu nhanh image-size).
  • Dung lượng file: formatted KB / MB.
  • Định dạng: PNG, JPEG, SVG, WebP, GIF, BMP, v.v.
  • Scale Variants Table: Tự động phát hiện các file tỉ lệ màn hình React Native (@1x, @2x, @3x) trong cùng thư mục và bảng so sánh kích thước.
  • Action link: Open File & Reveal in Finder/Explorer.

3. ⚠️ Asset Path Diagnostics & Import Helper

• Tự động quét code JS/JSX/TS/TSX trong thời gian thực.
• Nếu đường dẫn file ảnh trong require('...') không tồn tại hoặc bị gõ sai:
  • Báo cảnh báo (warning squiggly line): [RN Asset Lens] Asset file not found: "./assets/loggo.png".
  • Nhấn Cmd+. (hoặc Ctrl+.) để kích hoạt QuickFix:
    • Tự động gợi ý tên file đúng tương tự (fuzzy matching trong cùng thư mục).
    • Mở QuickPick duyệt toàn bộ ảnh trong project để thay thế.

4. ⚡ In-Editor Icon Hover & Auto-Completion (IntelliSense)

• Rê chuột vào thuộc tính name="airplane" trên <Ionicons name="airplane" /> -> hiển thị tooltip với Vector SVG được render trực tiếp, thông tin Unicode và family!
• Khi gõ name=" bên trong thẻ <Ionicons name=" hoặc <Feather name=" -> IntelliSense gợi ý danh sách toàn bộ icon hợp lệ kèm icon preview!
• Khi gõ require('./assets/ -> IntelliSense gợi ý danh sách các file ảnh trong thư mục kèm kích thước Width x Height!

5. 🎯 Quick Asset Require Picker

• Lệnh: React Native: Pick and Insert Asset require()
• Quét nhanh toàn bộ ảnh trong workspace, hiện menu chọn kèm kích thước, bấm chọn là tự động tính toán đường dẫn relative path chính xác và chèn require('./...') vào vị trí con trỏ!

⌨️ Phím tắt mặc định (Keyboard Shortcuts)

Lưu ý: Bạn có thể click trực tiếp vào nút RN Asset Lens ở góc dưới thanh trạng thái (Status Bar) để mở menu thao tác nhanh!

⚙️ Cấu hình cài đặt (Extension Settings)

Bạn có thể tùy chỉnh trong VS Code Settings (Preferences -> Settings -> search "rnAssetLens"):

{
  // Tự động phát hiện hoặc ép buộc dùng framework nào: "auto" | "expo" | "react-native-vector-icons" | "lucide"
  "rnAssetLens.preferredFramework": "auto",

  // Kích thước mặc định của icon prop JSX (mặc định: 24)
  "rnAssetLens.defaultIconSize": 24,

  // Màu sắc mặc định của icon JSX (mặc định: "black")
  "rnAssetLens.defaultIconColor": "black",

  // Bật/tắt xem trước ảnh khi rê chuột
  "rnAssetLens.enableAssetHoverPreview": true,

  // Bật/tắt xem trước icon khi rê chuột
  "rnAssetLens.enableIconHoverPreview": true,

  // Bật/tắt cảnh báo đường dẫn asset không tồn tại
  "rnAssetLens.enableAssetDiagnostics": true,

  // Bật/tắt gợi ý tự động cho đường dẫn asset
  "rnAssetLens.enableAssetAutocomplete": true,

  // Bật/tắt gợi ý tên icon trong JSX
  "rnAssetLens.enableIconAutocomplete": true
}

🛠️ Cấu trúc dự án (Architecture)

vscode-rn-asset-lens/
├── assets/
│   ├── icon.png                 # Extension logo
│   ├── fonts/                   # 20 TTF vector icon fonts (Ionicons, Lucide, Material, etc.)
│   └── glyphmaps/               # JSON codepoint maps for 15,000+ icons
├── src/
│   ├── extension.ts             # Extension activation, status bar, command registry
│   ├── constants.ts             # Icon families metadata, regexes, supported extensions
│   ├── types.ts                 # TypeScript interfaces
│   ├── icons/
│   │   ├── iconRegistry.ts      # Offline glyphmap parser & OpenType vector SVG generator
│   │   ├── importHelper.ts      # Framework detection & smart import merging
│   │   ├── iconHoverProvider.ts # In-editor JSX hover preview tooltip
│   │   ├── iconCompletionProvider.ts # IntelliSense for icon name props
│   │   ├── iconPickerPanel.ts   # Webview visual explorer controller
│   │   └── iconQuickPick.ts     # Fast keyboard search & insertion
│   ├── assets/
│   │   ├── assetUtils.ts        # Image dimension inspection, density scale detection (@2x, @3x)
│   │   ├── assetHoverProvider.ts# Hover preview for require() and remote URLs
│   │   ├── assetDiagnostics.ts  # Real-time broken asset path warnings
│   │   ├── assetCodeActionProvider.ts # QuickFix suggestions for typos
│   │   ├── assetDefinitionProvider.ts # Cmd+Click jump to asset file
│   │   ├── assetCompletionProvider.ts # Asset path autocomplete
│   │   └── assetPicker.ts       # Pick & insert relative require()
│   └── webview/
│       └── iconPickerHtml.ts    # Native VS Code themed HTML/CSS/JS for Icon Explorer
└── test/
    ├── fixtures/                # Sample React Native component & test images
    └── unit.test.mjs            # Automated test suite (100% pass)

📦 Hướng dẫn cài đặt & sử dụng (Installation & Usage)

Cài đặt từ file .vsix:

1. Trong VS Code, mở tab Extensions (Cmd+Shift+X).
2. Click vào icon ... (Views and More Actions) ở góc trên bên phải.
3. Chọn Install from VSIX....
4. Chọn file vscode-rn-asset-lens-1.0.0.vsix.

Dành cho nhà phát triển (Development):

# Cài đặt dependencies
npm install

# Chạy build
npm run build

# Chạy unit tests
npm test

# Mở extension trong cửa sổ debug
Nhấn F5 trong VS Code để khởi chạy Extension Development Host

📄 License

MIT License. Tự do sử dụng trong các dự án cá nhân và doanh nghiệp.