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

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"]
}

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.

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

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

1. Install the Stylelint extension
2. Get linting 🚀

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
  }
}

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"
  ]
}

• Error Lens to get inline error messages

⚠️ 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.