feat(prefer-use-template-ref): add support for fix option

[Thomasan1999]

Addresses #2554 (comment)

[FloEdelmann]

Can you please add an test case using TypeScript?

<template>
  <div ref="root" />
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  const root = ref<HTMLDivElement>();
</script>

should get autofixed to

<template>
  <div ref="root" />
</template>
<script setup lang="ts">
  import { ref,useTemplateRef } from 'vue';
  const root = useTemplateRef<HTMLDivElement>('root');
</script>

Note that you'll need to specify the parser in the test:

languageOptions: {
  parserOptions: {
    parser: require.resolve('@typescript-eslint/parser')
  }
},

[FloEdelmann]

Suggested change

	return fixer.insertTextAfter(lastImportSpecifier, `,useTemplateRef`)
	return fixer.insertTextAfter(lastImportSpecifier, `, useTemplateRef`)

[FloEdelmann]

Suggested change

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

[FloEdelmann]

1. Let's put the importStatement variable first because it's used in both following branches.
2. Remove the empty line to make it a little more concise.
3. Add spaces between the braces in the added code, to conform with the common Prettier style. (If users don't like it, they can and have to change it either way.)

Suggested change

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

[FloEdelmann]

I think it's a little easier to understand (and shorter) without the fixes array:

Suggested change

	/** @type {Fix[]} */
	const fixes = []
	const replaceFunctionFix = fixer.replaceText(
	scriptRef.node,
	`useTemplateRef('${scriptRef.ref}')`
	)
	fixes.push(replaceFunctionFix)
	if (!missingImportChecked) {
	missingImportChecked = true
	const missingImportFix = addUseTemplateRefImport(
	context,
	fixer
	)
	if (missingImportFix) {
	fixes.push(missingImportFix)
	}
	}
	return fixes
	const replaceFunctionFix = fixer.replaceText(
	scriptRef.node,
	`useTemplateRef('${scriptRef.ref}')`
	)
	if (!missingImportChecked) {
	missingImportChecked = true
	const missingImportFix = addUseTemplateRefImport(
	context,
	fixer
	)
	if (missingImportFix) {
	return [replaceFunctionFix, missingImportFix]
	}
	}
	return replaceFunctionFix