# 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="foo bar" /> <!-- ^ 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="foo bar" /> <!-- ^ LINE TABULATION (U+000B) --> </template>
Now loading...

# "skipHTMLTextContents": true

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

# 📚 Further Reading

# 🚀 Version

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

# 🔍 Implementation

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

Last Updated: 1/20/2022, 11:40:54 PM