Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Add autofix to vue/prefer-use-template-ref #2632

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Thomasan1999 wants to merge 10 commits into vuejs:master
base: master
Choose a base branch
Loading
from Thomasan1999:master
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
incorporating PR feedback
  • Loading branch information
Thomasan1999 committed Jun 7, 2025
commit f6aefde5457f0c6421152885904d85228ecba2ee
15 changes: 4 additions & 11 deletions lib/rules/prefer-use-template-ref.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ function addUseTemplateRefImport(context, fixer) {
}

const body = sourceCode.ast.body

const imports = body.filter((node) => node.type === 'ImportDeclaration')

const vueDestructuredImport = imports.find(
Expand All @@ -79,13 +78,12 @@ function addUseTemplateRefImport(context, fixer) {
const lastImportSpecifier = importSpecifiers[importSpecifiers.length - 1]

// @ts-ignore
return fixer.insertTextAfter(lastImportSpecifier, `,useTemplateRef`)
return fixer.insertTextAfter(lastImportSpecifier, `,useTemplateRef`)
}

const importStatement = "import { useTemplateRef } from 'vue';"
const lastImport = imports[imports.length - 1]

const importStatement = "import {useTemplateRef} from 'vue';"

if (lastImport) {
const indent = createIndent(lastImport)

Expand Down Expand Up @@ -168,16 +166,11 @@ module.exports = {
name: scriptRef.node?.callee?.name
},
fix(fixer) {
/** @type {Fix[]} */
const fixes = []

const replaceFunctionFix = fixer.replaceText(
scriptRef.node,
`useTemplateRef('${scriptRef.ref}')`
)

fixes.push(replaceFunctionFix)

if (!missingImportChecked) {
missingImportChecked = true
Copy link
Member

@ota-meshi ota-meshi Jun 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this flag for?
Perhaps to avoid autofix conflicts?
If so, ESLint's autofixes avoid conflicts as much as possible by core, so there's no need to handle that in the rules.

Copy link
Member

@FloEdelmann FloEdelmann Aug 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Thomasan1999 it would be great to get this merged. Could you please have a look into this?


Expand All @@ -187,11 +180,11 @@ module.exports = {
)

if (missingImportFix) {
fixes.push(missingImportFix)
return [replaceFunctionFix, missingImportFix]
}
}

return fixes
return replaceFunctionFix
}
})
}
Expand Down
104 changes: 97 additions & 7 deletions tests/lib/rules/prefer-use-template-ref.js
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ tester.run('prefer-use-template-ref', rule, {
<div ref="root"/>
</template>
<script setup>
import { ref,useTemplateRef } from 'vue';
import { ref,useTemplateRef } from 'vue';
const root = useTemplateRef('root');
</script>
`,
Expand Down Expand Up @@ -350,7 +350,7 @@ tester.run('prefer-use-template-ref', rule, {
<a href="" ref="link">Link</a>
</template>
<script setup>
import { ref,useTemplateRef } from 'vue';
import { ref,useTemplateRef } from 'vue';
const buttonRef = ref();
const link = useTemplateRef('link');
</script>
Expand Down Expand Up @@ -385,7 +385,7 @@ tester.run('prefer-use-template-ref', rule, {
<a href="" ref="link">Link</a>
</template>
<script setup>
import { ref,useTemplateRef } from 'vue';
import { ref,useTemplateRef } from 'vue';
const heading = useTemplateRef('heading');
const link = useTemplateRef('link');
</script>
Expand Down Expand Up @@ -433,7 +433,7 @@ tester.run('prefer-use-template-ref', rule, {
<button ref="button">Click</button>
</template>
<script>
import { ref,useTemplateRef } from 'vue';
import { ref,useTemplateRef } from 'vue';
export default {
name: 'Counter',
setup() {
Expand Down Expand Up @@ -470,7 +470,7 @@ tester.run('prefer-use-template-ref', rule, {
<div ref="root"/>
</template>
<script setup>
import { shallowRef,useTemplateRef } from 'vue';
import { shallowRef,useTemplateRef } from 'vue';
const root = useTemplateRef('root');
</script>
`,
Expand Down Expand Up @@ -500,6 +500,19 @@ tester.run('prefer-use-template-ref', rule, {
}
</script>
`,
output: `
<template>
<button ref="button">Click</button>
</template>
<script>
import { ref, useTemplateRef } from 'vue';
export default {
setup: () => {
const button = useTemplateRef('button');
}
}
</script>
`,
errors: [
{
messageId: 'preferUseTemplateRef',
Expand All @@ -523,6 +536,20 @@ tester.run('prefer-use-template-ref', rule, {
const root = ref()
</script>

<script>
const A = 'foo'
</script>
`,
output: `
<template>
<div ref="root" :data-a="A" />
</template>

<script setup>
import { ref, useTemplateRef } from 'vue'
const root = useTemplateRef('root')
</script>

<script>
const A = 'foo'
</script>
Expand Down Expand Up @@ -554,6 +581,20 @@ tester.run('prefer-use-template-ref', rule, {
const root = ref()
</script>
`,
output: `
<template>
<div ref="root" :data-a="A" />
</template>

<script>
const A = 'foo'
</script>

<script setup>
import { ref, useTemplateRef } from 'vue'
const root = useTemplateRef('root')
</script>
`,
errors: [
{
messageId: 'preferUseTemplateRef',
Expand Down Expand Up @@ -593,7 +634,7 @@ tester.run('prefer-use-template-ref', rule, {
</template>
<script>
import { isEqual } from 'lodash';
import {useTemplateRef} from 'vue';
import {useTemplateRef} from 'vue';
export default {
name: 'Counter',
setup() {
Expand Down Expand Up @@ -640,7 +681,7 @@ tester.run('prefer-use-template-ref', rule, {
<button ref="button">Click</button>
</template>
<script>
import {useTemplateRef} from 'vue';
import {useTemplateRef} from 'vue';
export default {
name: 'Counter',
setup() {
Expand All @@ -660,6 +701,55 @@ tester.run('prefer-use-template-ref', rule, {
column: 28
}
]
},
{
filename: 'script-lang-ts.vue',
code: `
<template>
<p>Button clicked {{counter}} times.</p>
<button ref="button">Click</button>
</template>
<script lang="ts">
export default {
name: 'Counter',
setup() {
const counter = ref(0);
const button = ref<HTMLDivElement>();
}
}
</script>
`,
output: `
<template>
<p>Button clicked {{counter}} times.</p>
<button ref="button">Click</button>
</template>
<script lang="ts">
import { useTemplateRef } from 'vue';
export default {
name: 'Counter',
setup() {
const counter = ref(0);
const button = useTemplateRef('button');
}
}
</script>
`,
languageOptions: {
parserOptions: {
parser: require.resolve('@typescript-eslint/parser')
}
},
errors: [
{
messageId: 'preferUseTemplateRef',
data: {
name: 'ref'
},
line: 11,
column: 28
}
]
}
]
})
Loading

AltStyle によって変換されたページ (->オリジナル) /