/stylelint-config-roboleary

My stylelint config for linting CSS and SCSS. You can use it along side Prettier without conflicts.

Primary LanguageJavaScript

stylelint-config-roboleary

My stylelint config for linting CSS and SCSS. You can use it along side Prettier without conflicts.

It includes the following:

Rules changed

  • declaration-empty-line-before: Effectively turn off the rule through ignore option. This clears the way for the ordering plugin to add blank lines.
  • plugin/declaration-block-no-ignored-properties: This rule needs to be set to true to enable the plugin.

Usage

  1. Install this package along with stylelint npm install --save-dev stylelint-config-roboleary stylelint as devDependencies.

  2. Create a stylelint config in your project directory e.g. .stylelintrc. Add the following to the file:

    {
      "extends": ["stylelint-config-roboleary"]
    }
  3. You can add scripts to your package.json to lint and fix your code from the command-line:

    {
         "scripts": {
           "lint": "stylelint **/*.{css,scss}",
           "lint:fix": "npm run style-lint -- --fix",
         }
    }
  4. Additionally, there are integrations for code editors. I use the stylelint extension for VS Code.

Configuration in VS Code

If you want to use stylelint and Prettier in VS Code, I recommend installing these 3 extensions: stylelint, Prettier, and Format Code Action to enable Prettier to be run as a code action.

To format and lint CSS/SCSS code on save, you can update your user settings with the following:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": [
    "source.formatDocument",
    "source.fixAll"
  ],
}

Show gratitude

If this helped you, please star the repo to help others find it. 🌟

You can make a donation to support me to make more great open-source software and tutorials. 🙏