React Native Styles Snippets

Extension hỗ trợ autocomplete cho React Native StyleSheet với các snippet sẵn có như buttonStyles, inputStyles, containerStyles, v.v.

Tính năng

• Autocomplete thông minh: Gõ tên style (ví dụ: inputStyles, buttonStyles) và nhấn Enter để tự động chèn code
• IntelliSense tích hợp: Hiển thị gợi ý ngay khi gõ, tương tự Bootstrap IntelliSense
• Hỗ trợ đầy đủ: Button styles, Input styles, Container styles, Text styles
• Import tự động: Tự động thêm import statements cần thiết

Cách sử dụng

1. Mở file JavaScript/TypeScript React Native (.js, .jsx, .ts, .tsx)
2. Gõ tên style snippet (ví dụ: inputStyles)
3. Chọn từ danh sách gợi ý
4. Nhấn Enter để chèn code

Ví dụ:

Gõ buttonStyles → Nhấn Enter → Code tự động xuất hiện:

import { StyleSheet } from "react-native";
import { COLORS, FONT_SIZES, SPACING } from "../constants";

export const buttonStyles = StyleSheet.create({
  primary: {
    backgroundColor: COLORS.primary,
    padding: SPACING.md,
    borderRadius: 10,
    alignItems: "center",
  },
  // ... more styles
});

Yêu cầu

• Visual Studio Code phiên bản 1.106.1 trở lên
• Dự án React Native

Cài đặt

Không có cài đặt bổ sung nào.

Danh sách Snippets

• buttonStyles - Styles cho các button (primary, secondary, success, danger)
• inputStyles - Styles cho các input field
• containerStyles - Styles cho containers
• textStyles - Styles cho text elements
• cardStyles - Styles cho card components
• imageStyles - Styles cho images

Known Issues

Hiện tại chưa có vấn đề nào được báo cáo.

Release Notes

0.0.1

• Phát hành ban đầu
• Hỗ trợ autocomplete cho buttonStyles, inputStyles, containerStyles, textStyles
• Tích hợp IntelliSense cho React Native

Phát triển

Để phát triển extension này:

1. Clone repository
2. Chạy npm install để cài đặt dependencies
3. Nhấn F5 để mở Extension Development Host
4. Test extension trong cửa sổ mới

Đóng góp

Mọi đóng góp đều được chào đón! Vui lòng tạo issue hoặc pull request.

Chúc code vui vẻ! Enjoy!