DOCSEARCHbyAlgolia
Submit Docs

Eslint Vuejs Documentation

website·Indexed 19 days ago

https://eslint.vuejs.org/

Searchable website documentation for Eslint Vuejs from https://eslint.vuejs.org/.

Tokens
56.5K
Snippets
213
Records
496
Agent score
93%

What's inside Eslint Vuejs Documentation

  1. Overview of eslint-plugin-vue

    The official ESLint plugin for Vue.js allows for linting of <template> and <script> blocks within .vue files, as well as Vue code written in .js files. It is primarily used to find syntax errors, incorrect usage of Vue.js Directives, and violations of the official Vue.js Style Guide.

  2. Prevent unnecessary rerenders using vue/no-literals-in-template

    The vue/no-literals-in-template rule disallows the use of object, array, and function literals within v-bind directives in Vue templates. Because these literals create new references on every rerender, they can trigger child component watchers unnecessarily, even if the data hasn't changed.

    Note: Literals that reference variables from a v-for directive or a scoped slot are automatically ignored by this rule.

  3. Prevent component option typos with vue/no-potential-component-option-typo

    The vue/no-potential-component-option-typo rule disallows potential typos in Vue component options. It uses edit distance to compare the options defined in your component against a set of known valid options. If a property is similar but not identical to a known option (within a specific threshold), the rule reports it as a potential typo and provides suggestions for the correct option.

  4. Enforce custom event name casing with vue/custom-event-name-casing

    The vue/custom-event-name-casing rule ensures that custom event names follow a consistent casing style. By default, it enforces camelCase.

    • Vue 2 Recommendation: Use kebab-case because HTML templates are case-insensitive, and v-on:myEvent is automatically transformed to v-on:myevent.
    • Vue 3 Recommendation: Either camelCase or kebab-case can be used, though camelCase is often preferred as it aligns with JavaScript conventions.
    • Namespaced Events: For events like update:myProp, the rule checks each segment between the colons against the configured casing.

  5. Prevent unnecessary mustache interpolations with vue/no-useless-mustaches

    The vue/no-useless-mustaches rule reports mustache interpolations that contain only a string literal value. Since these are static, they should be written as plain text in the template rather than using interpolation. This rule supports the --fix option to automatically convert these interpolations into static content.

  6. Prevent variable shadowing in Vue templates with vue/no-template-shadow

    The vue/no-template-shadow rule disallows variable declarations within v-for directives or scope attributes if they shadow variables declared in an outer scope. This helps avoid confusion and bugs caused by variable name collisions in nested template structures. This rule is included in the recommended and strongly-recommended preset configurations for both Vue 2 and Vue 3.

  7. Prevent parsing errors in Vue templates with vue/no-parsing-error

    The vue/no-parsing-error rule disallows parsing errors within the <template> block of a Vue component. It validates syntax in three primary areas:

    1. Scripts within directives (e.g., v-if, v-for).
    2. Scripts within mustaches (interpolation {{ }}).
    3. HTML syntax, such as invalid end tags or attributes placed inside end tags.

    This rule is included by default in the following preset configurations:

    • flat/essential, flat/vue2-essential, flat/strongly-recommended, flat/vue2-strongly-recommended, flat/recommended, flat/vue2-recommended
    • plugin:vue/essential, plugin:vue/vue2-essential, plugin:vue/strongly-recommended, plugin:vue/vue2-strongly-recommended, plugin:vue/recommended, plugin:vue/vue2-recommended

  8. Enforce style attributes in Vue SFCs using vue/enforce-style-attribute

    The vue/enforce-style-attribute rule enforces or forbids the use of the scoped and module attributes in top-level <style> tags within Single File Components (SFCs). This allows teams to standardize whether styles should be scoped, modularized, or plain (global).

  9. Identify and disallow unused properties with vue/no-unused-properties

    The vue/no-unused-properties rule helps eliminate unused properties in Vue components.

    Limitations:

    • It cannot detect properties used by other components (e.g., via mixins or $refs).
    • It cannot detect usage in scopes where the scope cannot be determined.
    • By default, dynamic access (e.g., this[varName]) is assumed to be a 'use' of all properties. This behavior can be modified using the unreferencedOptions configuration.

  10. Enforce property order in Vue components using vue/order-in-components

    The vue/order-in-components rule ensures that properties declared in Vue components follow a consistent, recommended order. This rule is included in the flat/recommended, flat/vue2-recommended, plugin:vue/recommended, and plugin:vue/vue2-recommended preset configurations. It supports automatic fixing via the --fix command line option and provides editor suggestions for some issues.

  11. Prevent unnecessary <template> elements with vue/no-lone-template

    The vue/no-lone-template rule disallows <template> elements that lack specific directives.

    • In Vue.js 2.x, <template> elements without directives have no effect on the rendered output.
    • In Vue.js 3.x, <template> elements without directives are rendered as-is, which is typically unintentional.

    This rule is included by default in the following preset configurations:

    • flat/recommended
    • flat/vue2-recommended
    • plugin:vue/recommended
    • plugin:vue/vue2-recommended

  12. Enforce top-level element order in Vue components using vue/block-order

    The vue/block-order rule ensures that top-level tags in a Vue Single-File Component (SFC)—such as <script>, <template>, and <style>—appear in a specific, consistent order. This rule is included in the recommended and vue2-recommended preset configurations for both flat and legacy ESLint configs. The --fix CLI option can automatically reorder these blocks to match the configured order.