diff --git a/docs/rules/index.md b/docs/rules/index.md index e359f47ab..51515e233 100644 --- a/docs/rules/index.md +++ b/docs/rules/index.md @@ -270,7 +270,7 @@ For example: | [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: | | [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: | | [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: | -| [vue/prefer-use-template-ref](./prefer-use-template-ref.md) | require using `useTemplateRef` instead of `ref` for template refs | | :hammer: | +| [vue/prefer-use-template-ref](./prefer-use-template-ref.md) | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs | | :hammer: | | [vue/require-default-export](./require-default-export.md) | require components to be the default export | | :warning: | | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported | | :hammer: | | [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: | diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md index 553e99bf1..1b1b40385 100644 --- a/docs/rules/prefer-use-template-ref.md +++ b/docs/rules/prefer-use-template-ref.md @@ -2,31 +2,32 @@ pageClass: rule-details sidebarDepth: 0 title: vue/prefer-use-template-ref -description: require using `useTemplateRef` instead of `ref` for template refs +description: require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs since: v9.31.0 --- # vue/prefer-use-template-ref -> require using `useTemplateRef` instead of `ref` for template refs +> require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs ## :book: Rule Details Vue 3.5 introduced a new way of obtaining template refs via the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API. -This rule enforces using the new `useTemplateRef` function instead of `ref` for template refs. +This rule enforces using the new `useTemplateRef` function instead of `ref`/`shallowRef` for template refs. ```vue ``` @@ -47,14 +49,16 @@ This rule skips `ref` template function refs as these should be used to allow cu ```vue ``` diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js index 8dcdccb38..916583e9f 100644 --- a/lib/rules/prefer-use-template-ref.js +++ b/lib/rules/prefer-use-template-ref.js @@ -8,8 +8,12 @@ const utils = require('../utils') /** @param expression {Expression | null} */ function expressionIsRef(expression) { - // @ts-ignore - return expression?.callee?.name === 'ref' + return ( + // @ts-ignore + expression?.callee?.name === 'ref' || + // @ts-ignore + expression?.callee?.name === 'shallowRef' + ) } /** @type {import("eslint").Rule.RuleModule} */ @@ -18,13 +22,13 @@ module.exports = { type: 'suggestion', docs: { description: - 'require using `useTemplateRef` instead of `ref` for template refs', + 'require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs', categories: undefined, url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html' }, schema: [], messages: { - preferUseTemplateRef: "Replace 'ref' with 'useTemplateRef'." + preferUseTemplateRef: "Replace '{{name}}' with 'useTemplateRef'." } }, /** @param {RuleContext} context */ @@ -79,7 +83,11 @@ module.exports = { context.report({ node: scriptRef.node, - messageId: 'preferUseTemplateRef' + messageId: 'preferUseTemplateRef', + data: { + // @ts-ignore + name: scriptRef.node?.callee?.name + } }) } } diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js index 49a2f0759..fe1ee2d2f 100644 --- a/tests/lib/rules/prefer-use-template-ref.js +++ b/tests/lib/rules/prefer-use-template-ref.js @@ -214,6 +214,9 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 7, column: 22 } @@ -235,6 +238,9 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 9, column: 22 } @@ -256,11 +262,17 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 8, column: 25 }, { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 9, column: 22 } @@ -288,6 +300,9 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 14, column: 33 } @@ -314,10 +329,35 @@ tester.run('prefer-use-template-ref', rule, { errors: [ { messageId: 'preferUseTemplateRef', + data: { + name: 'ref' + }, line: 12, column: 28 } ] + }, + { + filename: 'single-shallowRef.vue', + code: ` + + + `, + errors: [ + { + messageId: 'preferUseTemplateRef', + data: { + name: 'shallowRef' + }, + line: 7, + column: 22 + } + ] } ] })