eslint-plugin-vue-extras

Installation

You'll first need to install ESLint:

yarn add eslint eslint-plugin-vue --dev

Next, install eslint-plugin-vue-extras:

yarn add eslint-plugin-vue-extras --dev

Usage

Add eslint-vue-extra to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "vue-extras"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "vue-extras/no-this-in-before-route-enter": 2,
        "vue-extras/use-attribute-shortcut": 2,
        "vue-extras/type-object-props": 2,
        "vue-extras/no-empty-methods": 2,
        "vue-extras/no-empty-computed": 2
    }
}

Supported Rules

vue-extras/no-this-in-before-route-enter

Bad:

<script>
export default {
  beforeRouteEnter() {
    this.method()
  }
}
</script>

In a beforeRouteEnter method this is undefined. Details: link

vue-extras/use-attribute-shortcut

Bad:

<template>
  <component :attr="true" />
</template>

Good:

<template>
  <component attr />
  <component attr="true" />
  <component :attr="false" />
</template>

Force attribute shortcut. Add --fix flag to apply shortcut.

vue-extras/no-empty-methods

Bad:

export default {
  methods: {}
}

Good:

export default {
}

export default {
  methods: {
    method() {

    }
  }
}

Add --fix flag to apply shortcut.

vue-extras/no-empty-computed

Bad:

export default {
  computed: {}
}

Good:

export default {
}

export default {
  computed: {
    item() {

    }
  }
}

Add --fix flag to apply shortcut.

TypeScript only

vue-extras/type-object-props

• requires @typescript-eslint/parser

Bad:

<script lang="ts">
export default {
  props: {
    prop: {
      type: Object // Object props has to be typed
    }
  }
}
</script>

Good:

<script lang="ts">
import { Prop } from 'vue/types/options';

export default {
  props: {
    prop: {
      type: Object as Prop<{}>
    }
  }
}
</script>