feat(language-service): map sfc compiler errors outside the template inner content

packages/component-meta/lib/base.ts

@@ -719,6 +719,7 @@ function readVueComponentDefaultProps(
 		default?: string;
 		required?: boolean;
 	}> = {};
+	const { sfc } = root;
 
 	scriptSetupWorker();
 	scriptWorker();
@@ -727,12 +728,12 @@ function readVueComponentDefaultProps(
 
 	function scriptSetupWorker() {
 
-		const ast = root._sfc.scriptSetup?.ast;
+		const ast = sfc.scriptSetup?.ast;
 		if (!ast) {
 			return;
 		}
 
-		const codegen = vue.tsCodegen.get(root._sfc);
+		const codegen = vue.tsCodegen.get(sfc);
 		const scriptSetupRanges = codegen?.getScriptSetupRanges();
 
 		if (scriptSetupRanges?.withDefaults?.argNode) {
@@ -785,13 +786,14 @@ function readVueComponentDefaultProps(
 
 	function scriptWorker() {
 
-		const sfc = root._sfc;
+		const ast = sfc.script?.ast;
+		if (!ast) {
+			return;
+		}
 
-		if (sfc.script) {
-			const scriptResult = readTsComponentDefaultProps(sfc.script.ast, 'default', printer, ts);
-			for (const [key, value] of Object.entries(scriptResult)) {
-				result[key] = value;
-			}
+		const scriptResult = readTsComponentDefaultProps(ast, 'default', printer, ts);
+		for (const [key, value] of Object.entries(scriptResult)) {
+			result[key] = value;
 		}
 	}
 }

packages/language-core/lib/virtualFile/vueFile.ts

@@ -17,9 +17,10 @@ export class VueVirtualCode implements VirtualCode {
 
 	// computeds
 
-	_vueSfc = computedVueSfc(this.plugins, this.fileName, this.languageId, this._snapshot);
-	_sfc = computedSfc(this.ts, this.plugins, this.fileName, this._snapshot, this._vueSfc);
-	_mappings = computed(() => {
+	private _vueSfc = computedVueSfc(this.plugins, this.fileName, this.languageId, this._snapshot);
+	private _sfc = computedSfc(this.ts, this.plugins, this.fileName, this._snapshot, this._vueSfc);
+	private _embeddedCodes = computedEmbeddedCodes(this.plugins, this.fileName, this._sfc);
+	private _mappings = computed(() => {
 		const snapshot = this._snapshot();
 		return [{
 			sourceOffsets: [0],
@@ -28,16 +29,21 @@ export class VueVirtualCode implements VirtualCode {
 			data: allCodeFeatures,
 		}];
 	});
-	_embeddedCodes = computedEmbeddedCodes(this.plugins, this.fileName, this._sfc);
 
 	// others
 
-	get embeddedCodes() {
-		return this._embeddedCodes();
-	}
 	get snapshot() {
 		return this._snapshot();
 	}
+	get vueSfc() {
+		return this._vueSfc();
+	}
+	get sfc() {
+		return this._sfc;
+	}
+	get embeddedCodes() {
+		return this._embeddedCodes();
+	}
 	get mappings() {
 		return this._mappings();
 	}

packages/language-service/lib/ideFeatures/nameCasing.ts

@@ -24,7 +24,7 @@ export async function convertTagName(
 		return;
 	}
 
-	const { template } = root._sfc;
+	const { template } = root.sfc;
 	if (!template) {
 		return;
 	}
@@ -71,7 +71,7 @@ export async function convertAttrName(
 		return;
 	}
 
-	const { template } = root._sfc;
+	const { template } = root.sfc;
 	if (!template) {
 		return;
 	}
@@ -172,8 +172,8 @@ export async function detect(
 
 		const result = new Set<TagNameCasing>();
 
-		if (file._sfc.template?.ast) {
-			for (const element of vue.forEachElementNode(file._sfc.template.ast)) {
+		if (file.sfc.template?.ast) {
+			for (const element of vue.forEachElementNode(file.sfc.template.ast)) {
 				if (element.tagType === 1 satisfies CompilerDOM.ElementTypes) {
 					if (element.tag !== hyphenateTag(element.tag)) {
 						// TagName
@@ -208,7 +208,7 @@ function getTemplateTagsAndAttrs(sourceFile: VirtualCode): Tags {
 			if (!(sourceFile instanceof vue.VueVirtualCode)) {
 				return;
 			}
-			const ast = sourceFile._sfc.template?.ast;
+			const ast = sourceFile.sfc.template?.ast;
 			const tags: Tags = new Map();
 			if (ast) {
 				for (const node of vue.forEachElementNode(ast)) {

packages/language-service/lib/plugins/vue-autoinsert-dotvalue.ts

@@ -60,10 +60,8 @@ export function create(
 						return;
 					}
 
-					const blocks = [
-						root._sfc.script,
-						root._sfc.scriptSetup,
-					].filter(block => !!block);
+					const { sfc } = root;
+					const blocks = [sfc.script, sfc.scriptSetup].filter(block => !!block);
 					if (!blocks.length) {
 						return;
 					}

packages/language-service/lib/plugins/vue-complete-define-assignment.ts

@@ -36,8 +36,9 @@ export function create(): LanguageServicePlugin {
 						return;
 					}
 
-					const codegen = tsCodegen.get(root._sfc);
-					const scriptSetup = root._sfc.scriptSetup;
+					const { sfc } = root;
+					const codegen = tsCodegen.get(sfc);
+					const scriptSetup = sfc.scriptSetup;
 					const scriptSetupRanges = codegen?.getScriptSetupRanges();
 					if (!scriptSetup || !scriptSetupRanges) {
 						return;

packages/language-service/lib/plugins/vue-document-drop.ts

@@ -55,17 +55,16 @@ export function create(
 						return;
 					}
 
-					let baseName = importUri.slice(importUri.lastIndexOf('/') + 1);
-					baseName = baseName.slice(0, baseName.lastIndexOf('.'));
-
-					const newName = capitalize(camelize(baseName));
-					const sfc = root._sfc;
+					const { sfc } = root;
 					const script = sfc.scriptSetup ?? sfc.script;
-
 					if (!script) {
 						return;
 					}
 
+					let baseName = importUri.slice(importUri.lastIndexOf('/') + 1);
+					baseName = baseName.slice(0, baseName.lastIndexOf('.'));
+					const newName = capitalize(camelize(baseName));
+
 					const additionalEdit: vscode.WorkspaceEdit = {};
 					const code = [...forEachEmbeddedCode(root)].find(code => code.id === (sfc.scriptSetup ? 'scriptsetup_raw' : 'script_raw'))!;
 					const lastImportNode = getLastImportNode(ts, script.ast);

packages/language-service/lib/plugins/vue-document-links.ts

@@ -27,7 +27,9 @@ export function create(): LanguageServicePlugin {
 					}
 
 					const result: vscode.DocumentLink[] = [];
-					const codegen = tsCodegen.get(root._sfc);
+
+					const { sfc } = root;
+					const codegen = tsCodegen.get(sfc);
 					const scopedClasses = codegen?.getGeneratedTemplate()?.scopedClasses ?? [];
 					const styleClasses = new Map<string, {
 						index: number;
@@ -36,8 +38,8 @@ export function create(): LanguageServicePlugin {
 					}[]>();
 					const option = root.vueCompilerOptions.experimentalResolveStyleCssClasses;
 
-					for (let i = 0; i < root._sfc.styles.length; i++) {
-						const style = root._sfc.styles[i];
+					for (let i = 0; i < sfc.styles.length; i++) {
+						const style = sfc.styles[i];
 						if (option === 'always' || (option === 'scoped' && style.scoped)) {
 							for (const className of style.classNames) {
 								if (!styleClasses.has(className.text.slice(1))) {

packages/language-service/lib/plugins/vue-extract-file.ts

@@ -53,7 +53,7 @@ export function create(
 						return;
 					}
 
-					const sfc = root._sfc;
+					const { sfc } = root;
 					const script = sfc.scriptSetup ?? sfc.script;
 					if (!sfc.template || !script) {
 						return;
@@ -95,7 +95,7 @@ export function create(
 						return codeAction;
 					}
 
-					const sfc = root._sfc;
+					const { sfc } = root;
 					const script = sfc.scriptSetup ?? sfc.script;
 					if (!sfc.template || !script) {
 						return codeAction;

packages/language-service/lib/plugins/vue-inlayhints.ts

@@ -30,21 +30,21 @@ export function create(ts: typeof import('typescript')): LanguageServicePlugin {
 
 					const result: vscode.InlayHint[] = [];
 
-					const codegen = tsCodegen.get(virtualCode._sfc);
+					const codegen = tsCodegen.get(virtualCode.sfc);
 					const inlayHints = [
 						...codegen?.getGeneratedTemplate()?.inlayHints ?? [],
 						...codegen?.getGeneratedScript()?.inlayHints ?? [],
 					];
 					const scriptSetupRanges = codegen?.getScriptSetupRanges();
 
-					if (scriptSetupRanges?.defineProps?.destructured && virtualCode._sfc.scriptSetup?.ast) {
+					if (scriptSetupRanges?.defineProps?.destructured && virtualCode.sfc.scriptSetup?.ast) {
 						const setting = 'vue.inlayHints.destructuredProps';
 						const enabled = await getSettingEnabled(setting);
 
 						if (enabled) {
 							for (const [prop, isShorthand] of findDestructuredProps(
 								ts,
-								virtualCode._sfc.scriptSetup.ast,
+								virtualCode.sfc.scriptSetup.ast,
 								scriptSetupRanges.defineProps.destructured.keys()
 							)) {
 								const name = prop.text;
@@ -62,9 +62,9 @@ export function create(ts: typeof import('typescript')): LanguageServicePlugin {
 					}
 
 					const blocks = [
-						virtualCode._sfc.template,
-						virtualCode._sfc.script,
-						virtualCode._sfc.scriptSetup,
+						virtualCode.sfc.template,
+						virtualCode.sfc.script,
+						virtualCode.sfc.scriptSetup,
 					];
 					const start = document.offsetAt(range.start);
 					const end = document.offsetAt(range.end);

packages/language-service/lib/plugins/vue-sfc.ts

@@ -10,7 +10,7 @@ import { loadLanguageBlocks } from './data';
 let sfcDataProvider: html.IHTMLDataProvider | undefined;
 
 export function create(): LanguageServicePlugin {
-	const htmlPlugin = createHtmlService({
+	const htmlService = createHtmlService({
 		documentSelector: ['vue-root-tags'],
 		useDefaultDataProvider: false,
 		getCustomData(context) {
@@ -23,7 +23,7 @@ export function create(): LanguageServicePlugin {
 				const formatSettings = await context.env.getConfiguration?.<html.HTMLFormatConfiguration>('html.format') ?? {};
 				const blockTypes = ['template', 'script', 'style'];
 
-				for (const customBlock of root._sfc.customBlocks) {
+				for (const customBlock of root.sfc.customBlocks) {
 					blockTypes.push(customBlock.type);
 				}
 
@@ -41,14 +41,21 @@ export function create(): LanguageServicePlugin {
 		},
 	});
 	return {
-		...htmlPlugin,
+		...htmlService,
 		name: 'vue-sfc',
+		capabilities: {
+			...htmlService.capabilities,
+			diagnosticProvider: {
+				interFileDependencies: false,
+				workspaceDiagnostics: false,
+			}
+		},
 		create(context) {
-			const htmlPluginInstance = htmlPlugin.create(context);
+			const htmlServiceInstance = htmlService.create(context);
 
 			return {
 
-				...htmlPluginInstance,
+				...htmlServiceInstance,
 
 				provideDocumentLinks: undefined,
 
@@ -73,11 +80,53 @@ export function create(): LanguageServicePlugin {
 					return options;
 				},
 
+				provideDiagnostics(document, token) {
+					return worker(document, context, async root => {
+						const { vueSfc, sfc } = root;
+						if (!vueSfc) {
+							return;
+						}
+
+						const originalResult = await htmlServiceInstance.provideDiagnostics?.(document, token);
+						const sfcErrors: vscode.Diagnostic[] = [];
+						const { template } = sfc;
+
+						const {
+							startTagEnd = Infinity,
+							endTagStart = -Infinity
+						} = template ?? {};
+
+						for (const error of vueSfc.errors) {
+							if ('code' in error) {
+								const start = error.loc?.start.offset ?? 0;
+								const end = error.loc?.end.offset ?? 0;
+								if (end < startTagEnd || start >= endTagStart) {
+									sfcErrors.push({
+										range: {
+											start: document.positionAt(start),
+											end: document.positionAt(end),
+										},
+										severity: 1 satisfies typeof vscode.DiagnosticSeverity.Error,
+										code: error.code,
+										source: 'vue',
+										message: error.message,
+									});
+								}
+							}
+						}
+
+						return [
+							...originalResult ?? [],
+							...sfcErrors
+						];
+					});
+				},
+
 				provideDocumentSymbols(document) {
 					return worker(document, context, root => {
 
 						const result: vscode.DocumentSymbol[] = [];
-						const sfc = root._sfc;
+						const { sfc } = root;
 
 						if (sfc.template) {
 							result.push({
@@ -162,7 +211,7 @@ export function create(): LanguageServicePlugin {
 				},
 
 				async provideCompletionItems(document, position, context, token) {
-					const result = await htmlPluginInstance.provideCompletionItems?.(document, position, context, token);
+					const result = await htmlServiceInstance.provideCompletionItems?.(document, position, context, token);
 					if (!result) {
 						return;
 					}

packages/language-service/lib/plugins/vue-template.ts

@@ -365,7 +365,7 @@ export function create(
 
 					const originalResult = await baseServiceInstance.provideDiagnostics?.(document, token);
 					const templateErrors: vscode.Diagnostic[] = [];
-					const { template } = root._sfc;
+					const { template } = root.sfc;
 
 					if (template) {
 
@@ -428,7 +428,7 @@ export function create(
 						return;
 					}
 
-					const { template } = root._sfc;
+					const { template } = root.sfc;
 					if (!template) {
 						return;
 					}
@@ -520,7 +520,7 @@ export function create(
 								})());
 								return [];
 							}
-							const scriptSetupRanges = tsCodegen.get(vueCode._sfc)?.getScriptSetupRanges();
+							const scriptSetupRanges = tsCodegen.get(vueCode.sfc)?.getScriptSetupRanges();
 							const names = new Set<string>();
 							const tags: html.ITagData[] = [];
 
@@ -534,7 +534,7 @@ export function create(
 							}
 
 							for (const binding of scriptSetupRanges?.bindings ?? []) {
-								const name = vueCode._sfc.scriptSetup!.content.slice(binding.range.start, binding.range.end);
+								const name = vueCode.sfc.scriptSetup!.content.slice(binding.range.start, binding.range.end);
 								if (casing.tag === TagNameCasing.Kebab) {
 									names.add(hyphenateTag(name));
 								}