@soleil-se/stylelint-config

Stylelint config based on stylelint-config-standard-scss and stylelint-config-recess-order.

Prerequisites

A project using SCSS or CSS as styling language.

Installation

Install @soleil-se/stylelint-config and stylelint.

npm i @soleil-se/stylelint-config@3 stylelint@15 --save-dev

Create .stylelintrc.js in the root of the project containing:

.stylelintrc.js

module.exports = {
  extends: '@soleil-se/stylelint-config'
}

Visual Studio Code

The editor needs to be reloaded for changes to take effect.

Migration

Migration from version 2 to 3.

Update Stylelint to version 15 the config to version 3.

npm i stylelint@15 && npm i @soleil-se/stylelint-config@3

Visual Studio Code

The editor needs to be reloaded for changes to take effect.

VS Code

Install stylelint for VS Code.

Settings

Open settings.json and add the following settings:

settings.json

"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": [
  "css",
  "less",
  "postcss",
  "scss",
  "svelte",
  "vue"
],
// If you want autofix enabled
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
}

Other syntaxes

If other syntaxes than CSS or SCSS needs to be supported you need to setup a custom config with the settings needed.

Read more about syntax.

Less

To support an old legacy project still using Less install postcss-less

npm install postcss-less --save-dev
yarn add postcss-less --dev

Then add the following to stylelintrc.js

stylelintrc.js

module.exports = {
  extends: '@soleil-se/stylelint-config',
  overrides: [{
    files: '**/*.less',
    customSyntax: 'postcss-less',
  }],
};

CLI

Add the following to package.json and then adjust paths and file extensions.

package.json

{
  "scripts": {
    "stylelint": "npx stylelint ./path/to/css/**/*.css --allow-empty-input",
    "stylelint-fix": "npx stylelint ./path/to/css/**/*.css --fix --allow-empty-input"
  }
}

https://stylelint.io/user-guide/usage/cli