📱 Mobile Helper
Mobile Helper là một extension hỗ trợ lập trình viên React Native làm việc nhanh hơn trong VS Code.
Extension này cung cấp snippet, lệnh nhanh, và mẫu code tái sử dụng để giúp bạn khởi tạo và phát triển ứng dụng React Native hiệu quả hơn.
🚀 Tính năng
- 🔹 Snippets tiện lợi cho các component React Native thường dùng
- 🔹 Mẫu trang Expo Router: tạo nhanh các trang với 1 prefix
- 🔹 Redux & SQLite setup: khởi tạo store và database config nhanh chóng
- 🔹 Cấu trúc đặt tên chuẩn hóa giúp dự án React Native gọn gàng hơn
- 🔹 Tối ưu hóa quy trình dev bằng cách giảm thao tác lặp lại
📋 Danh sách Snippets
🗄️ Database & Config
| Prefix |
Mô tả |
dbconfig |
SQLite configuration với CRUD operations |
redux |
Redux Toolkit slice + store cho Workout |
reduxCart |
Redux Toolkit Cart slice với add/remove items |
usefetch |
Custom hook để gọi API với GET/POST/PUT/DELETE |
📱 Pages
| Prefix |
Mô tả |
root |
Trang gốc với thông tin sinh viên |
layout |
Layout toàn app với SQLite Provider & SafeAreaView |
home |
Trang danh sách workout với tìm kiếm & filter |
trash |
Trang hiển thị workout đã xóa với chức năng restore |
form |
Form thêm/sửa workout với Redux |
sync |
Trang đồng bộ dữ liệu SQLite ↔ API |
auth |
Trang đăng nhập với React Native Paper |
home_page |
Home page với search & category segmented buttons |
🧩 Components
| Prefix |
Mô tả |
item |
Workout card component với update/delete actions |
CartCard |
Cart item card với add/remove quantity |
CartPage |
Trang giỏ hàng hiển thị tổng quan |
🎨 Layouts
| Prefix |
Mô tả |
home_layout |
Expo Router Tabs layout với icons |
root_layout |
Root layout với Redux Provider & SafeArea |
root_page |
Root page redirect đến route auth |
⚙️ Yêu cầu
Extension hoạt động tốt trên:
- Node.js ≥ 18
- VS Code ≥ 1.80
- Dự án React Native (Expo hoặc CLI)
Nếu bạn sử dụng Expo, nên cài thêm:
npm install expo expo-router react-native-paper expo-sqlite
npm install @reduxjs/toolkit react-redux
npm install react-native-safe-area-context
npm install nativewind
🧩 Cấu hình Extension
Extension không cần cấu hình phức tạp và sẵn sàng sử dụng ngay sau khi cài đặt.
💡 Cách sử dụng
- Tạo file mới trong dự án React Native của bạn
- Gõ prefix (ví dụ:
home, form, dbconfig, ...)
- Nhấn Tab hoặc Enter để chèn snippet
- Điều chỉnh code theo nhu cầu dự án
Ví dụ:
// Gõ "dbconfig" và nhấn Tab
// → Tự động tạo file cấu hình SQLite với đầy đủ CRUD operations
// Gõ "home" và nhấn Tab
// → Tự động tạo trang Home với search, filter và FlatList
// Gõ "redux" và nhấn Tab
// → Tự động tạo Redux store với slice cho Workout
🐞 Các vấn đề đã biết
- Khi dùng trong dự án TypeScript, có thể cần điều chỉnh đường dẫn import (
@/config/sqlite, @/type, @/components, ...)
- Một số snippet yêu cầu cài đặt dependencies tương ứng (expo-sqlite, react-native-paper, redux toolkit)
📝 Ghi chú phát hành
0.0.7
✨ Latest release — Bổ sung đầy đủ snippets:
Database & State Management:
- SQLite configuration (dbconfig)
- Redux Toolkit setup (redux, reduxCart)
- Custom useFetch hook
Pages:
- Root, Layout, Home, Trash
- Form, Sync, Auth pages
- Home layout with tabs
Components:
- Workout Item card
- Cart Card & Cart Page
🎯 Mẹo sử dụng
- Prefix ngắn gọn: Chỉ cần nhớ tên chức năng (home, form, sync, ...) để gõ nhanh
- Tùy chỉnh theo dự án: Sau khi insert snippet, điều chỉnh imports và types cho phù hợp
- Kết hợp snippets: Sử dụng
dbconfig → redux → home để setup nhanh một feature hoàn chỉnh
- TypeScript support: Tất cả snippets đều có type annotations sẵn
🔗 Tham khảo thêm
📦 Cài đặt
- Mở VS Code
- Vào Extensions (Ctrl+Shift+X)
- Tìm kiếm "mobile-helper"
- Click Install
Hoặc cài từ command line:
code --install-extension conghai.mobile-helper
Enjoy faster React Native development with 🚀 Mobile Helper!
Made with ❤️ by Trương Công Hải - MSSV: 22692311
