feat(prefer-use-template-ref): support auto-fix#2983
feat(prefer-use-template-ref): support auto-fix#29839romise wants to merge 10 commits intovuejs:masterfrom
Conversation
🦋 Changeset detectedLatest commit: e07e5be The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
# Conflicts: # lib/rules/prefer-use-template-ref.js
FloEdelmann
left a comment
FloEdelmann
left a comment
There was a problem hiding this comment.
Looks good to me, thank you 🙂
There was a problem hiding this comment.
Pull request overview
This PR implements auto-fix functionality for the prefer-use-template-ref rule, which automatically converts ref() and shallowRef() calls to useTemplateRef('name') when they are used as template refs. The implementation intentionally does not auto-import useTemplateRef to avoid conflicts with users who rely on unplugin-auto-import.
- Adds
fixable: 'code'metadata to enable auto-fixing - Implements fixer logic that correctly handles TypeScript type arguments/parameters
- Updates all test cases with expected outputs and enhanced error location information
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
lib/rules/prefer-use-template-ref.js |
Adds fixable metadata and implements the fix function that replaces ref/shallowRef calls with useTemplateRef, preserving type arguments |
tests/lib/rules/prefer-use-template-ref.js |
Adds output expectations for all invalid test cases and includes endLine/endColumn in error assertions; adds TypeScript test case |
docs/rules/prefer-use-template-ref.md |
Adds wrench icon notation and fix attribute to code blocks to indicate auto-fix capability |
docs/rules/index.md |
Updates the rules table to show the wrench icon for this rule |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </template> | ||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| const root = useTemplateRef('root'); |
There was a problem hiding this comment.
I think autofixes shouldn't break source code.
I think adding import { useTemplateRef } from 'vue' will inconvenience users who use unplugin-auto-import, but I think not adding import { useTemplateRef } from 'vue' will break it for users who don't use unplugin-auto-import.
Could you change it to add import { useTemplateRef } from 'vue'?
Or could you change it to a suggestion instead of autofix?
There was a problem hiding this comment.
That makes sense. I'll have a try.
FloEdelmann
changed the title
|
Would it make sense to add an option to control whether imports are included during autofix? |
I'd keep it simple for now and either always or never add them. But if you think that an option would make sense and you'd like to spend the extra effort, go ahead 🙂 |
Re-implement of #2632 (closes #2632). (I really love this feature!)
But this PR doesn't insert
import { useTemplateRef } from 'vue'automatically.Because I think that falls outside the scope of this rule. Additionally, some users rely on
unplugin-auto-importand would have to remove the unnecessary import to maintain clean imports.Please merge #2982 first.