ffc

Fast File CLI

CLI tool to generate new files based on teams best practices.

Getting Started

Install ffc:

> npm install -g ffc

Usage

Command	Alias	Description	Default	Example
generate	g	It generates a file, <component> is what you define in your config file	n/a	ffc generate <component> src/components/thisIsAComponent
flat	f	Flat doesn't create container folder	false	ffc g <component> src/components/thisIsAComponent --flat
help	n/a	It shows all the available commands	n/a	ffc generate --help
help	n/a	It shows usage help	n/a	ffc --help

Setup

First, create your schematic folder in your project's root folder. Inside that folder, create your component file with it's files.

Example:

package.json
src/
schematic/
    component/
        {name}.js
        ...
...

Inside schematic/component/ you can add any number of files with any file extension.

Example:

package.json
src/
schematic/
    component/
        {name}.js
        {name}.scss
        {name}.desktop.scss
        {name}.tablet.scss
        {name}.mobile.scss
...

Now, you need to write your ffcconfig.json in your project's root folder.

ffcconfig.json

This is a required config file that contains:

{
    "commands": [
        {
            "command": ["component", "c"],
            "schematic": "schematic/component",
            "folderStyle": "camel"
        },
        ...
    ]
}

Folder/File styles

Name	Style	Example
Lower Case		thisisaexample
Camel Case	camel	thisIsAExample
Pascal Case	pascal	ThisIsAExample
Snake Case	snake	this_is_a_example
Kebab Case	kebab	this-is-a-example

Templates

ffc uses a very simple template system that works on file name and file content. The only available variable atm is {name:<style>}.

All the available options are: {name}, {name:camel}, {name:pascal}, {name:snake} and {name:kebab}.

So, if we run: ffc generate component src/components/thisIsAComponent

• {name}.js will become thisisacomponent.js
• {name:camel}.js will become thisIsAComponent.js
• {name:pascal}.js will become ThisIsAComponent.js
• {name:snake}.js will become this_is_a_component.js
• {name:kebab}.js will become this-is-a-component.js

This also works for file contents, React component example:

// {name:pascal}.js
import React from 'react';
 
import './{name:snake}.scss';
 
class {name:pascal} extends React.Component {
    render() {
        return (
            <div className="{name:pascal}">
                <span>{name} works</span>
            </div>
        );
    }
}
 
export default {name:pascal};

This will become:

// ThisIsAComponent.js
import React from 'react';
 
import './this_is_a_component.scss';
 
class ThisIsAComponent extends React.Component {
    render() {
        return (
            <div className="ThisIsAComponent">
                <span>thisisacomponent works</span>
            </div>
        );
    }
}
 
export default ThisIsAComponent;

How to Contribute

All pull requests are welcome