Integrate Formatter

Edit on GitHub

Follow the steps below to integrate Formatter into your project.

1. Install the dependencies

To install the dependencies:

  1. Install Prettier:
npm install prettier@2.0.x --save-dev
  1. Install config for Prettier:
npm install @spryker/frontend-config.prettier --save-dev
  1. Install the CLI parser:
npm install commander@4.0.x --save-dev

2. Update the scripts

To update the scripts:

  1. Add formatting file extensions to the global settings /frontend/settings.js:
>    ....

    formatter: [
  1. Add the formatter script to /frontend/libs/formatter.js:
const { spawn } = require('child_process');
const { globalSettings } = require('../settings');
const commandLineParser = require('commander');
const configPath = 'node_modules/@spryker/frontend-config.prettier/.prettierrc.json';

    .option('-f, --fix', 'execute stylelint in the fix mode.')
    .option('-p, --file-path <path>', 'execute stylelint only for this file.')
    .option('-i, --ignore-path <path>', 'path to prettier ignore file.')

const mode = commandLineParser.fix ? '--write' : '--check';
const filePaths = commandLineParser.filePath ? [commandLineParser.filePath] : globalSettings.formatter;
const ignorePath = commandLineParser.ignorePath ? commandLineParser.ignorePath : './.prettierignore';

    ['prettier', '--config', configPath, '--ignore-path', ignorePath, mode, ...filePaths],
    { stdio: 'inherit' }

Check here for the example file.

  1. Adjust the /package.json scripts:
"scripts": {
    "formatter": "node ./frontend/libs/formatter",
    "formatter:fix": "node ./frontend/libs/formatter --fix"
  1. Add the ignore file /.prettierignore:
# Ignore paths