gluestack VS Code Extensions

gluestack VS Code Extensions are specifically designed to quicken your development process using gluestack-ui components

How Snippets Work

This extension provides working snippets that make it easy to navigate between different breakpoints by using tabs. Here's a quick look at snippets in action:

Snippets

gluestack snippets are shorthand for commonly used gluestack components. All snippets start with the prefix gs- and are followed by the name of the desired component. It's that simple.

gluestack-ui Snippets

gluestack-ui Snippets Extension is specifically designed to quicken your development process using gluestack-ui components

Currently it supports adding any usecase of snippet, its used imports, variables etc. If you have anyone idea, can submit PR or Issue

Supported Languages

• JavaScript(.js)
• TypeScript(.ts)
• JavaScriptReact(.jsx)
• TypeScriptReact(.tsx)

Usage

1. Install the extension by searching in the vscode marketplace.
2. Then, go to your code file and whereever you are writing jsx, type gs- and you will get suggestions of the components. Type enter on any of those, and your snippet will get added. Collectively, it will also add the imports and the variables and hooks used in the snippet.

Changing gluestack-ui versions.

• Automatic Project Type Detection: The extension automatically identifies your project type by analyzing your tailwind.config file.

• Manual Version Override: You can manually select the snippet version you prefer.

How to Manually Override Snippet Version?

To manually override the snippet version:

1. Open the command palette by pressing Command + Shift + P (on Mac) or Ctrl + Shift + P (on Windows/Linux).
2. Type Select gluestack-ui version and press Enter.
3. Choose the desired version from the options:
   • v1 - @gluestack-ui/themed
   • v2 - gluestack-ui with NativeWind

By following these steps, you can easily switch between different versions of gluestack-ui snippets to suit your project needs.