UI-Snippet Extension
Extension VS Code cung cấp các snippet hữu ích cho JavaScript, React, và TypeScript để tăng tốc quá trình phát triển.
Tính năng
Extension này cung cấp các snippet phổ biến giúp bạn viết code nhanh hơn cho:
- React Components
- React Hooks
- JavaScript/TypeScript Functions
- React Context API
- Bootstrap UI Components
- Các tiện ích thường dùng
Danh sách Snippets
Prefix |
Mô tả |
rfc |
React Function Component |
usestate |
React useState Hook |
useeffect |
React useEffect Hook |
clg |
Console log |
arrow |
Arrow Function |
async |
Async Function với try-catch |
rcontext |
React Context Provider với quản lý trạng thái |
rheader |
Component Header React Bootstrap |
rcart |
Component Giỏ Hàng React |
rhome |
Component Trang Chủ React với danh sách sản phẩm |
rnotfound |
Component React cho trang không tìm thấy |
rfooter |
Component Chân Trang React |
rdetail |
Component React hiển thị chi tiết sản phẩm |
rapp |
Component chính của ứng dụng React với định tuyến |
Cách sử dụng
- Trong các file JavaScript, JSX, TypeScript, hoặc TSX, gõ một trong các prefix ở trên
- Chọn snippet từ danh sách gợi ý
- Nhấn
Tab để di chuyển giữa các phần có thể chỉnh sửa
Ví dụ:
Khi bạn gõ rfc và chọn snippet, bạn sẽ nhận được:
import React from 'react';
const ComponentName = () => {
return (
<div>
</div>
);
};
export default ComponentName;
Yêu cầu
Extension này không có yêu cầu hay phụ thuộc đặc biệt nào.
Cài đặt
- Mở VS Code
- Vào Extension Marketplace (Ctrl+Shift+X)
- Tìm kiếm "UI-Snippet"
- Nhấn Install để cài đặt
Phát triển
Nếu bạn muốn đóng góp vào extension này:
- Clone repository:
git clone https://github.com/yourusername/ui-snippet
- Mở dự án trong VS Code
- Chỉnh sửa snippets trong thư mục
snippets
- Kiểm tra bằng cách nhấn F5 để mở một cửa sổ VS Code mới với extension được load
Phiên bản
0.1.0
- Phiên bản khởi đầu
- Thêm các snippet cơ bản cho React và JavaScript/TypeScript
Chúc bạn viết code vui vẻ!
| |