Speed ​​up development in VSCode

link to the screencast. I tell plus or minus the same thing, but exciting and embarrassing.

vscode component creator
vscode component creator

background

But first, let’s get acquainted, My name is Dima. I work as a full stack developer in a trading company. I run services on nestjs, and the front on nextjs. A little devopsyu and very carefully poke into the python.

Recently I ran into the problem of being tired of creating folders, subfolders with the same structure. For example, the simplest React component:

∟ComponentName
  ∟ComponentName.tsx
  ∟ComponentName.props.ts
  ∟ComponentName.module.css
  ∟index.ts

It is not enough to create files, you still need to register the props interface, import it into the tsx component, register default exports, import styles and much more. Tired…

In general, laziness is the engine of progress, so I decided to dig into the marketplace and find something that will do all this for me. I couldn’t find anything suitable (maybe I was just looking badly), something didn’t suit me all the time. Either the extension was tied strictly to the engine, or the structure was unchanged, or the work was generally incomprehensible. Since I did not find a comfortable bike for myself, I decided that I would weld my own.

Actually TA-DAH!!! (we play the sounds of fanfare in the head :)). for my first attempt at open source.

Briefly

Q: Why?

A: Because laziness!

Q: What does it do?

A: Creates a file structure with the necessary content.

Q: What is better than others?

A: Here we are already bending our fingers. Not tied to the language and framework. You can create your own templates. There can be any number of templates. Each project has its own template. Can create both flat and deep structures. He also knows how to write in different styles (camel case, pascal case, kebab case, etc.).

First pattern

If you’ve read this far, you’d probably like to give it a try. Let’s go through the expansion options together.

First of all, after installing the extension, you need to download one of the suggested templates or create your own. In order to download the template, press Ctrl/Cmd + Shift + P, and in the pop-up menu, enter: Component Creator: Download Template (there are not many templates yet, we will gradually replenish).

But this is not our way. We will create our own template for React components!

To begin with, you need to create a .vscode/cch-template directory in the root of the project. This is the default directory where templates will be taken from. In it we will create a directory called React FC, this will be the name of our template. In the example, let’s try to recreate the structure described at the very beginning of the post.

Inside the React FC folder, create another one called {{pascalCase}} (which will replace the name of the component in the pascal case format). Next, in this folder, create a file structure that will look like this:

template
template

Filling the files:

/* {{pascalCase}}.module.css */
.wrapper {
}
/* {{pascalCase}}.props.ts */
import { DetailedHTMLProps, HTMLAttributes } from 'react';

export interface {{pascalCase}}Props extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
/* {{pascalCase}}.tsx */
import React, { FC } from 'react';
import { {{pascalCase}}Props } from '.';
import styles from './{{pascalCase}}.module.css'

export const {{pascalCase}}: FC<{{pascalCase}}Props> = (props) => {
  return (<div className={styles.wrapper} {...props}>
    {{pascalCase}} component is mounted!
  </div>);
};
/* index.ts */
export * from './{{pascalCase}}';
export * from './{{pascalCase}}.props';

OK it’s all over Now. The template is ready!

  1. Select the required directory, right-click on it;

  2. In the context menu, select the “New Component” item;

  3. Enter the name of the component separated by a space;

  4. Enjoy your own superiority 🙂

result
result

As you already understood, constructions like {{pascalCase}} {{camelCase}} and so on are needed in order to insert the converted component name into the file name or structure. More information about all formatting styles can be found in the description of the extension itself.

As a result, by creating several of these templates for yourself, you can standardize and greatly speed up development both on the front and back. Plus, as you have already noticed, there is no binding on languages ​​and frameworks. In the same way, you can create structures for Python, Angular, Vue, etc.

If you have any ideas on how to modify or rework a component, I will always be happy to discuss it in the comments. As I already wrote, this is my first open-source project, so I will be grateful for your stars and any feedback is welcome! 🙂

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *