Formatter
  • 1 Minute To Read
  • Print
  • Share
  • Dark
    Light

Formatter

  • Print
  • Share
  • Dark
    Light

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

To format files, Prettier is used.

Installation

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

Using formatter

To execute the formatter, do the following:

  1. Install the Node 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: [
    `**/*.(scss|css|less|js|ts|json|html)`,
],

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.
    Command to run the formatter is integrated into .travis.yml
- node ./frontend/libs/formatter
Important

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.

Was This Article Helpful?