stylelint

What is stylelint?

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.

What are stylelint's main functionalities?

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

Other packages similar to stylelint

eslint

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

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

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

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.

README

Stylelint

A mighty CSS linter that helps you avoid errors and enforce conventions.

Features

It's mighty as it:

• has over 100 built-in rules for modern CSS syntax and features
• supports plugins so you can create your own custom rules
• automatically fixes problems where possible
• supports shareable configs that you can create or extend
• can be customized to your exact needs
• has 15k unit tests making it robust
• is trusted by companies worldwide like Google and GitHub

And it can be extended to:

• extract embedded styles from HTML, Markdown and CSS-in-JS template literals
• parse CSS-like languages like SCSS, Sass, Less and SugarSS

How it'll help you

It'll help you avoid errors, for example:

• invalid things, e.g. malformed grid areas
• valid things that are problematic, e.g. duplicate selectors
• unknown things, e.g. misspelled property names

And enforce conventions, for example:

• disallow things, e.g. specific units
• enforce naming patterns, e.g. for custom properties
• set limits, e.g. the number of ID selectors
• specify notations, e.g. for modern color functions

We recommend using a pretty printer like Prettier alongside Stylelint. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.

Example output

Guides

• User guide
  • Getting started
  • Customizing
  • Configuring
  • Rules
  • Ignoring code
  • CLI
  • Node.js API
  • PostCSS plugin
  • Options
  • Errors & warnings
• Developer guide
  • Writing rules
  • Writing plugins
  • Writing custom syntaxes
  • Writing custom formatters
  • Writing system tests
• Migration guide
  • Migrating to 16.0.0
  • Migrating to 15.0.0
  • Migrating to 14.0.0
• Maintainer guide
  • Managing issues
  • Managing pull requests
  • Performing releases
• About
  • Vision
  • Semantic versioning

Contributors

Stylelint is maintained by volunteers. Without the code contributions from all these fantastic people, Stylelint would not exist. Become a contributor.

Alumni

We'd like to thank all past members for their invaluable contributions, including two of Stylelint's co-creators @davidtheclark and @MoOx.

Sponsors

Thank you to all our sponsors! Become a sponsor.

Backers

Thank you to all our backers! Become a backer.

Website hosting

License

The MIT License.

Changelog

16.11.0

• Added: --report-unscoped-disables CLI flag and reportUnscopedDisables option to Node.js API and configuration object (#8024) (@Mouvedia).
• Added: ignoreFunctions: [] to media-query-no-invalid (#8060) (@ryo-manba).
• Added: name configuration property under overrides (#8095) (@ryo-manba).
• Fixed: benchmark-rule script to resolve TypeError (#8090) (@ybiquitous).
• Fixed: github formatter deprecation warning link to https://stylelint.io/awesome-stylelint#formatters (#8115) (@ryo-manba).
• Fixed: function-calc-no-unspaced-operator false negatives for calc-size (#8026) (@azat-io).
• Fixed: max-nesting-depth false positives when the & selector is being ignored (#8048) (@ryo-manba).
• Fixed: media-feature-name-value-no-unknown false positives for display-mode: picture-in-picture (#8136) (@Mouvedia).
• Fixed: no-irregular-whitespace reported ranges (#8066) (@romainmenke).
• Fixed: selector-attribute-name-disallowed-list reported ranges (#8037) (@ryo-manba).
• Fixed: selector-attribute-operator-allowed-list reported ranges (#8038) (@ryo-manba).
• Fixed: selector-attribute-operator-disallowed-list reported ranges (#8039) (@ryo-manba).
• Fixed: selector-class-pattern reported ranges (#8042) (@ryo-manba).
• Fixed: selector-combinator-allowed-list reported ranges (#8046) (@ryo-manba).
• Fixed: selector-combinator-disallowed-list reported ranges (#8047) (@ryo-manba).
• Fixed: selector-disallowed-list reported ranges (#8067) (@ryo-manba).
• Fixed: selector-id-pattern reported ranges (#8045) (@ryo-manba).
• Fixed: selector-max-attribute reported ranges (#8052) (@ryo-manba).
• Fixed: selector-max-class reported ranges (#8053) (@ryo-manba).
• Fixed: selector-max-combinators reported-ranges (#8055) (@ryo-manba).
• Fixed: selector-max-compound-selectors reported ranges (#8056) (@ryo-manba).
• Fixed: selector-max-id reported ranges (#8054) (@ryo-manba).
• Fixed: selector-max-pseudo-class reported ranges (#8057) (@ryo-manba).
• Fixed: selector-max-specificity reported ranges (#8058) (@ryo-manba).
• Fixed: selector-max-universal reported ranges (#8059) (@ryo-manba).
• Fixed: selector-nested-pattern reported ranges (#8072) (@ryo-manba).
• Fixed: selector-no-vendor-prefix reported ranges (#8073) (@ryo-manba).
• Fixed: selector-not-notation reported ranges (#8074) (@ryo-manba).
• Fixed: selector-pseudo-class-allowed-list reported ranges (#8061) (@ryo-manba).
• Fixed: selector-pseudo-class-disallowed-list reported ranges (#8062) (@ryo-manba).
• Fixed: selector-pseudo-class-no-unknown reported ranges (#8063) (@ryo-manba).
• Fixed: selector-pseudo-element-allowed-list reported ranges (#8068) (@ryo-manba).
• Fixed: selector-pseudo-element-colon-notation reported ranges (#8069) (@ryo-manba).
• Fixed: selector-pseudo-element-disallowed-list reported ranges (#8070) (@ryo-manba).
• Fixed: selector-pseudo-element-no-unknown false positives for ::scroll-marker and ::scroll-marker-group (#8110) (@Mouvedia).
• Fixed: selector-pseudo-element-no-unknown reported ranges (#8071) (@ryo-manba).
• Fixed: selector-type-no-unknown reported ranges (#8076) (@ryo-manba).