Skip to content

Commit e1ea60f

Browse files
Thomasan1999Thomasan1999
committed
incorporating PR feedback #2 
1 parent f6aefde commit e1ea60f

File tree

4 files changed

+98
-87
lines changed

4 files changed

+98
-87
lines changed

‎docs/rules/index.md

Lines changed: 82 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -207,90 +207,90 @@ For example:
207207

208208
<rules-table>
209209

210-
| Rule ID | Description | | |
211-
|:--------|:------------|:--------------:|:--:|
212-
| [vue/block-lang] | disallow use other than available `lang` | | :hammer: |
213-
| [vue/block-tag-newline] | enforce line breaks after opening and before closing block-level tags | :wrench: | :lipstick: |
214-
| [vue/component-api-style] | enforce component API style | | :hammer: |
215-
| [vue/component-name-in-template-casing] | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
210+
| Rule ID | Description | | |
211+
|:--------|:------------|:--:|:--:|
212+
| [vue/block-lang] | disallow use other than available `lang` | | :hammer: |
213+
| [vue/block-tag-newline] | enforce line breaks after opening and before closing block-level tags | :wrench: | :lipstick: |
214+
| [vue/component-api-style] | enforce component API style | | :hammer: |
215+
| [vue/component-name-in-template-casing] | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
216216
| [vue/component-options-name-casing] | enforce the casing of component name in `components` options | :wrench::bulb: | :hammer: |
217-
| [vue/custom-event-name-casing] | enforce specific casing for custom event name | | :hammer: |
218-
| [vue/define-emits-declaration] | enforce declaration style of `defineEmits` | | :hammer: |
217+
| [vue/custom-event-name-casing] | enforce specific casing for custom event name | | :hammer: |
218+
| [vue/define-emits-declaration] | enforce declaration style of `defineEmits` | | :hammer: |
219219
| [vue/define-macros-order] | enforce order of compiler macros (`defineProps`, `defineEmits`, etc.) | :wrench::bulb: | :lipstick: |
220-
| [vue/define-props-declaration] | enforce declaration style of `defineProps` | | :hammer: |
221-
| [vue/define-props-destructuring] | enforce consistent style for props destructuring | | :hammer: |
222-
| [vue/enforce-style-attribute] | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags | | :hammer: |
223-
| [vue/html-button-has-type] | disallow usage of button without an explicit type attribute | | :hammer: |
224-
| [vue/html-comment-content-newline] | enforce unified line break in HTML comments | :wrench: | :lipstick: |
225-
| [vue/html-comment-content-spacing] | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
226-
| [vue/html-comment-indent] | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
227-
| [vue/match-component-file-name] | require component name property to match its file name | :bulb: | :hammer: |
228-
| [vue/match-component-import-name] | require the registered component name to match the imported component name | | :warning: |
229-
| [vue/max-lines-per-block] | enforce maximum number of lines in Vue SFC blocks | | :warning: |
230-
| [vue/max-props] | enforce maximum number of props in Vue component | | :warning: |
231-
| [vue/max-template-depth] | enforce maximum depth of template | | :warning: |
232-
| [vue/new-line-between-multi-line-property] | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
233-
| [vue/next-tick-style] | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
234-
| [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` | | :hammer: |
235-
| [vue/no-boolean-default] | disallow boolean defaults | | :hammer: |
236-
| [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` | | :hammer: |
237-
| [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
238-
| [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
239-
| [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class | | :hammer: |
240-
| [vue/no-potential-component-option-typo] | disallow a potential typo in your component property | :bulb: | :hammer: |
241-
| [vue/no-ref-object-reactivity-loss] | disallow usages of ref objects that can lead to loss of reactivity | | :warning: |
242-
| [vue/no-restricted-block] | disallow specific block | | :hammer: |
243-
| [vue/no-restricted-call-after-await] | disallow asynchronously called restricted methods | | :hammer: |
244-
| [vue/no-restricted-class] | disallow specific classes in Vue components | | :warning: |
245-
| [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: |
246-
| [vue/no-restricted-component-options] | disallow specific component option | | :hammer: |
247-
| [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: |
248-
| [vue/no-restricted-html-elements] | disallow specific HTML elements | | :hammer: |
249-
| [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: |
250-
| [vue/no-restricted-static-attribute] | disallow specific attribute | | :hammer: |
251-
| [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` | | :hammer: |
252-
| [vue/no-restricted-v-on] | disallow specific argument in `v-on` | | :hammer: |
253-
| [vue/no-root-v-if] | disallow `v-if` directives on root element | | :hammer: |
254-
| [vue/no-setup-props-reactivity-loss] | disallow usages that lose the reactivity of `props` passed to `setup` | | :hammer: |
255-
| [vue/no-static-inline-styles] | disallow static inline `style` attributes | | :hammer: |
256-
| [vue/no-template-target-blank] | disallow target="_blank" attribute without rel="noopener noreferrer" | :bulb: | :warning: |
257-
| [vue/no-this-in-before-route-enter] | disallow `this` usage in a `beforeRouteEnter` method | | :warning: |
258-
| [vue/no-undef-components] | disallow use of undefined components in `<template>` | | :hammer: |
259-
| [vue/no-undef-properties] | disallow undefined properties | | :hammer: |
260-
| [vue/no-unsupported-features] | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
261-
| [vue/no-unused-emit-declarations] | disallow unused emit declarations | | :hammer: |
262-
| [vue/no-unused-properties] | disallow unused properties | | :hammer: |
263-
| [vue/no-unused-refs] | disallow unused refs | | :hammer: |
264-
| [vue/no-use-v-else-with-v-for] | disallow using `v-else-if`/`v-else` on the same element as `v-for` | | :hammer: |
265-
| [vue/no-useless-mustaches] | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
266-
| [vue/no-useless-v-bind] | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
267-
| [vue/no-v-text] | disallow use of v-text | | :hammer: |
268-
| [vue/padding-line-between-blocks] | require or disallow padding lines between blocks | :wrench: | :lipstick: |
269-
| [vue/padding-line-between-tags] | require or disallow newlines between sibling tags in template | :wrench: | :lipstick: |
270-
| [vue/padding-lines-in-component-definition] | require or disallow padding lines in component definition | :wrench: | :lipstick: |
271-
| [vue/prefer-define-options] | enforce use of `defineOptions` instead of default export | :wrench: | :hammer: |
272-
| [vue/prefer-prop-type-boolean-first] | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
273-
| [vue/prefer-separate-static-class] | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
274-
| [vue/prefer-true-attribute-shorthand] | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
275-
| [vue/prefer-use-template-ref] | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs | :wrench: | :hammer: |
276-
| [vue/require-default-export] | require components to be the default export | | :warning: |
277-
| [vue/require-direct-export] | require the component to be directly exported | | :hammer: |
278-
| [vue/require-emit-validator] | require type definitions in emits | :bulb: | :hammer: |
279-
| [vue/require-explicit-slots] | require slots to be explicitly defined | | :warning: |
280-
| [vue/require-expose] | require declare public properties using `expose` | :bulb: | :hammer: |
281-
| [vue/require-macro-variable-name] | require a certain macro variable name | :bulb: | :hammer: |
282-
| [vue/require-name-property] | require a name property in Vue components | :bulb: | :hammer: |
283-
| [vue/require-prop-comment] | require props to have a comment | | :hammer: |
284-
| [vue/require-typed-object-prop] | enforce adding type declarations to object props | :bulb: | :hammer: |
285-
| [vue/require-typed-ref] | require `ref` and `shallowRef` functions to be strongly typed | | :hammer: |
286-
| [vue/restricted-component-names] | enforce using only specific component names | | :warning: |
287-
| [vue/script-indent] | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
288-
| [vue/slot-name-casing] | enforce specific casing for slot names | | :hammer: |
289-
| [vue/sort-keys] | enforce sort-keys in a manner that is compatible with order-in-components | | :hammer: |
290-
| [vue/static-class-names-order] | enforce static class names order | :wrench: | :hammer: |
291-
| [vue/v-for-delimiter-style] | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
292-
| [vue/v-if-else-key] | require key attribute for conditionally rendered repeated components | :wrench: | :warning: |
293-
| [vue/v-on-handler-style] | enforce writing style for handlers in `v-on` directives | :wrench: | :hammer: |
220+
| [vue/define-props-declaration] | enforce declaration style of `defineProps` | | :hammer: |
221+
| [vue/define-props-destructuring] | enforce consistent style for props destructuring | | :hammer: |
222+
| [vue/enforce-style-attribute] | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags | | :hammer: |
223+
| [vue/html-button-has-type] | disallow usage of button without an explicit type attribute | | :hammer: |
224+
| [vue/html-comment-content-newline] | enforce unified line break in HTML comments | :wrench: | :lipstick: |
225+
| [vue/html-comment-content-spacing] | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
226+
| [vue/html-comment-indent] | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
227+
| [vue/match-component-file-name] | require component name property to match its file name | :bulb: | :hammer: |
228+
| [vue/match-component-import-name] | require the registered component name to match the imported component name | | :warning: |
229+
| [vue/max-lines-per-block] | enforce maximum number of lines in Vue SFC blocks | | :warning: |
230+
| [vue/max-props] | enforce maximum number of props in Vue component | | :warning: |
231+
| [vue/max-template-depth] | enforce maximum depth of template | | :warning: |
232+
| [vue/new-line-between-multi-line-property] | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
233+
| [vue/next-tick-style] | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
234+
| [vue/no-bare-strings-in-template] | disallow the use of bare strings in `<template>` | | :hammer: |
235+
| [vue/no-boolean-default] | disallow boolean defaults | | :hammer: |
236+
| [vue/no-duplicate-attr-inheritance] | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` | | :hammer: |
237+
| [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
238+
| [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
239+
| [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class | | :hammer: |
240+
| [vue/no-potential-component-option-typo] | disallow a potential typo in your component property | :bulb: | :hammer: |
241+
| [vue/no-ref-object-reactivity-loss] | disallow usages of ref objects that can lead to loss of reactivity | | :warning: |
242+
| [vue/no-restricted-block] | disallow specific block | | :hammer: |
243+
| [vue/no-restricted-call-after-await] | disallow asynchronously called restricted methods | | :hammer: |
244+
| [vue/no-restricted-class] | disallow specific classes in Vue components | | :warning: |
245+
| [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: |
246+
| [vue/no-restricted-component-options] | disallow specific component option | | :hammer: |
247+
| [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: |
248+
| [vue/no-restricted-html-elements] | disallow specific HTML elements | | :hammer: |
249+
| [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: |
250+
| [vue/no-restricted-static-attribute] | disallow specific attribute | | :hammer: |
251+
| [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` | | :hammer: |
252+
| [vue/no-restricted-v-on] | disallow specific argument in `v-on` | | :hammer: |
253+
| [vue/no-root-v-if] | disallow `v-if` directives on root element | | :hammer: |
254+
| [vue/no-setup-props-reactivity-loss] | disallow usages that lose the reactivity of `props` passed to `setup` | | :hammer: |
255+
| [vue/no-static-inline-styles] | disallow static inline `style` attributes | | :hammer: |
256+
| [vue/no-template-target-blank] | disallow target="_blank" attribute without rel="noopener noreferrer" | :bulb: | :warning: |
257+
| [vue/no-this-in-before-route-enter] | disallow `this` usage in a `beforeRouteEnter` method | | :warning: |
258+
| [vue/no-undef-components] | disallow use of undefined components in `<template>` | | :hammer: |
259+
| [vue/no-undef-properties] | disallow undefined properties | | :hammer: |
260+
| [vue/no-unsupported-features] | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
261+
| [vue/no-unused-emit-declarations] | disallow unused emit declarations | | :hammer: |
262+
| [vue/no-unused-properties] | disallow unused properties | | :hammer: |
263+
| [vue/no-unused-refs] | disallow unused refs | | :hammer: |
264+
| [vue/no-use-v-else-with-v-for] | disallow using `v-else-if`/`v-else` on the same element as `v-for` | | :hammer: |
265+
| [vue/no-useless-mustaches] | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
266+
| [vue/no-useless-v-bind] | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
267+
| [vue/no-v-text] | disallow use of v-text | | :hammer: |
268+
| [vue/padding-line-between-blocks] | require or disallow padding lines between blocks | :wrench: | :lipstick: |
269+
| [vue/padding-line-between-tags] | require or disallow newlines between sibling tags in template | :wrench: | :lipstick: |
270+
| [vue/padding-lines-in-component-definition] | require or disallow padding lines in component definition | :wrench: | :lipstick: |
271+
| [vue/prefer-define-options] | enforce use of `defineOptions` instead of default export | :wrench: | :hammer: |
272+
| [vue/prefer-prop-type-boolean-first] | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
273+
| [vue/prefer-separate-static-class] | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
274+
| [vue/prefer-true-attribute-shorthand] | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
275+
| [vue/prefer-use-template-ref] | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs | :wrench: | :hammer: |
276+
| [vue/require-default-export] | require components to be the default export | | :warning: |
277+
| [vue/require-direct-export] | require the component to be directly exported | | :hammer: |
278+
| [vue/require-emit-validator] | require type definitions in emits | :bulb: | :hammer: |
279+
| [vue/require-explicit-slots] | require slots to be explicitly defined | | :warning: |
280+
| [vue/require-expose] | require declare public properties using `expose` | :bulb: | :hammer: |
281+
| [vue/require-macro-variable-name] | require a certain macro variable name | :bulb: | :hammer: |
282+
| [vue/require-name-property] | require a name property in Vue components | :bulb: | :hammer: |
283+
| [vue/require-prop-comment] | require props to have a comment | | :hammer: |
284+
| [vue/require-typed-object-prop] | enforce adding type declarations to object props | :bulb: | :hammer: |
285+
| [vue/require-typed-ref] | require `ref` and `shallowRef` functions to be strongly typed | | :hammer: |
286+
| [vue/restricted-component-names] | enforce using only specific component names | | :warning: |
287+
| [vue/script-indent] | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
288+
| [vue/slot-name-casing] | enforce specific casing for slot names | | :hammer: |
289+
| [vue/sort-keys] | enforce sort-keys in a manner that is compatible with order-in-components | | :hammer: |
290+
| [vue/static-class-names-order] | enforce static class names order | :wrench: | :hammer: |
291+
| [vue/v-for-delimiter-style] | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
292+
| [vue/v-if-else-key] | require key attribute for conditionally rendered repeated components | :wrench: | :warning: |
293+
| [vue/v-on-handler-style] | enforce writing style for handlers in `v-on` directives | :wrench: | :hammer: |
294294

295295
</rules-table>
296296

‎docs/rules/prefer-use-template-ref.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ since: v9.31.0
1010

1111
> require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
1212
13-
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
13+
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
1414

1515
## :book: Rule Details
1616

‎lib/rules/prefer-use-template-ref.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const utils = require('../utils')
88

99
/**
1010
* @typedef ScriptRef
11-
* @type {{node: Expression, ref: string}}
11+
* @type {{node: Expression, ref: string, typeArguments?: string[]}}
1212
*/
1313

1414
/**
@@ -20,7 +20,15 @@ function convertDeclaratorToScriptRef(declarator) {
2020
// @ts-ignore
2121
node: declarator.init,
2222
// @ts-ignore
23-
ref: declarator.id.name
23+
ref: declarator.id.name,
24+
// @ts-ignore
25+
...(declarator.init?.typeArguments && {
26+
// @ts-ignore
27+
typeArguments: declarator.init.typeArguments.params.map(
28+
// @ts-ignore
29+
(param) => param.typeName.name
30+
)
31+
})
2432
}
2533
}
2634

@@ -166,9 +174,12 @@ module.exports = {
166174
name: scriptRef.node?.callee?.name
167175
},
168176
fix(fixer) {
177+
const typeArgumentsString = scriptRef.typeArguments
178+
? `<${scriptRef.typeArguments.join(', ')}>`
179+
: ''
169180
const replaceFunctionFix = fixer.replaceText(
170181
scriptRef.node,
171-
`useTemplateRef('${scriptRef.ref}')`
182+
`useTemplateRef${typeArgumentsString}('${scriptRef.ref}')`
172183
)
173184

174185
if (!missingImportChecked) {

‎tests/lib/rules/prefer-use-template-ref.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -730,7 +730,7 @@ tester.run('prefer-use-template-ref', rule, {
730730
name: 'Counter',
731731
setup() {
732732
const counter = ref(0);
733-
const button = useTemplateRef('button');
733+
const button = useTemplateRef<HTMLDivElement>('button');
734734
}
735735
}
736736
</script>

0 commit comments

Comments
 (0)