Skip to content

Commit

Permalink
Add vue/no-irregular-whitespace rule
Browse files Browse the repository at this point in the history
  • Loading branch information
ota-meshi committed Dec 26, 2019
1 parent ec94d6a commit 675c63e
Show file tree
Hide file tree
Showing 5 changed files with 674 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/rules/README.md
Expand Up @@ -158,6 +158,7 @@ For example:
| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: |
| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns | |
| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace | |
| [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions | |
| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax | |
| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes | |
Expand Down
167 changes: 167 additions & 0 deletions docs/rules/no-irregular-whitespace.md
@@ -0,0 +1,167 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/no-irregular-whitespace
description: disallow irregular whitespace
---
# vue/no-irregular-whitespace
> disallow irregular whitespace
`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.

<eslint-code-block :rules="{'vue/no-irregular-whitespace': ['error']}">

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

</eslint-code-block>

## :wrench: 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)

<eslint-code-block :rules="{'vue/no-irregular-whitespace': ['error', {skipStrings: true}]}">

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

</eslint-code-block>

### `"skipStrings": false`

<eslint-code-block :rules="{'vue/no-irregular-whitespace': ['error', {skipStrings: false}]}">

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

</eslint-code-block>

### `"skipComments": true`

<eslint-code-block :rules="{'vue/no-irregular-whitespace': ['error', {skipComments: true}]}">

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

</eslint-code-block>

### `"skipRegExps": true`

<eslint-code-block :rules="{'vue/no-irregular-whitespace': ['error', {skipRegExps: true}]}">

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

</eslint-code-block>

### `"skipTemplates": true`

<eslint-code-block :rules="{'vue/no-irregular-whitespace': ['error', {skipTemplates: true}]}">

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

</eslint-code-block>

### `"skipHTMLAttributeValues": true`

<eslint-code-block :rules="{'vue/no-irregular-whitespace': ['error', {skipHTMLAttributeValues: true}]}">

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

</eslint-code-block>

### `"skipHTMLTextContents": true`

<eslint-code-block :rules="{'vue/no-irregular-whitespace': ['error', {skipHTMLTextContents: true}]}">

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

</eslint-code-block>

## :books: Further reading

- [no-irregular-whitespace]

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

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-irregular-whitespace.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-irregular-whitespace.js)
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -44,6 +44,7 @@ module.exports = {
'no-dupe-keys': require('./rules/no-dupe-keys'),
'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
'no-empty-pattern': require('./rules/no-empty-pattern'),
'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
'no-multi-spaces': require('./rules/no-multi-spaces'),
'no-parsing-error': require('./rules/no-parsing-error'),
'no-reserved-component-names': require('./rules/no-reserved-component-names'),
Expand Down

0 comments on commit 675c63e

Please sign in to comment.