Skip to content

rules.md

Latest commit

 

History

History
406 lines (335 loc) · 4.62 KB

rules.md

File metadata and controls

406 lines (335 loc) · 4.62 KB

All rules

Rule: attr-format

Forces indent for html attributes that have line break between.

Config defaults

"attr-format": {
  "severity": "error",
  "options": {
    "type": "space",
    "newline": 2,
    "inline": 1,
    "maxInlineSize": 50
  }
}

Options interface:

{
  type: "space" | "tab";
  newline: number;
  inline: number;
  maxInlineSize: number;
}

GOOD:

<input
  value=""
  name="input"/>

BAD:

<input
value=""
    name="input"/>

Rule: attr-closing-bracket

Forces indent before opening tag closing bracket.

Config defaults

"attr-closing-bracket": {
  severity: 'error',
  options: ['eol'],
}

Options interface:

['eol' | 'newline', number | undefined]

End of last attribute (line) 'eol'

Forces closing bracket > or /> to be on the same line as last attribute.

GOOD:

<input name="input"/>
<input
  name="input"/>

It is possible to set a custom whitespace number here in config: ['eol', 1]

GOOD:

<input name="input" />

BAD:

<input name="input"
/>

New line before closing 'newline'

Forces closing bracket > or /> to have a new line before closing with same whitespace as tag.

GOOD:

<input
  name="input"
/>
  <input
    name="input"
  />

BAD:

<input name="input"/>

Rule: no-void-tag-close

Forces all void elements to be self closed.

Config defaults

"no-void-tag-close": {
  severity: 'error',
}

GOOD:

<br/>
<hr/>

BAD:

<br>
<hr>

Rule: no-flow-tag-close

Forces all flow elements to be closed.

Config defaults

"no-flow-tag-close": {
  severity: 'error',
}

GOOD:

<p>Hello</p>
<p>World</p>

BAD:

<p>Hello
<p>World

Rule: no-unclosed-tag

Forces all tags to be closed.

Config defaults

"no-unclosed-tag": {
  severity: 'error',
}

GOOD:

<p>Hello <strong>World</strong></p>

BAD:

<p>Hello <strong>World</p>

Rule: alt-require

All img tags must have alt attribute.

Config defaults

"alt-require": {
  severity: 'error',
}

GOOD:

<img src="image.png" alt="description"/>

BAD:

<img src="image.png"/>

Rule: attr-lowercase

All attribute names must be lowercase.

Config defaults

"attr-lowercase": {
  severity: 'error',
  options: {
    ignore: ['viewBox'],
  },
}

Options interface:

{
  ignore: string[],
}

GOOD:

<tag attr="test"/>

BAD:

<tag ATTR="test"/>

Rule: attr-no-duplication

Attributes must not be duplicated.

Config defaults

"attr-no-duplication": {
  severity: 'error',
  options: {
    ignore: ['custom-attr'],
  },
}

Options interface:

{
  ignore: string[],
}

GOOD:

<tag class="one two"/>

BAD:

<tag class="one" class="two"/>

Rule: attr-value-not-empty

All attributes must have values.

By default ignores all boolean attributes like "disabled", "checked", "hidden" etc.

Config defaults

"attr-value-not-empty": {
  severity: 'error',
  options: {
    ignore: ['disabled'],
  },
}

Options interface:

{
  ignore: string[],
}

GOOD:

<input name="myname"/>

BAD:

<input name=""/>

Rule: attr-value-double-quotes

Forces all attribute values to have double quotes.

Config defaults

"attr-value-double-quotes": {
  severity: 'error',
}

GOOD:

<input name="test"/>

BAD:

<input name='test'/>

Rule: style-disabled

Forces style tag not to be used.

Config defaults

"style-disabled": {
  severity: 'error',
}

BAD:

<style>
.bg-red {
  background-color: red;
}
</style>

Rule: inline-style-disabled

Forces style attribute not to be used.

Config defaults

"inline-style-disabled": {
  severity: 'error',
}

BAD:

<h1 style="background: red;">hello</h1>

Rule: tag-indent

Forces tag indentation in depth based on editorconfig or overwritten options.

Config defaults

"tag-indent": {
  "severity": "error",
  "options": {
    "type": "space",
    "newline": 2,
    "ignore": [
      "pre",
      "script",
      "style"
    ]
  }
}

GOOD:

<strong>
  text
</strong>
<strong>text</strong>

BAD:

<strong>
  text</strong>
<strong>
  text
  </strong>
  <strong>
    text
    </strong>

Rule: comment-format

Forces all comments to have spaces in start and end.

Config defaults

"comment-format": {
  "severity": "warning",
  "options": {
    "start": 1,
    "end": 1
  }
}

GOOD:

<!-- Comment -->

BAD:

<!--  Comment-->