@tresinternet/stylelint-config

This package contains the Stylelint configuration for default Web projects developed by TRES internet.

Installation

npm install @tresinternet/stylelint-config --save-dev

All required packages are installed automatically

Usage

.stylelintrc

Create a .stylelintrc.json-file with the following contents:

{
	"extends": [
		"@tresinternet/stylelint-config"
	]
}

Visual Studio Code

Use these settings in your project located in <project>/.vscode/settings.json:

{
	...
	"css.validate": false,
	"less.validate": false,
	"scss.validate": false,
	"stylelint.validate": [
		"css",
		"scss"
	]
}

As seperate task

Add the following command to the scripts-section of your package.json-file:

"stylelint": "stylelint \"src/stylesheets/**/*.{css,scss}\"",
"stylelint-fix": "stylelint \"src/stylesheets/**/*.{css,scss}\" --fix"

TailwindCSS

Still using Tailwind in your project? Overwrite the following rule in your .stylelintrc.json-file:

"scss/at-rule-no-unknown": [
	true,
	{
	"ignoreAtRules": [
		"extends",
		"tailwind",
		"screen",
		"layer",
		"responsive"
	]
	}
],

Rules

Rules are based on stylelint-recommended-standard-scss (which extends stylelint-config-standard). The following plugins are used:

• stylelint-scss
• stylelint-order
• stylelint-selector-bem-pattern
• stylelint-prettier

As of Stylelint v15, a lot of stylistic rules are deprecated. These are no longer included in this configuration.

Prettier is used to format the code. This is done by the stylelint-prettier plugin. The prettier configuration is based on the default configuration. Any changes to the prettier configuration are also defined in this configuration.

Rules are subject to change, depending on developer preferences.