Introducing Squirt-CLI

Squirt’s goal is to save you time when developing, as well as increase consistency across development teams.

Photo by sydney Rae on Unsplash

squirt-cli

Everyone has those words that kind of make you cringe when you hear them said out loud… “Squirt” is one of them (for me at least). But this tool, inspired by ReactMan, gives the word new meaning.

Our dev team found an opportunity to speed up the process in which we create new React components. All of the right-clicking > create new folder > name folder > right-click > create Component.js file > right click > create Component.module.css file > right click > create index.js file was getting old. On top of that, you then have to go in and write the necessary boiler-plate code for those files.

Squirt was developed to streamline all of that.

From the docs:

Install via NPM/Yarn/etc

npm install -g squirt-cli

Make a .squirtrc config file from the example below. You will also need some templates files.

Go to the directory where you want to create new files, then run squirt in the terminal.

Squirt needs at least two files to get started, a configuration file and a template. While useful in many situations, Squirt was built with React in mind. The following example will show how Squirt can be used to generate a set of files for a React component.

Your .squirtrc file could look something like:

{
    "templatesPath": "./squirtTemplates",
    "templates": {
        "component": {
            "files": {
                "component/index.js": "{%=o.componentName%}/index.js",
                "component/component.js": "{%=o.componentName%}/{%=o.componentName%}.js",
                "component/component.module.css": "{%=o.componentName%}/{%=o.componentName%}.module.css"
            },
            "script": [{
                "name": "componentName",
                "message": "Component name",
                "required": true,
                "type": "input"
            }, {
                "name": "rootStyleClassName",
                "message": "Root style class name",
                "default": "root",
                "type": "input"
            }]
        }
    }
}

After installing squirt-cli and setting up your .squirtrc file, you will then create a squirtTemplates directory inside your project. This might look like:

squirtTemplates/
  component/
    index.js
    component.js
    component.module.css

You can go to the docs to see what these individual files would look like.

After you’ve got everything set up, all you have to do in your terminal is cd into the directory where you want to create your files, and then run squirt. The CLI will walk you through setting everything up. It asks for which template you want (defined in your .squirtrc file), the name of your component, the name of your root css class for your module.css file and then you have a gift-wrapped folder with everything you need.

Squirt saves my team a lot of time! Let me know what you think.

Happy Squirting!