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