Formatter

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

To format files, Prettier is used.

Installation

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

2. 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)`,
],

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