UNPKG

10.1 kBMarkdownView Raw
1# Configuration
2
3stylelint _expects a configuration object_.
4
5stylelint uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) to find and load your configuration object. Starting from the current working directory, it looks for the following possible sources:
6
7- a `stylelint` property in `package.json`
8- a `.stylelintrc` file
9- a `stylelint.config.js` file exporting a JS object
10- a `stylelint.config.cjs` file exporting a JS object. When running stylelint in JavaScript packages that specify `"type":"module"` in their `package.json`
11
12The search stops when one of these is found, and stylelint uses that object. You can use the [`--config` or `configFile` option](usage/options.md#configfile) to short-circuit the search.
13
14The `.stylelintrc` file (without extension) can be in JSON or YAML format. You can add a filename extension to help your text editor provide syntax checking and highlighting:
15
16- `.stylelintrc.json`
17- `.stylelintrc.yaml` / `.stylelintrc.yml`
18- `.stylelintrc.js`
19
20The configuration object has the following properties:
21
22## `rules`
23
24Rules determine what the linter looks for and complains about. There are [over 170 rules](rules/list.md) built into stylelint.
25
26_No rules are turned on by default and there are no default values. You must explicitly configure each rule to turn it on._
27
28The `rules` property is _an object whose keys are rule names and values are rule configurations_. For example:
29
30```json
31{
32 "rules": {
33 "color-no-invalid-hex": true
34 }
35}
36```
37
38Each rule configuration fits one of the following formats:
39
40- `null` (to turn the rule off)
41- a single value (the primary option)
42- an array with two values (`[primary option, secondary options]`)
43
44Specifying a primary option turns on a rule.
45
46Many rules provide secondary options for further customization. To set secondary options, use a two-member array. For example:
47
48```json
49{
50 "rules": {
51 "selector-pseudo-class-no-unknown": [
52 true,
53 {
54 "ignorePseudoClasses": ["global"]
55 }
56 ]
57 }
58}
59```
60
61You can add any number of keys in the object. For example, you can:
62
63- turn off `block-no-empty`
64- turn on `comment-empty-line-before` with a primary and secondary option
65- turn on `max-empty-lines` and `unit-allowed-list` with primary options
66
67```json
68{
69 "rules": {
70 "block-no-empty": null,
71 "comment-empty-line-before": [
72 "always",
73 {
74 "ignore": ["stylelint-commands", "after-comment"]
75 }
76 ],
77 "max-empty-lines": 2,
78 "unit-allowed-list": ["em", "rem", "%", "s"]
79 }
80}
81```
82
83### `message`
84
85You can use the `message` secondary option to deliver a custom message when a rule is violated.
86
87For example, the following rule configuration would substitute in custom messages:
88
89```json
90{
91 "rules": {
92 "color-hex-case": [
93 "lower",
94 {
95 "message": "Lowercase letters are easier to distinguish from numbers"
96 }
97 ],
98 "indentation": [
99 2,
100 {
101 "except": ["block"],
102 "message": "Please use 2 spaces for indentation.",
103 "severity": "warning"
104 }
105 ]
106 }
107}
108```
109
110Alternately, you can write a [custom formatter](../developer-guide/formatters.md) for maximum control if you need serious customization.
111
112### `severity`
113
114You can use the `severity` secondary option to adjust any specific rule's severity.
115
116The available values for `severity` are:
117
118- `"warning"`
119- `"error"` (default)
120
121For example:
122
123```json
124{
125 "rules": {
126 "indentation": [
127 2,
128 {
129 "except": ["value"],
130 "severity": "warning"
131 }
132 ]
133 }
134}
135```
136
137Reporters may use these severity levels to display violations or exit the process differently.
138
139### `reportDisables`
140
141You can set the `reportDisables` secondary option to report any `stylelint-disable` comments for this rule, effectively disallowing authors to opt out of it.
142
143For example:
144
145```json
146{
147 "rules": {
148 "indentation": [
149 2,
150 {
151 "except": ["value"],
152 "reportDisables": true
153 }
154 ]
155 }
156}
157```
158
159The report is considered to be a lint error.
160
161## `defaultSeverity`
162
163You can set the default severity level for all rules that do not have a severity specified in their secondary options. For example, you can set the default severity to `"warning"`:
164
165```json
166{
167 "defaultSeverity": "warning"
168}
169```
170
171## `extends`
172
173You can _extend_ an existing configuration (whether your own or a third-party one).
174
175Popular configurations include:
176
177- [`stylelint-config-recommended`](https://github.com/stylelint/stylelint-config-recommended) - turns on just [possible error rules](rules/list.md#possible-errors)
178- [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard) - extends recommended one by turning on 60 [stylistic rules](rules/list.md#stylistic-issues)
179
180You'll find more in [awesome stylelint](https://github.com/stylelint/awesome-stylelint#configs).
181
182When one configuration extends another, it starts with the other's properties then adds to and overrides what's there.
183
184For example, you can extend the [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard) and then change the indentation to tabs and turn off the `number-leading-zero` rule:
185
186```json
187{
188 "extends": "stylelint-config-standard",
189 "rules": {
190 "indentation": "tab",
191 "number-leading-zero": null
192 }
193}
194```
195
196You can extend an array of existing configurations, with each item in the array taking precedence over the previous item (so the second item overrides rules in the first, the third item overrides rules in the first and the second, and so on, the last item overrides everything else).
197
198For example, with `stylelint-config-standard`, then layer `myExtendableConfig` on top of that, and then override the indentation rule:
199
200```json
201{
202 "extends": ["stylelint-config-standard", "./myExtendableConfig"],
203 "rules": {
204 "indentation": "tab"
205 }
206}
207```
208
209The value of `"extends"` is a "locater" (or an array of "locaters") that is ultimately `require()`d. It can fit whatever format works with Node's `require.resolve()` algorithm. That means a "locater" can be:
210
211- the name of a module in `node_modules` (e.g. `stylelint-config-standard`; that module's `main` file must be a valid JSON configuration)
212- an absolute path to a file (which makes sense if you're creating a JS object in a Node.js context and passing it in) with a `.js` or `.json` extension.
213- a relative path to a file with a `.js` or `.json` extension, relative to the referencing configuration (e.g. if configA has `extends: "../configB"`, we'll look for `configB` relative to configA).
214
215## `plugins`
216
217Plugins are rules or sets of rules built by the community that support methodologies, toolsets, _non-standard_ CSS features, or very specific use cases.
218
219Popular plugin packs include:
220
221- [`stylelint-order`](https://github.com/hudochenkov/stylelint-order) - specify the ordering of things, e.g. properties within declaration blocks
222- [`stylelint-scss`](https://github.com/kristerkari/stylelint-scss) - enforce a wide variety of linting rules for SCSS-like syntax
223
224You'll find more in [awesome stylelint](https://github.com/stylelint/awesome-stylelint#plugins).
225
226To use one, add a `"plugins"` array to your config, containing "locaters" identifying the plugins you want to use. As with `extends`, above, a "locater" can be either a:
227
228- npm module name
229- absolute path
230- path relative to the invoking configuration file
231
232Once the plugin is declared, within your `"rules"` object _you'll need to add options_ for the plugin's rule(s), just like any standard rule. Look at the plugin's documentation to know what the rule name should be.
233
234```json
235{
236 "plugins": ["../special-rule.js"],
237 "rules": {
238 "plugin-namespace/special-rule": "everything"
239 }
240}
241```
242
243A "plugin" can provide a single rule or a set of rules. If the plugin you use provides a set, invoke the module in your `"plugins"` configuration value, and use the rules it provides in `"rules"`. For example:
244
245```json
246{
247 "plugins": ["../some-rule-set.js"],
248 "rules": {
249 "some-rule-set/first-rule": "everything",
250 "some-rule-set/second-rule": "nothing",
251 "some-rule-set/third-rule": "everything"
252 }
253}
254```
255
256## `processors`
257
258Processors are functions built by the community that hook into stylelint's pipeline, modifying code on its way into stylelint and modifying results on their way out.
259
260**We discourage their use in favor of using the built-in [syntaxes](../about/syntaxes.md) as processors are incompatible with the [autofix feature](usage/options.md#fix).**
261
262To use one, add a `"processors"` array to your config, containing "locaters" identifying the processors you want to use. As with `extends`, above, a "locater" can be either an npm module name, an absolute path, or a path relative to the invoking configuration file.
263
264```json
265{
266 "processors": ["stylelint-my-processor"],
267 "rules": {}
268}
269```
270
271If your processor has options, make that item an array whose first item is the "locator" and second item is the options object.
272
273```json
274{
275 "processors": [
276 "stylelint-my-processor",
277 ["some-other-processor", { "optionOne": true, "optionTwo": false }]
278 ],
279 "rules": {}
280}
281```
282
283Processors can also only be used with the CLI and the Node.js API, not with the PostCSS plugin. (The PostCSS plugin ignores them.)
284
285## `ignoreFiles`
286
287You can provide a glob or array of globs to ignore specific files.
288
289For example, you can ignore all JavaScript files:
290
291```json
292{
293 "ignoreFiles": ["**/*.js"]
294}
295```
296
297stylelint ignores the `node_modules` directory by default. However, this is overridden if `ignoreFiles` is set.
298
299If the globs are absolute paths, they are used as is. If they are relative, they are analyzed relative to
300
301- `configBasedir`, if it's provided;
302- the config's filepath, if the config is a file that stylelint found a loaded;
303- or `process.cwd()`.
304
305The `ignoreFiles` property is stripped from extended configs: only the root-level config can ignore files.
306
307_Note that this is not an efficient method for ignoring lots of files._ If you want to ignore a lot of files efficiently, use [`.stylelintignore`](ignore-code.md) or adjust your files globs.