README

@bitfactory/stylelint-config

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

Installing
- PostCSS projects
- SASS projects
Turning off rules
CLI usage
Editor / IDE integration
- Visual Studio Code
- PhpStorm

:package: Installing

Include the config into your project:

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

Then install the dependencies that the config needs:

npx install-peerdeps --dev --extra-args="-E" @bitfactory/stylelint-config

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

module.exports = {
    extends: ['@bitfactory/stylelint-config'],
};

PostCSS projects

To use this config with a PostCSS project, set extends to the following:

module.exports = {
    extends: ['@bitfactory/stylelint-config/postcss'],
};

SASS projects

To use this config with a SASS project, also install the following package:

npm install stylelint-scss --save-dev --save-exact

And set extends to the following:

module.exports = {
    extends: ['@bitfactory/stylelint-config/sass'],
};

:firecracker: Turning off rules

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

module.exports = {
    extends: ['@bitfactory/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,scss,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

Install the Stylelint extension
Get linting :rocket:

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.

PhpStorm

Todo…

Usage no npm install needed!