Skip to content

Rule Proposal: vue/template-ref-pattern #2139

Open
@ntnyq

Description

@ntnyq

Please describe what the rule should do:

Force refs in template match the same pattern.

What category should the rule belong to?

[x] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

Option .+Ref$:

<!-- Good -->
<template>
  <table ref="tableRef"></table>
  <FooBar ref="fooBarRef"></FooBar>
</template>

<!-- Bad -->
<template>
  <table ref="table"></table>
  <FooBar ref="fooBar"></FooBar>
</template>
import { defineComponent, h, ref } from 'vue'

<!-- Good -->
export default defineComponent ({
  setup() {
    const tableRef = ref<HTMLElement>()
    return h('table', { ref: tableRef })
  }
})

<!-- Bad -->
export default defineComponent ({
  setup() {
    const table = ref<HTMLElement>()
    return h('table', { ref: table })
  }
})

Additional context

None.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions