NativeStyleX IntelliSense

NativeStyleX IntelliSense is a Visual Studio Code extension designed to provide IntelliSense support for NativeStyleX, a utility-first CSS framework for React Native. This extension enables developers to quickly apply predefined utility classes for styling components in React Native without writing custom CSS.

With NativeStyleX, you can style your components faster, and this extension adds an additional layer of convenience by providing autocomplete and suggestions for available utility classes.

Features

• IntelliSense support for NativeStyleX utility classes in JavaScript and TypeScript files.
• Autocomplete for utility classes like text colors, background colors, font sizes, margin, padding, etc.
• Rapid development with pre-defined utility classes, eliminating the need to write custom CSS.

Installation

1. From the VS Code Marketplace:

   • Open VS Code.
   • Go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window.
   • Search for NativeStyleX IntelliSense.
   • Click the Install button.

2. Manually:

   • Download the .vsix file from the releases section.
   • Open VS Code and go to the Extensions view.
   • Click on the three dots (...) in the top-right corner and select Install from VSIX.
   • Select the downloaded .vsix file to install the extension.

Usage

Once the extension is installed, you can start using it immediately in your JavaScript and TypeScript files.

Example:

import { Text, View } from 'react-native';

const App = () => (
  <View style={useNativeStyleX(['bg-primary', 'text-white', 'p-4', 'm-2'])}>
    <Text style={useNativeStyleX(['fs-2', 'fw-bold'])}>Hello, NativeStyleX!</Text>
  </View>
);