@zeebats/stylelint-config

This is a shareable config for Stylelint. All the rules and configurations are already set. Rules can be overridden if needed.

• Installing
• Turning off rules
• CLI usage
• Editor / IDE integration
  • Visual Studio Code
    • Autofix
    • File Associations
    • Additional Extensions

:package: Installing

Include the config into your project:

npm install @zeebats/stylelint-config --save-dev --save-exact

In your project, create a .stylelintrc.json file with the following contents:

{
  "extends": ["@zeebats/stylelint-config"]
}

:firecracker: Turning off rules

To turn off a rule, you can set the value of the rule to null in your .stylelintrc.json file:

{
  "extends": ["@zeebats/stylelint-config"],
  "rules": {
    "declaration-no-important": null
  }
}

Or when you only need to turn off a rule for a specific line, use the /* stylelint-disable-line */ comment, followed by the rule:

color: #fff !important; /* stylelint-disable-line declaration-no-important */

More about disabling Stylelint rules can be found here.

:rocket: CLI usage

To use Stylelint in the command-line, add the following scripts to your projects package.json:

"scripts": {
  "stylelint": "stylelint 'path/to/your/assets/**/*.{css,vue}'",
  "stylelint:fix": "npm run stylelint -- --fix",
}

You can run the commands with:

npm run stylelint
npm run stylelint:fix

:pencil2: Editor / IDE integration

For Stylelint to work, you need to set up your editor / IDE.

Visual Studio Code

1. Install the Stylelint extension
2. Get linting :rocket:

Autofix

If you want Visual Studio Code to autofix your code on save, add this snippet to your settings.json file:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

File Associations

The Stylelint extension only lints CSS and PostCSS files out of the box. If you want to lint other files like .vue, add this snippet to your settings.json file:

{
  "stylelint.validate": [
    "css",
    "postcss",
    "vue"
  ]
}

Additional Extensions

• Error Lens to get inline error messages

:warning: If you have the Prettier extension enabled, make sure to disable the extension for your project's workspace. This is because Prettier's rules will conflict with ours.