Code Monkey home page Code Monkey logo

react-component-generator's Introduction

React component generator

A VS Code extension for generating new React component files with the following structure:

  • StartingComponent
    • /components
      • index.ts
      • /NewComponent
        • index.ts
        • NewComponent.tsx
        • NewComponent.stories.tsx (optional)
        • /tests
          • NewComponent.test.tsx

Features

Right click in the file editor or on a file in the explorer and click Generate React component to scaffold out a new React component with all the files you need.

Screen Shot of the contextual file explorer menu featuring items added by the extension

Right click in the file editor or on a file in the explorer and click Generate Storybook stories file to add a stories file to an existing component.

Settings

  • Language - Specifies if components should be generated in TypeScript or JavaScript.
  • Styles Language - Specifies what language will be used for styles.
  • Create Stories File - Specifies if a stories file should be generated with the component.
  • Use Index File - Specifies if the components folder should have an index file to export all of its components. Does not add or update the index file at app/components/index
  • Import React - Specifies if React should be imported in generated components and stories. The React import is not needed if your app is using the new JSX Transform.

Development

  1. Clone the repository with git clone https://github.com/andrewmcgov/react-component-generator.git
  2. Install dependencies by running yarn in the project folder
  3. With extension source open in VS Code, press F5 to open a new VS Code window with the extension running. F5 runs the code in .vscode/launch.json.
  4. The extension code starts in src/extension.ts.
  5. Check out the VS Code API documentation for more info about building extensions.

This extension was scaffolded with Yeoman. Feel free to fork and tweak to your liking!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.