Configured Stylelint package

[YaroslavChuiko]

Configured Stylelint package

1. Installed packages:
   • stylelint - A mighty CSS linter that helps you avoid errors and enforce conventions.
   • stylelint-config-standard-scss - The standard shareable SCSS config for Stylelint.
   • stylelint-prettier - Runs Prettier as a Stylelint rule and reports differences as individual Stylelint issues.
   • postcss - added as an devDependency to fix the error shown on the screenshot below

2. Configuration:

   • Added basic linting rules for SCSS/CSS properties with package stylelint-config-standard-scss, you can find the full list of lining rules here

3. Integration:

   • Updated lint and lint-fix scripts in package.json to run Stylelint checks, updated lint-staged script so now stylelint checks on the pre-commit hook and during continuous integration pipeline
   • Ensured Stylelint is integrated with Prettier with the help of stylelint-prettier package.

4. Testing:

   • Tested the Stylelint setup by running it against our existing SCSS/CSS files.
   • Fixed all linting errors that arose to ensure the codebase complies with the new linting rules.

IDE Extension

If you use VS Code and want real-time validating style files with Stylelint, you can install the official Visual Studio Code extension for Stylelint. After installation, you must add SCSS validation because only CSS and PostCSS are Validated by Default. You can add this config to your VS Code config file.

{
  "stylelint.validate": ["css", "scss"]
}

[sonarcloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud