SCSS linter

Last updated:
Edit on GitHub

SCSS linter allows you to find and fix code style mistakes. It helps a team follow the same standards and make code more readable.

To analyze and fix existing SCSS files, Stylelint is used.

Installation

For details about how to install the SCSS Linter for your project, see the SCSS linter integration guide.

Using SCSS Linter

To execute the SCSS Linter, do the following:

  1. Install the Node.js modules:
npm ci
  1. Execute the SCSS Linter in:
  • validation mode:
npm run yves:stylelint
  • fix mode:
npm run yves:stylelint:fix

SCSS Linter config

The config for Stylelint resides in the @spryker/frontend-config.stylelint module.

To redefine the path for the config file, adjust /frontend/libs/stylelint.js and use other rules for the SCSS Linter.

configFile: `${globalSettings.context}/node_modules/@spryker/frontend-config.stylelint/.stylelintrc.json`,

The SCSS Linter also uses the ignore file /.stylelintignore that includes directories and files where the SCSS linter shouldn’t be executed.

SCSS Linter rules related to formatting aren’t included in the stylelint config to avoid duplication with the Prettier rules.

CI checks and the pre-commit hook

The SCSS Linter is integrated into:

  • Pre-commit hooks The function that executes the SCSS Linter before the commit resides in /.githook:
- GitHook\Command\FileCommand\PreCommit\StyleLintCommand
  • Travis Command to run the SCSS Linter is integrated into .travis.yml
- node ./frontend/libs/stylelint
Important

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

Pre-commit hooks are integrated only into the Shop Suite and are not integrated in the B2B and B2C Demo Shops.