code-gen README

This simple extension helps developers in their day to day life by simplifying coding. It provides two functionality:

User can select a piece of JavaScript code and the AI provides Typescript suggestions for it.
User can also provide detailed instructions in English for writing a React component or functions and the AI would generate a equivalent Typescript code.

All the code generated uses latest ES6 syntax.

Features

It works as a guide for folks learning Typescript or React and provides them with different options in typescript.

User can also write React code in Typescript from scratch, by giving simple instructions in English and using keyboard shortcut of ctrl+atl+g. The default uses styled component for CSS if u specify any styling in your command but you can instruct it to give you CSS modules.

<---Sample Input Prompt --->

• Write a react component avatar that takes user name and image URL.
• Renders the image url and name in a two column layout in big screens and in one column in smaller screen.

<---Sample Output --->

import React from "react";
import styled from "styled-components";

type AvatarProps = {
  userName: string,
  imageUrl: string,
};

const Avatar = ({ userName, imageUrl }: AvatarProps) => {
  return (
    <Container>
      <Image src={imageUrl} alt={userName} />
      <Name>{userName}</Name>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
  @media (min-width: 768px) {
    flex-direction: row;
  }
`;

const Image = styled.img`
  width: 50px;
  height: 50px;
  border-radius: 50%;
`;

const Name = styled.div`
  font-size: 1.2rem;
  font-weight: bold;
`;

export default Avatar;

Or User can also select a piece of JavaScript code that needs to be converted in Typescript by using keyboard shortcut ctrl+atl+c

<--- Sample Input Prompt --- >

const Avatar = ({ userName, imageUrl }) => {
  return (
    <div>
      <image src={imageUrl} alt={userName} />
      <h2>{userName}</h2>
    </div>
  );
};

<--- Sample Output --->

type AvatarProps = {
  userName: string,
  imageUrl: string,
};

const Avatar = ({ userName, imageUrl }: AvatarProps) => {
  return (
    <div>
      <image src={imageUrl} alt={userName} />
      <h2>{userName}</h2>
    </div>
  );
};

The extension is configured to only recognize JavaScript and write React from scratch, so the command in plain English should have React keyword or the code should be in JavaScript. Most cases the AI might not give you anything, but if you are lucky it might produce something.

Extension Settings

This extension contributes the following command that could be found by shift+ctrl+p in windows or shift+cmd+p in mac.

• Convert To TS: This commands takes the selected text and gets typescript suggestions for it. The extension also provides a key shortcut for the following command: ctrl+alt+c.
• Code Generator: This command takes the selected piece of English instructions and generates a React Typescript code for it. The extension also provides a key shortcut for the following command: ctrl+alt+g.

Known Issues

Release Notes

Users appreciate release notes as you update your extension.

0.0.1

• Added the Extensions code

0.0.2

• Updated Readme doc by adding sample for the two functionality.

Initial release of code-gen.

Enjoy!