feat: support inlay hints

close #452

extensions/vscode-vue-language-features/src/common.ts

@@ -228,6 +228,7 @@ function getInitializationOptions(
 				documentLink: true,
 				codeLens: { showReferencesNotification: true },
 				semanticTokens: true,
+				inlayHints: true,
 				diagnostics: { getDocumentVersionRequest: true },
 				schemaRequestService: { getDocumentContentRequest: true },
 			} : {}),

packages/shared/src/types.ts

@@ -57,6 +57,7 @@ export interface ServerInitializationOptions {
 		}
 		semanticTokens?: boolean
 		codeAction?: boolean
+		inlayHints?: boolean;
 		diagnostics?: boolean | {
 			/**
 			 * {@link __requests.GetDocumentVersionRequest}

packages/typescript-language-service/src/index.ts

@@ -23,6 +23,7 @@ import * as semanticTokens from './services/semanticTokens';
 import * as foldingRanges from './services/foldingRanges';
 import * as callHierarchy from './services/callHierarchy';
 import * as implementation from './services/implementation';
+import * as inlayHints from './services/inlayHints';
 import { TextDocument } from 'vscode-languageserver-textdocument';
 import * as shared from '@volar/shared';
 import type * as ts from 'typescript/lib/tsserverlibrary';
@@ -55,6 +56,7 @@ export function createLanguageService(
 		getEditsForFileRename: fileRename.register(languageService, getValidTextDocument, settings),
 		getCodeActions: codeActions.register(languageService, getValidTextDocument, settings),
 		doCodeActionResolve: codeActionResolve.register(languageService, getValidTextDocument, settings),
+		getInlayHints: inlayHints.register(languageService, getValidTextDocument, settings, ts),
 
 		findDocumentHighlights: documentHighlight.register(languageService, getValidTextDocument, ts),
 		findDocumentSymbols: documentSymbol.register(languageService, getValidTextDocument),

packages/typescript-language-service/src/services/inlayHints.ts

@@ -0,0 +1,37 @@
+import * as shared from '@volar/shared';
+import type * as ts from 'typescript/lib/tsserverlibrary';
+import * as vscode from 'vscode-languageserver-protocol';
+import type { TextDocument } from 'vscode-languageserver-textdocument';
+import type { Settings } from '..';
+
+export function register(
+    languageService: ts.LanguageService,
+    getTextDocument: (uri: string) => TextDocument | undefined,
+    settings: Settings,
+    ts: typeof import('typescript/lib/tsserverlibrary'),
+) {
+    return async (uri: string, range: vscode.Range) => {
+
+        const document = getTextDocument(uri);
+        if (!document) return;
+
+        const preferences = await settings.getPreferences?.(document) ?? {};
+        const fileName = shared.uriToFsPath(document.uri);
+        const start = document.offsetAt(range.start);
+        const end = document.offsetAt(range.end);
+        const inlayHints = languageService.provideInlayHints(fileName, { start, length: end - start }, preferences);
+
+        return inlayHints.map(inlayHint => {
+            const result = vscode.InlayHint.create(
+                document.positionAt(inlayHint.position),
+                inlayHint.text,
+                inlayHint.kind === ts.InlayHintKind.Type ? vscode.InlayHintKind.Type
+                    : inlayHint.kind === ts.InlayHintKind.Parameter ? vscode.InlayHintKind.Parameter
+                        : undefined,
+            );
+            result.paddingLeft = inlayHint.whitespaceBefore;
+            result.paddingRight = inlayHint.whitespaceAfter;
+            return result;
+        });
+    };
+}

packages/vue-language-server/src/features/languageFeatures.ts

@@ -215,6 +215,10 @@ export function register(
 	connection.languages.semanticTokens.onRange(async (handler, token, _, resultProgress) => {
 		return onSemanticTokens(handler, token, resultProgress);
 	});
+	connection.languages.inlayHint.on(async handler => {
+		const languageService = await getLanguageService(handler.textDocument.uri);
+		return languageService?.getInlayHints(handler.textDocument.uri, handler.range);
+	});
 	connection.workspace.onWillRenameFiles(async handler => {
 
 		const hasTsFile = handler.files.some(file => file.newUri.endsWith('.vue') || file.newUri.endsWith('.ts') || file.newUri.endsWith('.tsx'));

packages/vue-language-server/src/projects.ts

@@ -133,6 +133,9 @@ export function createProjects(
 			if (options.languageFeatures?.semanticTokens) {
 				connection.languages.semanticTokens.refresh();
 			}
+			if (options.languageFeatures?.inlayHints) {
+				connection.languages.semanticTokens.refresh();
+			}
 		}
 	}
 	async function updateDiagnostics(docUri?: string) {

packages/vue-language-server/src/registers/registerlanguageFeatures.ts

@@ -109,4 +109,7 @@ export function register(
 			resolveProvider: true,
 		};
 	}
+	if (features.inlayHints) {
+		server.inlayHintProvider = true;
+	}
 }

packages/vue-language-service-types/src/index.ts

@@ -75,6 +75,7 @@ export type EmbeddedLanguageServicePlugin = {
         getIncomingCalls(item: vscode.CallHierarchyItem): NotNullableResult<vscode.CallHierarchyIncomingCall[]>;
         getOutgoingCalls(item: vscode.CallHierarchyItem): NotNullableResult<vscode.CallHierarchyOutgoingCall[]>;
     },
+    getInlayHints?(document: TextDocument, range: vscode.Range): NullableResult<vscode.InlayHint[]>,
 
     // html
     findLinkedEditingRanges?(document: TextDocument, position: vscode.Position): NullableResult<vscode.LinkedEditingRanges>;

packages/vue-language-service/src/languageFeatures/inlayHints.ts

@@ -0,0 +1,79 @@
+import * as shared from '@volar/shared';
+import { transformTextEdit } from '@volar/transforms';
+import * as vscode from 'vscode-languageserver-protocol';
+import type { LanguageServiceRuntimeContext } from '../types';
+import { languageFeatureWorker } from '../utils/featureWorkers';
+
+export function register(context: LanguageServiceRuntimeContext) {
+
+	return async (uri: string, range: vscode.Range) => {
+
+		const document = context.getTextDocument(uri);
+
+		if (!document)
+			return;
+
+		const offsetRange = {
+			start: document.offsetAt(range.start),
+			end: document.offsetAt(range.end),
+		};
+
+		return languageFeatureWorker(
+			context,
+			uri,
+			range,
+			(arg, sourceMap) => {
+
+				/**
+				 * copy from ./codeActions.ts
+				 */
+
+				if (!sourceMap.embeddedFile.capabilities.codeActions)
+					return [];
+
+				let minStart: number | undefined;
+				let maxEnd: number | undefined;
+
+				for (const mapping of sourceMap.mappings) {
+					const overlapRange = shared.getOverlapRange2(offsetRange, mapping.sourceRange);
+					if (overlapRange) {
+						const embeddedRange = sourceMap.getMappedRange(overlapRange.start, overlapRange.end)?.[0];
+						if (embeddedRange) {
+							minStart = minStart === undefined ? embeddedRange.start : Math.min(embeddedRange.start, minStart);
+							maxEnd = maxEnd === undefined ? embeddedRange.end : Math.max(embeddedRange.end, maxEnd);
+						}
+					}
+				}
+
+				if (minStart !== undefined && maxEnd !== undefined) {
+					return [vscode.Range.create(
+						sourceMap.mappedDocument.positionAt(minStart),
+						sourceMap.mappedDocument.positionAt(maxEnd),
+					)];
+				}
+
+				return [];
+			},
+			(plugin, document, arg, sourceMap) => {
+				return plugin.getInlayHints?.(document, arg);
+			},
+			(inlayHints, sourceMap) => inlayHints.map(_inlayHint => {
+
+				if (!sourceMap)
+					return _inlayHint;
+
+				const position = sourceMap.getSourceRange(_inlayHint.position, _inlayHint.position, data => !!data.capabilities.completion)?.[0].start;
+				const edits = _inlayHint.textEdits?.map(textEdit => transformTextEdit(textEdit, range => sourceMap.getSourceRange(range.start, range.end)?.[0])).filter(shared.notEmpty);
+
+				if (position) {
+					return {
+						..._inlayHint,
+						position,
+						edits,
+					};
+				}
+			}).filter(shared.notEmpty),
+			arr => arr.flat(),
+		);
+	}
+}

