Edit on GitHub

Formatter allows you to find and fix code style mistakes and keep your code more readable.

To format files, Prettier is used.


For details about how to install Formatter for your project, see the Formatter integration guide.

Using Formatter

To execute the Formatter, do the following:

  1. Install the Node.js modules:
npm ci
  1. Execute the formatter in:
  • validation mode:
npm run formatter
  • fix mode
npm run formatter:fix

File types

The default file types for formatting are:

  • *.scss
  • *.css
  • *.less
  • *.js
  • *.ts
  • *.json
  • *.html

To change the list of file extensions, adjust /frontend/settings.js:

formatter: [

Twig is not validated by Prettier. The existing Twig plugin can’t work with widgets and attributes.

Formatter config

The config for Prettier resides in the @spryker/frontend-config.prettier module.

To redefine the path for the config file, adjust /frontend/libs/formatter.js and use other options for Prettier:

const configPath = 'node_modules/@spryker/frontend-config.prettier/.prettierrc.json';

The Prettier formatter uses the ignore file /.prettierignore that includes directories and files where the formatter shouldn’t be executed.

CI checks and pre-commit hook

The Formatter is integrated into:

  • Pre-commit hooks. The function that executes Formatter before the commit resides in /.githook
- GitHook\Command\FileCommand\PreCommit\FrontendFormatterCommand
  • Travis. The command to run the Formatter is integrated into .travis.yml
- node ./frontend/libs/formatter

If you commit without the pre-commit hooks, you should run the Formatter manually to avoid issues with Travis.

Pre-commit hooks weren’t integrated into B2B and B2C demo shops, only in the Shop Suite.