vue/no-irregular-whitespace

disallow irregular whitespace in .vue files

📖 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 (opens new window) rule but it applies to the source code in .vue.

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

Now loading...

🔧 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)

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

Now loading...

"skipStrings": false

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

Now loading...

"skipComments": true

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

Now loading...

"skipRegExps": true

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

Now loading...

"skipTemplates": true

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

Now loading...

"skipHTMLAttributeValues": true

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

Now loading...

"skipHTMLTextContents": true

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

Now loading...

📚 Further Reading

• no-irregular-whitespace (opens new window)

🚀 Version

This rule was introduced in eslint-plugin-vue v6.1.0

🔍 Implementation

• Rule source (opens new window)
• Test source (opens new window)

^{Taken with ❤️ from ESLint core (opens new window)}