stylelint-config-selleo v0.1.1
stylelint-config-selleo
Linter for styles, configurable with 3 variants:
- CSS & SCSS syntax
- BEM methodology
- SASS syntax
Installation
Target repo
Minimum Node.js version: 16
npm i --save-dev stylelint
npm i --save-dev stylelint-config-selleo
in the
package.json
add:"scripts": { "stylelint-config-selleo": "stylelint-config-selleo" }
run
npm run stylelint-config-selleo init
- select appropriate extensions
- in your project root directory
.stylelintrc.json
file will appear with previously selected extensions
If you use prettier
:
Create or update existing .prettierignore
following rule - ignore prettier for css, sccs and sass files - use stylelint by default
**/*.css
**/*.scss
**/*.sass
IDE setup
VSCode
- Install Stylelint plugin.
- Go to
Preferences > Settings
. - Search for
stylelint
. - Inside
Stylelint: Snippet
andStylelint: Validate
addscss
orsass
.
Autofix on file save
- Open VSCode settings in the
json
format - Paste following rule at the end of file
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
JetBrains (RubyMine, WebStorm)
- Go to
Preferences > Languages & Frameworks > Style Sheets > Stylelint
. - Click Enable.
- Inside Run for files enter
{**/*,*}.{css,scss,sass}
- without spaces between file extensions!
Autofix on file save
- Open WebStorm
Preferences > Tools > File Watchers
- Click
+/Add > <custom>
- Provide watcher name ie
stylelint-auto-fix
- Change
File type
toAny
- Set
Program
to$ProjectFileDir$/node_modules/stylelint/bin/stylelint.js
- Set
Arguments
to$FilePath$ --fix
- Set
Working directory
to$ProjectFileDir$
- Open
Advanced Options
and let onlyTrigger the watcher on external changes
checked - Save and Apply changes
Add External Tools
This is a workaround for this issue. It will
not work on file save, but you can instead run it by Right Click > External Tools - stylelint-auto-fix
.
1. Open WebStorm Preferences > Tools > External Tools
2. Click +/Add
3. Provide name ie stylelint-auto-fix
4. Set Program
to $ProjectFileDir$/node_modules/stylelint/bin/stylelint.js
5. Set Arguments
to $FilePath$ --fix
6. Set Working directory
to $ProjectFileDir$
7. Save and Apply changes
CLI / CI
Run npm run stylelint-config-selleo
to see all available commands:
fix-all Run auto fix for all changed files
fix-current Run auto fix for currently changed files
help Display help for stylelint-config-selleo.
init Initialize the Stylelint Selleo Config by selecting extensions
list-all List all styles issues
list-current List styles issues for currently changed files
plugins List installed plugins.