A linter is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.
You can use a linter with a pretty printer and a validator. There are, however, usually overlaps between these three types of tools.
There are two approaches to enforcing stylistic conventions:
The former is handled by pretty printers, like prettier, whereas the latter is catered for by the built-in stylistic rules. If you use a pretty printer, you’ll want to use stylelint-config-recommended
, which only turns on possible error rules.
Additionally, the built-in stylistic rules and plugins are configurable to support a diverse range of stylistic conventions. For example, ordering properties within declaration blocks is a divisive topic, where there isn’t a dominant convention. The stylelint-order
plugin can be configured to lint and fix a diverse range of ordering conventions.
Another example is the use of single-line rules for sets of related rules, e.g.
/* Single-line related classes */
.class-1 { top: 0; bottom: 0; }
.class-2 { top: 5px; right: 0; }
.class-3 { top: 8px; left: 0; }
You can configure the built-in stylistic rules to allow both multi-line and single-line rules. The choice of when to use each belongs to the user.
Validators like csstree identify invalid code such as misformed hex colors and unknown language features.
However, as a stop-gap, while these tools mature stylelint provides rules for the simplest of cases.