@etchteam/stylelint

The stylelint config that we use at Etch

Install

npm i -D stylelint prettier @etchteam/stylelint-config

Usage

echo"module.exports = { extends: ['@etchteam/stylelint-config'] };"> stylelint.config.cjs

With lint-staged

New project

Run the following:

npm i -D husky lint-staged
echo"module.exports = { '*.{css,scss}': 'stylelint --fix' };"> lint-staged.config.cjs
npx husky init
echo"npx --no-install -- lint-staged"> .husky/pre-commit

Existing project with husky and lint staged

Add the following to your lint-staged config:

'*.{css,scss}': 'stylelint --fix'

Usage with VSCode

New project with no VSCode config

Run the following:

mkdir .vscode
echo"{ \"editor.formatOnSave\": false, \"editor.codeActionsOnSave\": { \"source.fixAll.stylelint\": true } }"> .vscode/settings.json

Exisiting project with VSCode config

Add the following to .vscode/settings.json:

"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}