316 lines
5.0 KiB
Markdown
316 lines
5.0 KiB
Markdown
|
# indentation
|
||
|
|
|
||
|
|
Specify indentation.
|
||
|
|
|
||
|
|
```css
|
||
|
|
|@media print {
|
||
|
|
| a {
|
||
|
|
| ↑ background-position: top left,
|
||
|
|
| ↑ ↑ top right;
|
||
|
|
| ↑}↑ ↑
|
||
|
|
|}↑ ↑ ↑
|
||
|
|
/** ↑ ↑ ↑
|
||
|
|
* The indentation at these three points */
|
||
|
|
```
|
||
|
|
|
||
|
|
The `--fix` option on the [command line](../../../docs/user-guide/cli.md#autofixing-errors) can automatically fix all of the problems reported by this rule.
|
||
|
|
|
||
|
|
## Options
|
||
|
|
|
||
|
|
`int|"tab"`, where `int` is the number of spaces
|
||
|
|
|
||
|
|
### `2`
|
||
|
|
|
||
|
|
Always indent at-rules, rules, comments, declarations, inside parentheses and multi-line values by 2 spaces.
|
||
|
|
|
||
|
|
The following patterns are considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print {
|
||
|
|
a {
|
||
|
|
background-position: top left,
|
||
|
|
top right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print {
|
||
|
|
a {
|
||
|
|
background-position: top left,
|
||
|
|
top right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print {
|
||
|
|
a {
|
||
|
|
background-position: top left,
|
||
|
|
top right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print {
|
||
|
|
a,
|
||
|
|
b {
|
||
|
|
background-position: top left,
|
||
|
|
top right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
/* blergh */
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
/* blergh */
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print,
|
||
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||
|
|
(min-resolution: 120dpi) {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
color: rgb(
|
||
|
|
255,
|
||
|
|
255,
|
||
|
|
255
|
||
|
|
);
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print {
|
||
|
|
a {
|
||
|
|
background-position: top left,
|
||
|
|
top right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print {
|
||
|
|
a,
|
||
|
|
b {
|
||
|
|
background-position: top left,
|
||
|
|
top right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
/* blergh */
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
/* blergh */
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print,
|
||
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||
|
|
(min-resolution: 120dpi) {}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
color: rgb(
|
||
|
|
255,
|
||
|
|
255,
|
||
|
|
255
|
||
|
|
);
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Optional secondary options
|
||
|
|
|
||
|
|
### `baseIndentLevel: int|"auto"`
|
||
|
|
|
||
|
|
By default, the indent level of the CSS code block in non-CSS-like files is determined by the shortest indent of non-empty line. The setting `baseIndentLevel` allows you to define a relative indent level based on CSS code block opening or closing line.
|
||
|
|
|
||
|
|
For example, with `[ 2, { baseIndentLevel: 1 } ]`, CSS should be indented 1 levels higher than `<style>` tag:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
a {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
### `indentInsideParens: "twice"|"once-at-root-twice-in-block"`
|
||
|
|
|
||
|
|
By default, *one extra* indentation (of your specified type) is expected after newlines inside parentheses, and the closing parenthesis is expected to have no extra indentation.
|
||
|
|
|
||
|
|
If you would like to change the quantity of extra indentation inside parentheses, use this option.
|
||
|
|
|
||
|
|
`"twice"` means you expect two extra indentations (of your specified type) after newlines inside parentheses, and expect the closing parenthesis to have one extra indentation. For example:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
color: rgb(
|
||
|
|
255,
|
||
|
|
255,
|
||
|
|
255
|
||
|
|
);
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
`"once-at-root-twice-in-block"` means two things: You want the behavior of `"once"`, as documented above, when the parenthetical expression is part of a node that is an immediate descendent of the root — i.e. not inside a block. And you want the behavior of `"twice"`, as documented above, when the parenthetical expression is part of a node that is inside a block. For example, with a SCSS map:
|
||
|
|
|
||
|
|
```scss
|
||
|
|
$foo: (
|
||
|
|
bar: 1,
|
||
|
|
baz: 2
|
||
|
|
);
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: rgb(
|
||
|
|
255,
|
||
|
|
255,
|
||
|
|
255
|
||
|
|
);
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### `indentClosingBrace: true|false`
|
||
|
|
|
||
|
|
If `true`, the closing brace of a block (rule or at-rule) will be expected at the same indentation level as the block's inner nodes.
|
||
|
|
|
||
|
|
For example, with `indentClosingBrace: true`.
|
||
|
|
|
||
|
|
The following patterns are considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print {
|
||
|
|
a {
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print {
|
||
|
|
a {
|
||
|
|
color: pink;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### `except: ["block", "param", "value"]`
|
||
|
|
|
||
|
|
Do *not* indent for these things.
|
||
|
|
|
||
|
|
For example, with `2`.
|
||
|
|
|
||
|
|
The following patterns are considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print,
|
||
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||
|
|
(min-resolution: 120dpi) {
|
||
|
|
a {
|
||
|
|
background-position: top left,
|
||
|
|
top right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print,
|
||
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||
|
|
(min-resolution: 120dpi) {
|
||
|
|
a {
|
||
|
|
background-position: top left,
|
||
|
|
top right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### `ignore: ["inside-parens", "param", "value"]`
|
||
|
|
|
||
|
|
#### `"inside-parens"`
|
||
|
|
|
||
|
|
Ignore the indentation inside parentheses.
|
||
|
|
|
||
|
|
For example, with `2`.
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
color: rgb(
|
||
|
|
255,
|
||
|
|
255,
|
||
|
|
255
|
||
|
|
);
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"param"`
|
||
|
|
|
||
|
|
Ignore the indentation of at-rule params.
|
||
|
|
|
||
|
|
For example, with `2`.
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
@media print,
|
||
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||
|
|
(min-resolution: 120dpi) {
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
#### `"value"`
|
||
|
|
|
||
|
|
Ignore the indentation of values.
|
||
|
|
|
||
|
|
For example, with `2`.
|
||
|
|
|
||
|
|
The following patterns are *not* considered violations:
|
||
|
|
|
||
|
|
```css
|
||
|
|
a {
|
||
|
|
background-position: top left,
|
||
|
|
top right,
|
||
|
|
bottom left,
|
||
|
|
bottom right;
|
||
|
|
}
|
||
|
|
```
|