UNPKG

9.57 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
11The 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.
12
13The `.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:
14
15- `.stylelintrc.json`
16- `.stylelintrc.yaml` / `.stylelintrc.yml`
17- `.stylelintrc.js`
18
19The configuration object has the following properties:
20
21## `rules`
22
23Rules determine what the linter looks for and complains about. There are [over 170 rules](rules/list.md) built into stylelint.
24
25_No rules are turned on by default and there are no default values. You must explicitly configure each rule to turn it on._
26
27The `rules` property is _an object whose keys are rule names and values are rule configurations_. For example:
28
29```json
30{
31 "rules": {
32 "color-no-invalid-hex": true
33 }
34}
35```
36
37Each rule configuration fits one of the following formats:
38
39- `null` (to turn the rule off)
40- a single value (the primary option)
41- an array with two values (`[primary option, secondary options]`)
42
43Specifying a primary option turns on a rule.
44
45Many rules provide secondary options for further customization. To set secondary options, use a two-member array. For example:
46
47```json
48{
49 "rules": {
50 "selector-pseudo-class-no-unknown": [
51 true,
52 {
53 "ignorePseudoClasses": ["global"]
54 }
55 ]
56 }
57}
58```
59
60You can add any number of keys in the object. For example, you can:
61
62- turn off `block-no-empty`
63- turn on `comment-empty-line-before` with a primary and secondary option
64- turn on `max-empty-lines` and `unit-whitelist` with primary options
65
66```json
67{
68 "rules": {
69 "block-no-empty": null,
70 "comment-empty-line-before": [
71 "always",
72 {
73 "ignore": ["stylelint-commands", "after-comment"]
74 }
75 ],
76 "max-empty-lines": 2,
77 "unit-whitelist": ["em", "rem", "%", "s"]
78 }
79}
80```
81
82### `message`
83
84You can use the `message` secondary option to deliver a custom message when a rule is violated.
85
86For example, the following rule configuration would substitute in custom messages:
87
88```json
89{
90 "rules": {
91 "color-hex-case": [
92 "lower",
93 {
94 "message": "Lowercase letters are easier to distinguish from numbers"
95 }
96 ],
97 "indentation": [
98 2,
99 {
100 "except": ["block"],
101 "message": "Please use 2 spaces for indentation.",
102 "severity": "warning"
103 }
104 ]
105 }
106}
107```
108
109Alternately, you can write a [custom formatter](../developer-guide/formatters.md) for maximum control if you need serious customization.
110
111### `severity`
112
113You can use the `severity` secondary option to adjust any specific rule's severity.
114
115The available values for `severity` are:
116
117- `"warning"`
118- `"error"` (default)
119
120For example:
121
122```json
123{
124 "rules": {
125 "indentation": [
126 2,
127 {
128 "except": ["value"],
129 "severity": "warning"
130 }
131 ]
132 }
133}
134```
135
136Reporters may use these severity levels to display violations or exit the process differently.
137
138## `defaultSeverity`
139
140You 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"`:
141
142```json
143{
144 "defaultSeverity": "warning"
145}
146```
147
148## `extends`
149
150You can _extend_ an existing configuration (whether your own or a third-party one).
151
152Popular configurations include:
153
154- [`stylelint-config-recommended`](https://github.com/stylelint/stylelint-config-recommended) - turns on just [possible error rules](rules/list.md#possible-errors)
155- [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard) - extends recommended one by turning on 60 [stylistic rules](rules/list.md#stylistic-issues)
156
157You'll find more in [awesome stylelint](https://github.com/stylelint/awesome-stylelint#configs).
158
159When one configuration extends another, it starts with the other's properties then adds to and overrides what's there.
160
161For 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:
162
163```json
164{
165 "extends": "stylelint-config-standard",
166 "rules": {
167 "indentation": "tab",
168 "number-leading-zero": null
169 }
170}
171```
172
173You 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).
174
175For example, with `stylelint-config-standard`, then layer `myExtendableConfig` on top of that, and then override the indentation rule:
176
177```json
178{
179 "extends": ["stylelint-config-standard", "./myExtendableConfig"],
180 "rules": {
181 "indentation": "tab"
182 }
183}
184```
185
186The 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:
187
188- the name of a module in `node_modules` (e.g. `stylelint-config-standard`; that module's `main` file must be a valid JSON configuration)
189- 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.
190- 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).
191
192## `plugins`
193
194Plugins are rules or sets of rules built by the community that support methodologies, toolsets, _non-standard_ CSS features, or very specific use cases.
195
196Popular plugin packs include:
197
198- [`stylelint-order`](https://github.com/hudochenkov/stylelint-order) - specify the ordering of things, e.g. properties within declaration blocks
199- [`stylelint-scss`](https://github.com/kristerkari/stylelint-scss) - enforce a wide variety of linting rules for SCSS-like syntax
200
201You'll find more in [awesome stylelint](https://github.com/stylelint/awesome-stylelint#plugins).
202
203To 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:
204
205- npm module name
206- absolute path
207- path relative to the invoking configuration file
208
209Once 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.
210
211```json
212{
213 "plugins": ["../special-rule.js"],
214 "rules": {
215 "plugin-namespace/special-rule": "everything"
216 }
217}
218```
219
220A "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:
221
222```json
223{
224 "plugins": ["../some-rule-set.js"],
225 "rules": {
226 "some-rule-set/first-rule": "everything",
227 "some-rule-set/second-rule": "nothing",
228 "some-rule-set/third-rule": "everything"
229 }
230}
231```
232
233## `processors`
234
235Processors 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.
236
237**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).**
238
239To 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.
240
241```json
242{
243 "processors": ["stylelint-my-processor"],
244 "rules": {}
245}
246```
247
248If your processor has options, make that item an array whose first item is the "locator" and second item is the options object.
249
250```json
251{
252 "processors": [
253 "stylelint-my-processor",
254 ["some-other-processor", { "optionOne": true, "optionTwo": false }]
255 ],
256 "rules": {}
257}
258```
259
260Processors can also only be used with the CLI and the Node.js API, not with the PostCSS plugin. (The PostCSS plugin ignores them.)
261
262## `ignoreFiles`
263
264You can provide a glob or array of globs to ignore specific files.
265
266For example, you can ignore all JavaScript files:
267
268```json
269{
270 "ignoreFiles": ["**/*.js"]
271}
272```
273
274stylelint ignores the `node_modules` directory by default. However, this is overridden if `ignoreFiles` is set.
275
276If the globs are absolute paths, they are used as is. If they are relative, they are analyzed relative to
277
278- `configBasedir`, if it's provided;
279- the config's filepath, if the config is a file that stylelint found a loaded;
280- or `process.cwd()`.
281
282The `ignoreFiles` property is stripped from extended configs: only the root-level config can ignore files.
283
284_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.