eslint-plugin-vue

The official ESLint plugin for Vue.js. It enables ESLint to analyze <template> and <script> blocks within .vue files, as well as Vue-specific code within .js files. It is designed to:

• Identify syntax errors.
• Detect incorrect usage of Vue.js Directives.
• Enforce compliance with the Vue.js Style Guide.

Rules in eslint-plugin-vue are categorized by their purpose and include specific indicators for how they behave:

Rule Types

• Possible Problems (:warning:): Rules relating to potential logic errors in your code.
• Suggestions (:hammer:): Rules that suggest alternative ways of writing code.
• Layout & Formatting (:lipstick:): Rules focused on code aesthetics and visual consistency.

Fixability Indicators

• Fixable (:wrench:): These rules can be automatically corrected using the ESLint --fix command-line option.
• Manually Fixable (:bulb:): These rules provide editor suggestions that require manual application by the developer.

The plugin automatically detects components via standard expressions (e.g., app.component(), defineComponent(), export default {} in .vue files).

To apply component-related rules to custom objects in non-standard files, use the // @vue/component comment immediately above the object.

// @vue/component
const CustomComponent = {
  name: 'custom-component',
  template: '<div></div>'
}

The vue/no-unused-refs rule disallows defining ref attributes in <template> that are never accessed via $refs within the component's script. This helps clean up unused template references.

Limitations: This rule cannot detect if a ref is used in other components (e.g., via mixins or nested access like $refs.x.$refs).

<template>
  <!-- ✓ GOOD -->
  <input ref="foo" />

  <!-- ✗ BAD (`bar` is not used) -->
  <input ref="bar" />
</template>
<script>
export default {
  mounted() {
    this.$refs.foo.value = 'foo'
  }
}
</script>

The vue/no-lifecycle-after-await rule disallows registering lifecycle hooks (e.g., onMounted, onUpdated) after an await expression within the setup() function. In the Composition API, lifecycle hooks must be registered synchronously during the initial execution of setup() to ensure Vue can correctly track them.

<script>
import { onMounted } from 'vue'
export default {
  async setup() {
    /* ✓ GOOD: Registered before await */
    onMounted(() => { /* ... */ })

    await doSomething()

    /* ✗ BAD: Registered after await */
    onMounted(() => { /* ... */ })
  }
}
</script>

The vue/keyword-spacing rule enforces consistent spacing before and after keywords specifically within <template> expressions. It is designed to mirror the behavior of the @stylistic/keyword-spacing rule but targets Vue template syntax.

Key features:

• Auto-fixable: You can use the --fix option via the ESLint command line to automatically correct spacing issues.
• Dependencies: This rule attempts to use @stylistic/eslint-plugin if installed. If not, it falls back to the ESLint core rule. If neither is available, the rule cannot be used.

To lint .vue files in Visual Studio Code using the official dbaeumer.vscode-eslint extension, you must explicitly add vue to the eslint.validate setting, as the extension only targets *.js or *.jsx by default.

If you are using the Vetur extension, disable its template validation to prevent duplicate linting warnings by setting vetur.validation.template to false in your settings.

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

The vue/no-required-prop-with-default rule enforces that any prop declared with a default value must be optional. Since a default value allows a prop to be skipped during use, marking it as required: true is redundant and logically equivalent to an optional prop. This rule applies to both <script setup> with withDefaults and standard Options API props declarations.

<script setup lang="ts">
/* ✓ GOOD */
const props = withDefaults(
  defineProps<{
    name?: string | number
    age?: number
  }>(),
  {
    name: 'Foo',
  }
);

/* ✗ BAD */
const props = withDefaults(
  defineProps<{
    name: string | number
    age?: number
  }>(),
  {
    name: 'Foo',
  }
);
</script>