@radum Stylelint config

Personal recommended shareable config for stylelint.

It turns on all the possible errors rules within stylelint based on my own CSS styleguide.

Use it as is or as a foundation for your own config. You can extend or clone and change.

• @radum Stylelint config
  • Usage
    • Installation
    • Extending the config
      • Stylistic
    • Provide a defineConfig function for stylelint.config.js files
  • Complementary tools
    • Stylelint configs and plugins used
    • Editor plugins
    • Find stylelint rules
  • Changelog

[!WARNING] Please keep in mind that this is a personal config with a lot opinions. Changes might not always be pleased by everyone and every use cases.

If you are using this config directly, I'd suggest you review the changes everytime you update. Or if you want more control over the rules, always feel free to fork it. Thanks!

Usage

Installation

pnpm install -D @radum/stylelint-config stylelint

And create stylelint.config.js in your project root:

import radum from '@radum/stylelint-config';

export default radum();

or if you are working on a Scss file:

import radum from '@radum/stylelint-config';

export default radum({
	scss: true
});

This will set the customSyntax to postcss-scss and add the stylelint-scss plugin + all my rules.

Extending the config

The first argument is an object with the following options:

• sccs: boolean - Enable SCSS rules. Default is false.
• stylistic: boolean - Enable stylistic rules. Default is true.
• order: boolean - Enable order rules. Default is false.

The second argument is an Stylelint config object. You can use it to disable or enable rules. Add new plugins or change the default settings. This will be merged with the default config.

// stylelint.config.js
import radum from '@radum/stylelint-config';

export default radum(
	{
		scss: true,
		stylistic: false,
		order: true,
	},
	{
		rules: {
			'scss/at-if-no-null': null,
		},
	}
);

This will disable the scss/at-if-no-null rule and enable the scss and order rules + their own plugins.

Stylistic

The stylistic rules are based on the @stylistic/stylelint-plugin plugin and are enabled by default.

In order to customize the stylistic rules, you can disable them by setting the stylistic option to false and then add the rules you want to enable or pass an object.

// stylelint.config.js
import radum from '@radum/stylelint-config';

export default radum(
	{
		stylistic: {
			indent: 'tab',
			quotes: 'double',
			maxLineLength: 120
		}
	}
);

Provide a defineConfig function for stylelint.config.js files

If you are using the stylelint-define-config package, you can provide a function that will be used to define the config.

pnpm install -D stylelint-define-config @stylelint-types/stylelint-scss @stylelint-types/stylelint-stylistic @stylelint-types/stylelint-order

import radum from '@radum/stylelint-config';
import { defineConfig } from 'stylelint-define-config';

/// <reference types="@stylelint-types/stylelint-scss">

export default radum({
	scss: true
}, defineConfig({
	rules: {
		'property-no-unknown': null
	}
}));

Complementary tools

Stylelint configs and plugins used

• https://github.com/stylelint/stylelint-config-recommended

• https://github.com/stylelint/stylelint-config-standard

• https://github.com/stylelint-scss/stylelint-config-recommended-scss

• https://github.com/stylelint-scss/stylelint-config-standard-scss

• https://github.com/stylelint-stylistic/stylelint-stylistic

• https://github.com/stylelint-scss/stylelint-scss

• https://github.com/hudochenkov/stylelint-order

Editor plugins

• Ale: A Vim plugin that supports stylelint.
• Flycheck: An Emacs extension that supports stylelint.
• linter-stylelint: An Atom plugin for stylelint.
• SublimeLinter-stylelint: A Sublime Text plugin for stylelint.
• SublimeLinter-contrib-stylelint_d: A Sublime Text plugin for stylelint that run's on daemon.
• vscode-stylelint: A Visual Studio Code extension for stylelint.
• WebStorm: Version 2016.3 onwards has built-in support for stylelint.

Find stylelint rules

Find stylelint rules that are not configured in your stylelint config. This is useful to see what else is new and what is deprecated or updated.

Running this in your root folder will show the list.

npx stylelint-find-rules

More info here https://github.com/alexilyaev/stylelint-find-rules

Changelog