-
-
Notifications
You must be signed in to change notification settings - Fork 651
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* New: `vue/html-indent` rule (fixes #46) * remove garbages * add some tests for comma in mustache * remove switchCase option from docs * add tests for mix of text and mustache
- Loading branch information
1 parent
4f394c8
commit 5fdb848
Showing
3 changed files
with
5,618 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,114 @@ | ||
# enforce consistent indentation in `<template>` (vue/html-indent) | ||
|
||
## :book: Rule Details | ||
|
||
This rule enforces a consistent indentation style in `<template>`. The default style is 4 spaces as same as [the core indent rule](http://eslint.org/docs/rules/indent). | ||
|
||
- This rule checks all tags, also all expressions in directives and mustaches. | ||
- In the expressions, this rule supports ECMAScript 2017 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes. | ||
|
||
:-1: Examples of **incorrect** code for this rule: | ||
|
||
```html | ||
<template> | ||
<div class="foo"> | ||
Hello. | ||
</div> | ||
</template> | ||
``` | ||
|
||
:+1: Examples of **correct** code for this rule: | ||
|
||
```html | ||
<template> | ||
<div class="foo"> | ||
Hello. | ||
</div> | ||
</template> | ||
``` | ||
|
||
```html | ||
<template> | ||
<div class="foo"> | ||
Hello. | ||
</div> | ||
<div | ||
id="a" | ||
class="b" | ||
:other-attr="{ | ||
aaa: 1, | ||
bbb: 2 | ||
}" | ||
@other-attr2=" | ||
foo(); | ||
bar(); | ||
" | ||
> | ||
{{ | ||
displayMessage | ||
}} | ||
</div> | ||
</template> | ||
``` | ||
|
||
## :wrench: Options | ||
|
||
```json | ||
{ | ||
"vue/html-indent": ["error", type, { | ||
"attribute": 1, | ||
"closeBracket": 0, | ||
"ignores": [] | ||
}] | ||
} | ||
``` | ||
|
||
- `type` (`number | "tab"`) ... The type of indentation. Default is `4`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent. | ||
- `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`. | ||
- `closeBracket` (`integer`) ... The multiplier of indentation for right brackets. Default is `0`. | ||
- `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array. | ||
|
||
:+1: Examples of **correct** code for `{attribute: 1, closeBracket: 1}`: | ||
|
||
```html | ||
<template> | ||
<div | ||
id="a" | ||
class="b" | ||
other-attr= | ||
"{longname: longvalue}" | ||
other-attr2 | ||
="{longname: longvalue}" | ||
> | ||
Text | ||
</div> | ||
</template> | ||
``` | ||
|
||
:+1: Examples of **correct** code for `{attribute: 2, closeBracket: 1}`: | ||
|
||
```html | ||
<template> | ||
<div | ||
id="a" | ||
class="b" | ||
other-attr= | ||
"{longname: longvalue}" | ||
other-attr2 | ||
="{longname: longvalue}" | ||
> | ||
Text | ||
</div> | ||
</template> | ||
``` | ||
|
||
:+1: Examples of **correct** code for `{ignores: ["VAttribute"]}`: | ||
|
||
```html | ||
<template> | ||
<div | ||
id="" | ||
class="" | ||
/> | ||
</template> | ||
``` |
Oops, something went wrong.