I’ve been using React, css modules, and styleguidst for creating modular, well documented webapps. Those tools are great, but you end up needing to write a lot of boilerplate:

1
2
3
4
5
6
my_component/
  index.js
  my_component.jsx
  my_component.css
  my_component.md
  my_component.spec.js

Creating the same set of files over and over again gets old fast. In rails, this problem is solved with rails generate. Yeoman advertises itself as a “Rails-inspired generator system” for node, so I went looking for some react specific yeoman generators. Unfortunately, most seemed designed for entire projects, not small chunks of boilerplate. I considered writing my own yeoman generator, but the api seemed overly complicated for what I wanted to do, which was to just copy and paste some files with a few variable replacements. Instead, I decided to use Mustache, as it’s simplicity would make it quick and intuitive to create new generators if I move to a different stack or need new boilerplate.

Mustache can’t copy and render whole directories on it’s own, so I made a utility called Genierator. It allows you to define a template with mustache that looks just like what you want your boilerplate to look like:

1
2
3
4
5
6
7
8
vars.js
template/
  {{file_name}}/
    index.js
    {{file_name}}.jsx
    {{file_name}}.css
    {{file_name}}.md
    {{file_name}}.spec.js

Almost done! Now we just need a way to create the boilerplate quickly while in vim. I typically add files through the nerdtree file menu, so I made a plugin (nerdtree-genierate-plugin) that adds a new menu option for genierate:

Gif

Now we’re set up to generate multiple pieces of boilerplate automatically from within vim. Hooray!