eslint-plugin-vue

Appearance

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 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 ​

js
{
    "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