Automating templated file / folder structure creation in vscode
Automating a repetitive folder / file structure using a vscode extension
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 importReact
andPropTypes
- 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.
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].jsimport 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.jsimport [FTName] from './[FTName]';export default [FTName];
This is how the created component folder structure looks like:
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 thevscode/extensions.json
which you should commit to git as well.