Welcome Blazingly Fast Boilerplates!

I decided to write the VS Code extension to help me with creating boilerplates. In this blog post, I share my thoughts about how exactly the extension should solve my problem. Here’s what I came up with.

The main objective is to create the boilerplate in the fastest way possible, with minimum effort from me. Let’s start from the vocabulary*.

What is a boilerplate?

It is an entity. It is created from the template predefined by the user. It can be a single file OR a folder with many files.

So, below’s how boilerplate structure can look like:

$$NAME.tsx

OR

$$NAME (folder)
- $$NAME.tsx
- $$NAME.styled.ts
- index.ts

And we can see right away that we need variables.

Should they be hard coded by the extension or defined by the user?

I thought it will be a better option to leave it to the user and give an opportunity to define many variables. User's gonna need variables to use them in the filenames and in the file content. So the template file can have a name $$NAME.tsx and has the following content:

export interface $$NAMEProps {

}

const $$NAME = ({}: $$NAMEProps) => {
	return (
	  
	);
};

export default $$NAME;

The extension is gonna replace variable placeholders with values provided by the user and create a boilerplate. Simple and I like it.

Okay, cool. What’s next?

I thought it will be useful to give the user an opportunity to choose where to place the cursor, so they can start writing the code right after creating the boilerplate. I decided to have $1 as a place for the cursor, so the file content will be as following:

export interface $$NAMEProps {

}

const $$NAME = ({}: $$NAMEProps) => {
	return (
	  $1
	);
};

export default $$NAME;

Extension functionalities

By that moment I saw three main functionalities of the extension:

1. Creating the boilerplate.
2. Adding new template.
3. Adding new variable.

Let’s take a walk through one by one starting from the last one.

Adding new variable

I thought that variables should be defined globally, for all templates. I think in 80% of cases, there will be one variable, like $$NAME and there’s no point to define it for each template.

Variables are needed, so the extension knows what input to ask from the user while creating the boilerplate.

For example, if we have a template component and the user uses $$NAME and $$FILENAME variables there, the extension is gonna ask to provide these two values, while creating the boilerplate.

Also, we can have 5 globally defined variables but want to use only 2 of them for some boilerplate. Will the extension ask to provide all 5 variables? No. That’s why we need to choose which variables to use while adding a new template.

Adding new template

This is the process of adding a new template, from which we gonna create the boilerplates. This will be the most advanced process for now. Here the user is gonna provide the following data:

• template name (ex: component or blog-page)
• to choose which variables the extension should ask while creating the boilerplate
• the path, where boilerplate should be created
• should the boilerplate be created in a folder?
• If it’s created in a folder, then what files should be created there? The user should provide the filenames. Variables can be used here. (ex: $$NAME.component.tsx, $$NAME.styled.tsx, index.ts)
• If it’s created in a folder and there’re many files, which file should be opened after the boilerplate is created?
• should we make changes to another file? (like, to global index.ts to export all components from the components folder, for example). If yes, then the user should choose the file & provide the pattern that should be added to the file (ex: \nexport { default as $$NAME } from "./$$NAME";)

That’s all the necessary data we need from the user to create a template. After it, the extension is gonna create a new folder with the template files and config. The user should manually open the template files and write the content as I mentioned above.

Creating the boilerplate

If adding a new template was the most advanced process, creating a boilerplate is the most interesting one. It is the reason this extension was created. Okay, how it will look like? The user provides the following data:

• Choosing from what template the boilerplate should be created;
• Provide values for the variables.

And that is it!

The boilerplate will be created by the extension, the file will be opened and the user can continue the work with all boilerplate handled. Blazingly fast!

Awesome feeling

Once I wrote the functional requirements I started writing the code. Since I have never created VS Code extension before I started from the API documentation.

I am happy that developer experience is an important part of a product now and companies invest their money in it. The VS Code guide “Your first extension” shows step by step what to do to get started. I simply followed it and couple of minutes later could display a “Hello world” message to the user! Isn’t that cool?

It is an awesome feeling when the amount of problems you can solve is growing.

Couple of days later I was ready with the first version of the Blazingly Fast Boilerplates extension.

Girl, it feels amazing! I did it. Finally, I finished the personal project. Moreover, it solves a real problem of mine! Of course, I’m not 100% happy with the code, but the only thing that matters is it’s finished and it’s working.

Done better than perfect.

Conclusion

I think I’m gonna continue working on it: adding new features, fixing bugs. I have not had an opportunity to test the BFB extension yet, so I’m sure there’s a place to put more work into.

I achieved the goal to create a proof of concept ASAP. My vision of creating boilerplates is possible as VS Code extension and I can create boilerplates blazingly fast. I’m happy.

Now it’s time to test it.

If you wanna use the Blazingly Fast Boilerplates extension, here’s a link to github page. Since, BFB is not on the vs code marketplace, feel free to download it and install it manually. It’s very easy, you'll find the instruction in README.md.

Thank you for reading!

Cheers!