@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:

// NOTE: for now this does not work with ESM style modules, somehow `export default` gives errors.
// NOTE: it looks like this file is not checked by eslint with .cjs extension. For now keep it at .js.

/* eslint-disable-next-line unicorn/prefer-module */
module.exports = {
    extends: ['@bitfactory/stylelint-config'],
};

PostCSS projects

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

npm install postcss-html --save-dev --save-exact

And set extends to the following config:

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

The project does not have to use the customSyntax and overrides for postcss anymore. This is included in the config.

PostCSS+SCSS projects

To use this config with a PostCSS with SCSS/SASS project, also install the following packages:

npm install postcss-html postcss-scss --save-dev --save-exact

And set extends to the following config:

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

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 config:

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:

.selector {
    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 '**/*.css'",
    "stylelint:fix": "npm run stylelint -- --fix"
  }
}

You can run the commands with:

$ npm run stylelint
$ npm run stylelint:fix

With SCSS use:

{
  "scripts": {
    "stylelint": "stylelint '**/*.scss'",
    "stylelint:fix": "npm run stylelint -- --fix"
  }
}

With Vue add:

{
  "scripts": {
      "stylelint:vue": "stylelint '**/*.vue'",
      "stylelint:vue:fix": "npm run stylelint:vue -- --fix"
  }
}

You can run the commands with:

$ npm run stylelint:vue
$ npm run stylelint:vue: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:

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…

Stylelint 15 & upcoming version 16

Stylelint is fixed on version 15.x.x because in version 16.x.x all the deprecated rules are removed and can not be used at all.

See the issue Stylelint v16 + Prettier config needed on this repository in GitHub.