feat: support auto-complete for directive comments

ref #3215

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

@@ -22,6 +22,7 @@ import createReferencesCodeLensService from './plugins/vue-codelens-references';
 import createVueTemplateLanguageService from './plugins/vue-template';
 import createVueTqService from './plugins/vue-twoslash-queries';
 import createVisualizeHiddenCallbackParamService from './plugins/vue-visualize-hidden-callback-param';
+import createDirectiveCommentsService from './plugins/vue-directive-comments';
 import { TagNameCasing, VueCompilerOptions } from './types';
 
 export interface Settings {
@@ -289,6 +290,7 @@ function resolvePlugins(
 	services['vue/autoInsertParentheses'] ??= createAutoWrapParenthesesService();
 	services['vue/autoInsertSpaces'] ??= createAutoAddSpaceService();
 	services['vue/visualizeHiddenCallbackParam'] ??= createVisualizeHiddenCallbackParamService();
+	services['vue/directiveComments'] ??= createDirectiveCommentsService();
 	services.emmet ??= createEmmetService();
 
 	return services;

packages/vue-language-service/src/plugins/vue-directive-comments.ts

@@ -0,0 +1,63 @@
+import { CompletionItem, Service } from '@volar/language-service';
+
+const cmds = [
+	'vue-ignore',
+	'vue-skip',
+	'vue-expect-error',
+];
+
+const plugin: Service = (): ReturnType<Service> => {
+
+	return {
+
+		triggerCharacters: ['@'],
+
+		provideCompletionItems(document, position) {
+
+			if (document.languageId !== 'html')
+				return;
+
+			const line = document.getText({ start: { line: position.line, character: 0 }, end: position });
+			const cmdStart = line.match(/<!--\s+@/);
+			if (!cmdStart)
+				return;
+
+			const startIndex = cmdStart.index! + cmdStart[0].length;
+			const remainText = line.substring(startIndex);
+			const result: CompletionItem[] = [];
+
+			for (const cmd of cmds) {
+				let match = true;
+				for (let i = 0; i < remainText.length; i++) {
+					if (remainText[i] !== cmd[i]) {
+						console.log(JSON.stringify(remainText[i]), JSON.stringify(cmd[i]));
+						match = false;
+						break;
+					}
+				}
+				if (match) {
+					result.push({
+						label: '@' + cmd,
+						textEdit: {
+							range: {
+								start: {
+									line: position.line,
+									character: startIndex - 1,
+								},
+								end: position,
+							},
+							newText: '@' + cmd,
+						},
+					});
+				}
+			}
+
+			return {
+				isIncomplete: false,
+				items: result,
+			};
+		},
+	};
+};
+
+export default () => plugin;