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

eralvarez/ffc