Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
ota-meshi committed May 19, 2020
1 parent fb6a5b6 commit 21ed973
Show file tree
Hide file tree
Showing 5 changed files with 651 additions and 142 deletions.
1 change: 1 addition & 0 deletions docs/rules/README.md
Expand Up @@ -290,6 +290,7 @@ For example:
| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" | |
| [vue/no-unregistered-components](./no-unregistered-components.md) | disallow using components that are not registered inside templates | |
| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
| [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties | |
| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |
| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: |
| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported | |
Expand Down
79 changes: 57 additions & 22 deletions docs/rules/no-unused-properties.md
Expand Up @@ -2,46 +2,74 @@
pageClass: rule-details
sidebarDepth: 0
title: vue/no-unused-properties
description: disallow unused properties, data and computed properties
description: disallow unused properties
---
# vue/no-unused-properties
> disallow unused properties, data and computed properties
> disallow unused properties
## :book: Rule Details

This rule disallows any unused properties, data and computed properties.
This rule is aimed at eliminating unused properties.

```vue
/* ✓ GOOD */
::: warning Note
This rule cannot be checked for use in other components (e.g. `mixins`, Property access via `$refs`) and use in places where the scope cannot be determined.
:::

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

```vue
<!-- ✓ GOOD -->
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
props: ['count']
}
</script>
```

```vue
/* ✗ BAD (`count` property not used) */
</eslint-code-block>

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

```vue
<!-- ✗ BAD (`count` property not used) -->
<template>
<div>{{ cnt }}</div>
</template>
<script>
export default {
props: ['count']
}
</script>
```

```vue
/* ✓ GOOD */
</eslint-code-block>

## :wrench: Options

```json
{
"vue/no-unused-properties": ["error", {
"groups": ["props"]
}]
}
```

- `"groups"` (`string[]`) Array of groups to search for properties. Default is `["props"]`. The value of the array is some of the following strings:
- `"props"`
- `"data"`
- `"computed"`
- `"methods"`
- `"setup"`

### `"groups": ["props", "data"]`

<eslint-code-block :rules="{'vue/no-unused-properties': ['error', {groups: ['props', 'data']}]}">

```vue
<!-- ✓ GOOD -->
<script>
export default {
data() {
Expand All @@ -56,9 +84,12 @@ This rule disallows any unused properties, data and computed properties.
</script>
```

```vue
/* ✓ BAD (`count` data not used) */
</eslint-code-block>

<eslint-code-block :rules="{'vue/no-unused-properties': ['error', {groups: ['props', 'data']}]}">

```vue
<!-- ✓ BAD (`count` data not used) -->
<script>
export default {
data() {
Expand All @@ -73,13 +104,17 @@ This rule disallows any unused properties, data and computed properties.
</script>
```

```vue
/* ✓ GOOD */
</eslint-code-block>

### `"groups": ["props", "computed"]`

<eslint-code-block :rules="{'vue/no-unused-properties': ['error', {groups: ['props', 'computed']}]}">

```vue
<!-- ✓ GOOD -->
<template>
<p>{{ reversedMessage }}</p>
</template>
<script>
export default {
data() {
Expand All @@ -96,13 +131,15 @@ This rule disallows any unused properties, data and computed properties.
</script>
```

```vue
/* ✓ BAD (`reversedMessage` computed property not used) */
</eslint-code-block>

<eslint-code-block :rules="{'vue/no-unused-properties': ['error', {groups: ['props', 'computed']}]}">

```vue
<!-- ✓ BAD (`reversedMessage` computed property not used) -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
Expand All @@ -119,9 +156,7 @@ This rule disallows any unused properties, data and computed properties.
</script>
```

## :wrench: Options

None.
</eslint-code-block>

## :mag: Implementation

Expand Down
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -81,6 +81,7 @@ module.exports = {
'no-unregistered-components': require('./rules/no-unregistered-components'),
'no-unsupported-features': require('./rules/no-unsupported-features'),
'no-unused-components': require('./rules/no-unused-components'),
'no-unused-properties': require('./rules/no-unused-properties'),
'no-unused-vars': require('./rules/no-unused-vars'),
'no-use-v-if-with-v-for': require('./rules/no-use-v-if-with-v-for'),
'no-v-html': require('./rules/no-v-html'),
Expand Down

0 comments on commit 21ed973

Please sign in to comment.