Configuring Vue rules

There are only four default Vue rules we want to override in this book. You only need to add the preferred rules in the 'rules' option in the .eslintrc.js file just like we did for the eslint-plugin-prettier plugin in the previous section. Let's get to it in the following steps:

1. Configure the vue/v-on-style rule to "longform" as follows:

// .eslintrc.js
'rules': {
  'vue/v-on-style': ['error', 'longform']
}

The vue/v-on-style rule enforces shorthand or longform on the v-on directive style. The default is set to shorthand, for example:

<template>
  <!-- ✓ GOOD -->
  <div @click="foo"/>

  <!-- ✗ BAD -->
  <div v-on:click="foo"/>
</template>

But in this book, longform is preferred, as in the following example:

<template>
  <!-- ✓ GOOD -->
  <div v-on:click="foo"/>

  <!-- ✗ BAD --&gt...