https://github.com/nhope123/zymble

Vs Code extension that streamlines the React workflow by offering commands to quickly generate React components and hooks.
https://github.com/nhope123/zymble

generate-code prettier-config react-component react-hooks setup-script vscode-extension

Last synced: 10 months ago
JSON representation

Vs Code extension that streamlines the React workflow by offering commands to quickly generate React components and hooks.

• Host: GitHub
• URL: https://github.com/nhope123/zymble
• Owner: nhope123
• License: other
• Created: 2024-12-02T06:49:42.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-29T23:44:38.000Z (about 1 year ago)
• Last Synced: 2025-02-06T04:07:26.848Z (12 months ago)
• Topics: generate-code, prettier-config, react-component, react-hooks, setup-script, vscode-extension
• Language: JavaScript
• Homepage:
• Size: 2.78 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Zymble ![Zymble Logo](src/assets/logo.png)

## Description

Zymble is a VS Code extension that simplifies the React workflow by providing commands to generate React components and hooks with ease.

## Commands

- **Create React Component**

- **Create React Hook**

## Features

- **Create React Component**:

  - Generate a folder from the component name.

  - Generate a React functional components with or without props.

  - Generate a component test file.

  - Generate a types file for components with props.

  - The file extensions depending on TypeScript installation:

    - Component and test files are `.jsx` or `.tsx`.

    - Type files are `.js` or `.ts`.

- **Create React Hook**

  - Generate a folder from the hook name in the hooks folder or a User selected folder.

  - Generate custom React hooks with optional useState and useEffect.

  - Generate a hook test file.

  - Generate a types file for a Typescript hook.

  - The file extensions depending on TypeScript installation:

    - Hook and test files are `.jsx` or `.tsx`.

    - Type files are `.js` or `.ts`.

- **Seamless integration with VS Code**

## Screenshots

## Instructions

### Download installation file

1. Open the [package folder](https://github.com/nhope123/zymble/tree/main/packages) and select the `zymble.vsix`.

2. Download and save the raw file to your local directory.

### Install Extension

1. Open `vscode`

2. Open the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.

3. Click the `Views and more Actions` menu to the right of the Extension refresh button.

4. At the bottom, click the `Install from VSIX`

5. Locate and select the `zymble-` installation file

6. Click install

7. View the extension by Typing `zymble` in the extension search

### Cloning the Repository

```sh

git clone https://github.com/nhope123/zymble.git

cd zymble

yarn install

```

### Running in Debug Mode

1. Open the project in Visual Studio Code.

2. Press `F5` to open a new window with your extension loaded.

### How to Run the Commands

1. From the Command Palette:

   - Open the Command Palette by pressing Ctrl+Shift+P.

   - Type the name of the extension / command (e.g., Zymble: Create Component) and select it from the list.

2. Pressing F1 and Typing the Name of the Command:

   - Press F1 to open the Command Palette.

   - Type the name of the extension / command (e.g., Zymble: Create Component) and select it from the list.

3. Right-Click the Workspace Folder Tree in a React or Prettier Project:

   - Right-click on the workspace folder in the Explorer view.

   - If the project is a React or Prettier project, the context menu will show options based on the isReactProject and noPrettierConfig contexts set by the commands.

### Package the Extension

1. Run `yarn package`

2. Locate extension file in `packages/` folder.

[MIT License](https://github.com/nhope123/zymble/blob/main/LICENSE.md)

**Enjoy!**