stylelint
Advanced tools
Stylelint is a powerful, modern linter that helps you avoid errors and enforce consistent conventions in your stylesheets. It is configurable and supports the latest CSS syntax as well as CSS-like syntaxes, such as SCSS.
Linting CSS files
This command will lint all CSS files in the 'src' directory and its subdirectories. It will check for errors and code quality issues based on the rules defined in the configuration.
"stylelint 'src/**/*.css'"Fixing CSS files
This command will not only lint the CSS files but also attempt to fix any fixable issues, such as formatting inconsistencies, automatically.
"stylelint 'src/**/*.css' --fix"Custom configuration
This JSON represents a custom Stylelint configuration object where specific rules are defined, such as disallowing invalid hex colors, setting indentation preferences, and enforcing no leading zero for numbers.
{ "rules": { "color-no-invalid-hex": true, "indentation": [2, { "except": ["block"] }], "number-leading-zero": "never" } }Extending configurations
This JSON represents a Stylelint configuration that extends a shared configuration, in this case, 'stylelint-config-standard', which is a popular set of rules that enforce common stylistic conventions.
{ "extends": "stylelint-config-standard" }Using plugins
This JSON represents a Stylelint configuration that includes a plugin, 'stylelint-scss', which adds SCSS-specific linting rules to Stylelint. The configuration then enables a rule from that plugin to disallow unknown at-rules in SCSS.
{ "plugins": ["stylelint-scss"], "rules": { "scss/at-rule-no-unknown": true } }ESLint is a static code analysis tool for identifying problematic patterns in JavaScript code. It is similar to Stylelint in its extensibility and plugin ecosystem but is focused on JavaScript rather than stylesheets.
Prettier is an opinionated code formatter that supports many languages, including CSS. Unlike Stylelint, which can both lint and fix code, Prettier is solely focused on code formatting and does not provide linting functionalities.
Sass-lint is a node-only Sass linter for both sass and scss syntax. It is similar to Stylelint when working with SCSS files but does not support plain CSS or other CSS-like syntaxes.
CSSLint is a tool that helps to point out problems with your CSS code. It is less configurable than Stylelint and has a smaller set of rules and plugins, but it serves a similar purpose in linting CSS files.
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
It's mighty because it:
It's easy to get started.
First, decide how you want to use stylelint:
Then create your configuration object. You can either extend a shared configuration or craft your own.
This is the quickest way to get started. We suggest you extend either:
The recommended config turns on just the possible error rules. The standard config extends it by turning on 60 stylistic rules. We suggest you extend the:
You may want to add rules to your config that limit language features as these will be specific to your team and/or project.
If you use language extensions, for example @if and @extends, you can use a community config like stylelint-config-recommended-scss instead.
Alternatively, you can learn about the rules and then either:
You'll find detailed information on customising stylelint in our guides:
Read our FAQ first.
If the answer to your problem isn't there, then post it on stackoverflow.
Create a new issue if:
If you're upgrading, read our CHANGELOG to learn what changes to expect in the latest version.
To help out, you can:
Our VISION document guides our work.
We have a semantic versioning policy. Any minor update may report more errors than the previous release. As such, we recommend using the tilde (~) in package.json e.g. "stylelint": "~7.2.0" to guarantee the results of your builds.
This project exists thanks to all these people. Contribute.
Thank you to all our backers! Become a backer.
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor.
10.1.0
selector-max-empty-lines autofix (#3717).--report-needless-disables output (#4071).--output-file CLI flag (#4085).function-calc-no-invalid false positives for interpolation (#4046).declaration-block-semicolon-space-before autofix with !important annotations (#4016).no-eol-whitespace autofix for within comments (#4224).no-eol-whitespace false negatives for last line without trailing EOL (#4224).selector-pseudo-class-no-unknown false positives for defined (#4081).FAQs
A mighty CSS linter that helps you avoid errors and enforce conventions.
The npm package stylelint receives a total of 3,082,056 weekly downloads. As such, stylelint popularity was classified as popular.
We found that stylelint demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."