Home

Awesome

Build Status Dependencies

Project Home

Gallery Demo

Gallery Demo

What's this?

Why?

Is this safe - ready to use ?

Yes! This project is not touching the code - it delegates all formatting to the very mature tools: eslint and prettier

Install & using in command line

You can install the tool globally:

 $ npm install -g prettier-eslint-gallery
 $ prettier-eslint-gallery --style standard --mode default --input "./src/**/*.js" --output ./src-formatted

Or locally:

 $ npm install --save-dev prettier-eslint-gallery
 $ node node_modules/prettier-eslint-gallery/src --style standard --input "./src/**/*.js" --output ./src-formatted

IMPORTANT if you want to format input files don't pass any --output argument and input files will be re-written

Using custom eslintrc

If you want to use your own custom .eslintrc file you can pass its path in --eslint-path instead of --style argument. In this case the file name needs to be eslintrc and and you are responsible of installing its dependencies:

  prettier-eslint-gallery --eslint-path ./eslintrc.js --input "./src/**/*.js"

nodejs API

Format files

Format several files and put the formatted versions in a separate folder:

const formatter = require('prettier-eslint-gallery')
const config = {
  input: './src/**/*.js',
  output: './src-formatted',
  style: 'airbnb',
};
formatter(config);

IMPORTANT if you want to re-write input files just don't pass the output property

Format a JavaScript code string

  const formatter = require('prettier-eslint-gallery')
  let config = {
      source: `var arr = [1,2,3].map(function(a){return a+1})`,
      style: 'walmart',
  }
  let result = formatter(config)

Configuration properties

The following are configuration properties that works both for the node.js API and for the CLI. In the case of the command line make sure you --property-name instead of --propertyName:

NameDescription
inputpath to file or glob of files to format.
outputoutput folder where to put formatted files. If ommited input files will be overrided
styleOne of popular styles like airbnb, eslint, fbjs, google, standard, walmart, etc.
eslintPathpath to a custom eslintrc. style will be ignored and user is responsible of installing custom eslint config dependencies.
debugif true it will print debug info in stdout
buildGallerywill build gallery from input instead of formatting.
modesee Modes section

Modes

Generate your own gallery

If you want to generate the gallery using your own project's files and input to see how they will look like, just choose some files from your project and put them in folder my/sample/folderWithJsFiles and running the following command will generate a working gallery in gallery-output-folder. You need to open the folder using a static server since the application perform ajax requests:

 $ prettier-eslint-gallery --build-gallery --input my/sample/folderWithJsFiles --output gallery-output-folder
 $ static-server gallery-output-folder
 $ firefox  http://localhost:9080/gallery/index.html

Editors extensions

Research

Useful commands

Run tests and regenerate all output files:

npm test

Generate output and gallery:

 $ npm test
 $ rm gallery/index.html
 $ node src/gallery-generator/index
 $ static-server .
 $ firefox http://localhost:9080/gallery/index.html

issues / TODO