Automating templated file / folder structure creation in vscode

Automating a repetitive folder / file structure using a vscode extension

Photo by Pankaj Patel on Unsplash

Introduction

We have a shared component library, which houses our reusable generic components as well as reusable business components. Creating reusable components to be used across multiple products is one major part of our day to day workflow. We have implemented the component library as a independently versioned monorepo (using lerna). Since we work with components a lot, over the years we have discovered some standards / patterns that are required to be implemented every time we create a reusable component. Some of these include:

• creating a README file for the component
• creating the component.js file and component.css file
• creating a type definition (handwritten) index.d.ts file for the component
• creating a top level index.js inside the component folder for barrel export

Each of these files also have some repetitive patches across all the components. For example:

• the js file would always import React and PropTypes
• the README file has a particular format with component name as the title and 4 sections (Installation, Usage, Props, Example)

Since we are doing this a lot, and on a daily basis, we figured that it would be helpful if we can automate some of these repetitive things using a cli or some kind of a one click UI. This led us to explore templates / snippets in vscode. Since this was a one time thing, for a POC, we only limited our exploration to inbuilt functionality or extensions which can server just our purpose well. We cam across an extension which allows templated folder and file creations, and we ended up using that for our purpose.

Implementation:

This is the extension we ended up using: https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure

• Install the extension.
• Create a folder in your project root to keep all your templates. The name of the folder has to be .fttemplates
• Create a folder inside this .fttemplates folder, and add the template folder and file structure. For placeholders, use the special variables provided by the extension. For example,FTName is the name of that you provide when creating an instance of the template. You can provide existing transformers to this to get lowercase / uppercase and other transformations available for you to use inside your folder names, file names or file content.
• The extension makes some commands available for you when you right click on a folder inside your codebase, and on confirmation creates the templated folder structure inside this folder.

Image showing the custom commands available from the extension

This is the folder structure and the files we ended up creating for our use case:

• The React component js file:

// template-folder-name -> [FTName].js
import React from 'react';
import PropTypes from 'prop-types';
import "./[FTName].css";
function [FTName](props) {
}
[FTName].propTypes = {
}
[FTName].defaultProps = {
}
export default [FTName];

• The css file:

// template-folder-name -> [FTName].css
.[FTName] {
}

• The README file:

// template-folder-name -> README.md
# [FTName]
## Description

## Installation

## Props
| prop name | prop type | description |
| --------- | --------- | ----------- |
|           |           |             |
## Usage

• The barrel export index.js file

// template-folder-name -> index.js
import [FTName] from './[FTName]';
export default [FTName];

This is how the created component folder structure looks like:

Image showing the generated folder structure after using the custom menu option from the extension

Further Steps

• You can further customize the extension using a .ftsettings.json inside your template folder. This will, for example, allow you to add some custom variables that you can use inside the file content and names
• If you work with a team, you should commit the .fttemplates folder to git, as well as add the extension as a recommended extension for your project (You can do this from the extensions page). This will create / update the vscode/extensions.json which you should commit to git as well.

References:

GitHub - Huuums/vscode-folder-templates: Create your own Component structure with a simple click.

Folder Templates - Visual Studio Marketplace