JS.VUE.NO.IRREGULAR.WHITESPACE

Rule Details

vue/no-irregular-whitespace rule is aimed at catching invalid whitespace that is not a normal tab and space. Some of these characters may cause issues in modern browsers and others will be a debugging issue to spot. vue/no-irregular-whitespace rule is the similar rule as core no-irregular-whitespace rule but it applies to the source code in .vue.

{'vue/no-irregular-whitespace': ['error']}

<template>
  <!-- GOOD -->
  <div class="foo bar" />
  <!-- BAD -->
  <div class="foo
bar" />
  <!--           ^ LINE TABULATION (U+000B) -->
</template>
<script>
/* GOOD */
var foo = bar;
/* BAD */
var foo =
bar;
//       ^ LINE TABULATION (U+000B)
</script>

Options

{
    "vue/no-irregular-whitespace": ["error", {
        "skipStrings": true,
        "skipComments": false,
        "skipRegExps": false,
        "skipTemplates": false,
        "skipHTMLAttributeValues": false,
        "skipHTMLTextContents": false
    }]
}

• skipStrings: if true, allows any whitespace characters in string literals. default true
• skipComments: if true, allows any whitespace characters in comments. default false
• skipRegExps: if true, allows any whitespace characters in regular expression literals. default false
• skipTemplates: if true, allows any whitespace characters in template literals. default false
• skipHTMLAttributeValues: if true, allows any whitespace characters in HTML attribute values. default false
• skipHTMLTextContents: if true, allows any whitespace characters in HTML text contents. default false

"skipStrings": true (default)

{'vue/no-irregular-whitespace': ['error', {skipStrings: true}]}

<script>
/* GOOD */
var foo = '
'
//         ^ LINE TABULATION (U+000B)
</script>

"skipStrings": false

{'vue/no-irregular-whitespace': ['error', {skipStrings: false}]}

<script>
/* BAD */
var foo = '
'
//         ^ LINE TABULATION (U+000B)
</script>

"skipComments": true

{'vue/no-irregular-whitespace': ['error', {skipComments: true}]}

<template>
  <!-- GOOD -->
  <!-- [
]< LINE TABULATION (U+000B) -->
</template>
<script>
/* GOOD */
// [
]< LINE TABULATION (U+000B)
/* [
]< LINE TABULATION (U+000B) */
</script>

"skipRegExps": true

{'vue/no-irregular-whitespace': ['error', {skipRegExps: true}]}

<script>
/* GOOD */
var foo = /
/
//         ^ LINE TABULATION (U+000B)
</script>

"skipTemplates": true

{'vue/no-irregular-whitespace': ['error', {skipTemplates: true}]}

<script>
/* GOOD */
var foo = `
`
//         ^ LINE TABULATION (U+000B)
</script>

"skipHTMLAttributeValues": true

{'vue/no-irregular-whitespace': ['error', {skipHTMLAttributeValues: true}]}

<template>
  <!-- GOOD -->
  <div class="foo
bar" />
  <!--           ^ LINE TABULATION (U+000B) -->
</template>

"skipHTMLTextContents": true

{'vue/no-irregular-whitespace': ['error', {skipHTMLTextContents: true}]}

<template>
  <!-- GOOD -->
  <div>
</div>
  <!-- ^ LINE TABULATION (U+000B) -->
</template>

Further Reading

• https://eslint.org/docs/rules/no-irregular-whitespace