feat(typescript-plugin): add support for template "Add Import" quick fix (#5799)

serkodev · johnsoncodehk · web-flow · commit b8503cdb0b92 · 2025-12-04T20:30:34.000+08:00
Co-authored-by: Johnson Chu &lt;johnsoncodehk@gmail.com&gt;
diff --git a/packages/language-core/lib/codegen/codeFeatures.ts b/packages/language-core/lib/codegen/codeFeatures.ts
@@ -7,18 +7,15 @@ const raw = {
 		semantic: true,
 		navigation: true,
 	},
-	htmlAutoImportOnly: {
-		htmlAutoImport: true,
+	importCompletionOnly: {
+		__importCompletion: true,
 	},
 	verification: {
 		verification: true,
 	},
 	completion: {
 		completion: true,
 	},
-	additionalCompletion: {
-		completion: { isAdditional: true },
-	},
 	withoutCompletion: {
 		verification: true,
 		semantic: true,
@@ -30,9 +27,9 @@ const raw = {
 	navigationWithoutRename: {
 		navigation: { shouldRename: () => false },
 	},
-	navigationAndAdditionalCompletion: {
+	navigationAndCompletion: {
 		navigation: true,
-		completion: { isAdditional: true },
+		completion: true,
 	},
 	navigationAndVerification: {
 		navigation: true,
diff --git a/packages/language-core/lib/codegen/template/context.ts b/packages/language-core/lib/codegen/template/context.ts
@@ -314,7 +314,7 @@ export function createTemplateCodegenContext(
 							source,
 							offset,
 							{
-								...codeFeatures.additionalCompletion,
+								...codeFeatures.importCompletionOnly,
 								...codeFeatures.semanticWithoutHighlight,
 							},
 						];
@@ -324,7 +324,7 @@ export function createTemplateCodegenContext(
 							varName,
 							source,
 							offset,
-							codeFeatures.additionalCompletion,
+							codeFeatures.importCompletionOnly,
 						];
 					}
 					yield `,`;
diff --git a/packages/language-core/lib/codegen/template/element.ts b/packages/language-core/lib/codegen/template/element.ts
@@ -114,7 +114,7 @@ export function* generateComponent(
 
 		// auto import support
 		yield `// @ts-ignore${newLine}`; // #2304
-		yield* generateCamelized(capitalize(node.tag), 'template', tagOffsets[0], codeFeatures.htmlAutoImportOnly);
+		yield* generateCamelized(capitalize(node.tag), 'template', tagOffsets[0], codeFeatures.importCompletionOnly);
 		yield endOfLine;
 	}
 	else if (dynamicTagInfo) {
@@ -190,7 +190,7 @@ export function* generateComponent(
 
 			// auto import support
 			yield `// @ts-ignore${newLine}`; // #2304
-			yield* generateCamelized(capitalize(node.tag), 'template', tagOffsets[0], codeFeatures.htmlAutoImportOnly);
+			yield* generateCamelized(capitalize(node.tag), 'template', tagOffsets[0], codeFeatures.importCompletionOnly);
 			yield endOfLine;
 		}
 	}
diff --git a/packages/language-core/lib/codegen/template/styleScopedClasses.ts b/packages/language-core/lib/codegen/template/styleScopedClasses.ts
@@ -17,7 +17,7 @@ export function* generateStyleScopedClassReference(
 ): Generator<Code> {
 	if (!className) {
 		yield `/** @type {__VLS_StyleScopedClasses['`;
-		yield ['', 'template', offset, codeFeatures.additionalCompletion];
+		yield ['', 'template', offset, codeFeatures.completion];
 		yield `']} */${endOfLine}`;
 		return;
 	}
@@ -39,7 +39,7 @@ export function* generateStyleScopedClassReference(
 		className,
 		block.name,
 		offset,
-		codeFeatures.navigationAndAdditionalCompletion,
+		codeFeatures.navigationAndCompletion,
 		classNameEscapeRegex,
 	);
 	yield `'`;
diff --git a/packages/language-core/lib/types.ts b/packages/language-core/lib/types.ts
@@ -17,7 +17,7 @@ export type RawVueCompilerOptions = Partial<Omit<VueCompilerOptions, 'target' |
 };
 
 export interface VueCodeInformation extends CodeInformation {
-	htmlAutoImport?: boolean;
+	__importCompletion?: boolean;
 	__combineToken?: symbol;
 	__linkedToken?: symbol;
 }
diff --git a/packages/language-server/tests/quickFix.spec.ts b/packages/language-server/tests/quickFix.spec.ts
@@ -0,0 +1,102 @@
+import type { TextDocument } from '@volar/language-server';
+import { afterEach, expect, test } from 'vitest';
+import { URI } from 'vscode-uri';
+import { getLanguageServer, testWorkspacePath } from './server.js';
+
+const openedDocuments: TextDocument[] = [];
+
+afterEach(async () => {
+	const server = await getLanguageServer();
+	for (const document of openedDocuments) {
+		await server.close(document.uri);
+	}
+	openedDocuments.length = 0;
+});
+
+test('"Add import" quick fix for undefined variable in template', async () => {
+	await prepareDocument('tsconfigProject/fixture.ts', 'typescript', `export function foo() {}`);
+
+	const codeFixes = await requestCodeFixes(
+		'tsconfigProject/fixture.vue',
+		'vue',
+		`
+    <template>
+            <button @click="|foo"></button>
+    </template>
+
+    <script setup lang="ts">
+    </script>
+    `,
+		'foo',
+	);
+
+	expect(
+		codeFixes.some(
+			codeFix =>
+				codeFix.fixName === 'import'
+				&& codeFix.description.includes('./fixture'),
+		),
+	).toBe(true);
+});
+
+async function requestCodeFixes(
+	fileName: string,
+	languageId: string,
+	content: string,
+	identifier: string,
+) {
+	const offset = content.indexOf('|');
+	expect(offset).toBeGreaterThanOrEqual(0);
+
+	content = content.slice(0, offset) + content.slice(offset + 1);
+
+	const server = await getLanguageServer();
+	const document = await prepareDocument(fileName, languageId, content);
+	const start = document.positionAt(offset);
+	const end = document.positionAt(offset + identifier.length);
+
+	const diagnostics = await server.tsserver.message({
+		seq: server.nextSeq(),
+		command: 'semanticDiagnosticsSync',
+		arguments: {
+			file: URI.parse(document.uri).fsPath,
+			startLine: start.line + 1,
+			startOffset: start.character + 1,
+			endLine: end.line + 1,
+			endOffset: end.character + 1,
+		},
+	});
+	expect(diagnostics.success).toBe(true);
+
+	const errorCodes = (diagnostics.body as any[])
+		.map((diagnostic: any) => diagnostic.code)
+		.filter((code): code is number => typeof code === 'number');
+
+	expect(errorCodes.length).toBeGreaterThan(0);
+
+	const res = await server.tsserver.message({
+		seq: server.nextSeq(),
+		command: 'getCodeFixes',
+		arguments: {
+			file: URI.parse(document.uri).fsPath,
+			startLine: start.line + 1,
+			startOffset: start.character + 1,
+			endLine: end.line + 1,
+			endOffset: end.character + 1,
+			errorCodes,
+		},
+	});
+
+	expect(res.success).toBe(true);
+	return res.body as any[];
+}
+
+async function prepareDocument(fileName: string, languageId: string, content: string) {
+	const server = await getLanguageServer();
+	const uri = URI.file(`${testWorkspacePath}/${fileName}`);
+	const document = await server.open(uri.toString(), languageId, content);
+	if (openedDocuments.every(d => d.uri !== document.uri)) {
+		openedDocuments.push(document);
+	}
+	return document;
+}
diff --git a/packages/typescript-plugin/index.ts b/packages/typescript-plugin/index.ts
@@ -2,7 +2,12 @@ import { transformFileTextChanges } from '@volar/typescript/lib/node/transform.j
 import { createLanguageServicePlugin } from '@volar/typescript/lib/quickstart/createLanguageServicePlugin';
 import * as core from '@vue/language-core';
 import type * as ts from 'typescript';
-import { createVueLanguageServiceProxy, resolveCompletionEntryDetails, resolveCompletionResult } from './lib/common';
+import {
+	postprocessLanguageService,
+	preprocessLanguageService,
+	resolveCompletionEntryDetails,
+	resolveCompletionResult,
+} from './lib/common';
 import type { Requests } from './lib/requests';
 import { collectExtractProps } from './lib/requests/collectExtractProps';
 import { getComponentDirectives } from './lib/requests/getComponentDirectives';
@@ -32,10 +37,14 @@ export = createLanguageServicePlugin(
 		vueOptions.globalTypesPath = core.createGlobalTypesWriter(vueOptions, ts.sys.writeFile);
 		addVueCommands();
 
+		let _language: core.Language<string> | undefined;
+		preprocessLanguageService(info.languageService, () => _language);
+
 		return {
 			languagePlugins: [languagePlugin],
 			setup: language => {
-				info.languageService = createVueLanguageServiceProxy(
+				_language = language;
+				info.languageService = postprocessLanguageService(
 					ts,
 					language,
 					info.languageService,
@@ -140,7 +149,7 @@ export = createLanguageServicePlugin(
 					}
 					const map = language.maps.get(code, sourceScript);
 					for (const [tsPosition, mapping] of map.toGeneratedLocation(position)) {
-						if (!(mapping.data as core.VueCodeInformation).htmlAutoImport) {
+						if (!(mapping.data as core.VueCodeInformation).__importCompletion) {
 							continue;
 						}
 						const tsPosition2 = tsPosition + sourceScript.snapshot.getLength();
diff --git a/packages/typescript-plugin/lib/common.ts b/packages/typescript-plugin/lib/common.ts
@@ -1,10 +1,108 @@
-import { type Language, type VueCompilerOptions, VueVirtualCode } from '@vue/language-core';
+import {
+	toGeneratedOffset,
+	toGeneratedRange,
+	toSourceOffsets,
+	toSourceRanges,
+} from '@volar/typescript/lib/node/transform';
+import { getServiceScript } from '@volar/typescript/lib/node/utils';
+import { type Language, type VueCodeInformation, type VueCompilerOptions, VueVirtualCode } from '@vue/language-core';
 import { capitalize, isGloballyAllowed } from '@vue/shared';
 import type * as ts from 'typescript';
 
 const windowsPathReg = /\\/g;
 
-export function createVueLanguageServiceProxy<T>(
+export function preprocessLanguageService(
+	languageService: ts.LanguageService,
+	getLanguage: () => Language<any> | undefined,
+) {
+	const { getCompletionsAtPosition, getCodeFixesAtPosition } = languageService;
+
+	languageService.getCompletionsAtPosition = (fileName, position, preferences, formatOptions) => {
+		let result = getCompletionsAtPosition(fileName, position, preferences, formatOptions);
+		const language = getLanguage();
+		if (language) {
+			const [serviceScript, targetScript, sourceScript] = getServiceScript(language, fileName);
+			if (serviceScript && sourceScript?.generated?.root instanceof VueVirtualCode) {
+				for (
+					const sourceOffset of toSourceOffsets(
+						sourceScript,
+						language,
+						serviceScript,
+						position,
+						() => true,
+					)
+				) {
+					const generatedOffset2 = toGeneratedOffset(
+						language,
+						serviceScript,
+						sourceScript,
+						sourceOffset[1],
+						(data: VueCodeInformation) => !!data.__importCompletion,
+					);
+					if (generatedOffset2 !== undefined) {
+						const completion2 = getCompletionsAtPosition(targetScript.id, generatedOffset2, preferences, formatOptions);
+						if (completion2) {
+							const existingNames = new Set(result?.entries.map(entry => entry.name));
+							for (const entry of completion2.entries) {
+								if (!existingNames.has(entry.name)) {
+									result?.entries.push(entry);
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		return result;
+	};
+	languageService.getCodeFixesAtPosition = (fileName, start, end, errorCodes, formatOptions, preferences) => {
+		let fixes = getCodeFixesAtPosition(fileName, start, end, errorCodes, formatOptions, preferences);
+		const language = getLanguage();
+		if (
+			language
+			&& errorCodes.includes(2339) // Property 'xxx' does not exist on type 'yyy'.ts(2339)
+		) {
+			const [serviceScript, targetScript, sourceScript] = getServiceScript(language, fileName);
+			if (serviceScript && sourceScript?.generated?.root instanceof VueVirtualCode) {
+				for (
+					const sourceRange of toSourceRanges(
+						sourceScript,
+						language,
+						serviceScript,
+						start,
+						end,
+						true,
+						() => true,
+					)
+				) {
+					const generateRange2 = toGeneratedRange(
+						language,
+						serviceScript,
+						sourceScript,
+						sourceRange[1],
+						sourceRange[2],
+						(data: VueCodeInformation) => !!data.__importCompletion,
+					);
+					if (generateRange2 !== undefined) {
+						let importFixes = getCodeFixesAtPosition(
+							targetScript.id,
+							generateRange2[0],
+							generateRange2[1],
+							[2304], // Cannot find name 'xxx'.ts(2304)
+							formatOptions,
+							preferences,
+						);
+						importFixes = importFixes.filter(fix => fix.fixName === 'import');
+						fixes = fixes.concat(importFixes);
+					}
+				}
+			}
+		}
+		return fixes;
+	};
+}
+
+export function postprocessLanguageService<T>(
 	ts: typeof import('typescript'),
 	language: Language<T>,
 	languageService: ts.LanguageService,
diff --git a/test-workspace/tsconfigProject/fixture.ts b/test-workspace/tsconfigProject/fixture.ts

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@ export function* generateComponent(`
`114`	`114`
`115`	`115`	`// auto import support`
`116`	`116`	yield `// @ts-ignore${newLine}`; // #2304
`117`		`- yield* generateCamelized(capitalize(node.tag), 'template', tagOffsets[0], codeFeatures.htmlAutoImportOnly);`
	`117`	`+ yield* generateCamelized(capitalize(node.tag), 'template', tagOffsets[0], codeFeatures.importCompletionOnly);`
`118`	`118`	`yield endOfLine;`
`119`	`119`	`}`
`120`	`120`	`else if (dynamicTagInfo) {`
`@@ -190,7 +190,7 @@ export function* generateComponent(`
`190`	`190`
`191`	`191`	`// auto import support`
`192`	`192`	yield `// @ts-ignore${newLine}`; // #2304
`193`		`- yield* generateCamelized(capitalize(node.tag), 'template', tagOffsets[0], codeFeatures.htmlAutoImportOnly);`
	`193`	`+ yield* generateCamelized(capitalize(node.tag), 'template', tagOffsets[0], codeFeatures.importCompletionOnly);`
`194`	`194`	`yield endOfLine;`
`195`	`195`	`}`
`196`	`196`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export type RawVueCompilerOptions = Partial<Omit<VueCompilerOptions, 'target' \|`
`17`	`17`	`};`
`18`	`18`
`19`	`19`	`export interface VueCodeInformation extends CodeInformation {`
`20`		`- htmlAutoImport?: boolean;`
	`20`	`+ __importCompletion?: boolean;`
`21`	`21`	`__combineToken?: symbol;`
`22`	`22`	`__linkedToken?: symbol;`
`23`	`23`	`}`