packages/vue-language-service/src/languageService.ts

@@ -38,6 +38,7 @@ import * as renamePrepare from './languageFeatures/renamePrepare';
 import * as signatureHelp from './languageFeatures/signatureHelp';
 import * as diagnostics from './languageFeatures/validation';
 import * as workspaceSymbol from './languageFeatures/workspaceSymbols';
+import * as inlayHints from './languageFeatures/inlayHints';
 import { getTsSettings } from './tsConfigs';
 import { LanguageServiceHost, LanguageServiceRuntimeContext } from './types';
 import { parseVueDocuments } from './vueDocuments';
@@ -286,6 +287,7 @@ export function createLanguageService(
 		findWorkspaceSymbols: defineApi(workspaceSymbol.register(context)),
 		doAutoInsert: defineApi(autoInsert.register(context)),
 		doExecuteCommand: defineApi(executeCommand.register(context)),
+		getInlayHints: defineApi(inlayHints.register(context)),
 		callHierarchy: {
 			doPrepare: defineApi(_callHierarchy.doPrepare),
 			getIncomingCalls: defineApi(_callHierarchy.getIncomingCalls),

packages/vue-language-service/src/plugins/typescript.ts

@@ -191,6 +191,12 @@ export default function (options: {
             }
         },
 
+        getInlayHints(document, range) {
+            if (isTsDocument(document)) {
+                return options.getTsLs().getInlayHints(document.uri, range);
+            }
+        },
+
         format(document, range, options_2) {
             if (isTsDocument(document)) {
                 return options.getTsLs().doFormatting(document.uri, options_2, range);

packages/vue-language-service/src/tsConfigs.ts

@@ -75,6 +75,15 @@ export async function getPreferences(
 		allowIncompleteCompletions: true,
 		displayPartsForJSDoc: true,
 
+		// inlay hints
+		includeInlayParameterNameHints: getInlayParameterNameHintsPreference(config),
+		includeInlayParameterNameHintsWhenArgumentMatchesName: !(config.inlayHints?.parameterNames?.suppressWhenArgumentMatchesName ?? true),
+		includeInlayFunctionParameterTypeHints: config.inlayHints?.parameterTypes?.enabled ?? false,
+		includeInlayVariableTypeHints: config.inlayHints?.variableTypes?.enabled ?? false,
+		includeInlayPropertyDeclarationTypeHints: config.inlayHints?.propertyDeclarationTypes?.enabled ?? false,
+		includeInlayFunctionLikeReturnTypeHints: config.inlayHints?.functionLikeReturnTypes?.enabled ?? false,
+		includeInlayEnumMemberValueHints: config.inlayHints?.enumMemberValues?.enabled ?? false,
+
 		// custom
 		includeCompletionsForModuleExports: config.suggest?.autoImports ?? true,
 	};
@@ -111,3 +120,12 @@ function getImportModuleSpecifierEndingPreference(config: any) {
 function isTypeScriptDocument(doc: TextDocument) {
 	return ['typescript', 'typescriptreact'].includes(doc.languageId);
 }
+
+function getInlayParameterNameHintsPreference(config: any) {
+	switch (config.inlayHints?.parameterNames?.enabled) {
+		case 'none': return 'none';
+		case 'literals': return 'literals';
+		case 'all': return 'all';
+		default: return undefined;
+	}
+}