feat: auto {{}} -> {{ | }}

close #2088

extensions/vscode-vue-language-features/package.json

@@ -406,6 +406,11 @@
 					"default": false,
 					"description": "Auto-complete Ref value with `.value`."
 				},
+				"volar.addSpaceBetweenDoubleCurlyBrackets": {
+					"type": "boolean",
+					"default": true,
+					"description": "Auto add space between double curly brackets: {{|}} -> {{ | }}"
+				},
 				"volar.format.initialIndent": {
 					"type": "object",
 					"description": "Whether to have initial indent.",

packages/language-server/src/registerFeatures.ts

@@ -74,7 +74,11 @@ export function setupSyntacticCapabilities(
 		// https://github.com/microsoft/vscode/blob/ce119308e8fd4cd3f992d42b297588e7abe33a0c/extensions/typescript-language-features/src/languageFeatures/formatting.ts#L99
 		server.documentOnTypeFormattingProvider = {
 			firstTriggerCharacter: ';',
-			moreTriggerCharacter: ['}', '\n'],
+			moreTriggerCharacter: [
+				'}',
+				'\n',
+				'{', // addSpaceBetweenDoubleCurlyBrackets
+			],
 		};
 	}
 }

packages/vscode-language-client/src/features/autoInsertion.ts

@@ -79,32 +79,33 @@ export async function register(
 		lastChange: vscode.TextDocumentContentChangeEvent,
 		provider: (document: vscode.TextDocument, position: vscode.Position, lastChange: vscode.TextDocumentContentChangeEvent, isCancel: () => boolean) => Thenable<string | vscode.TextEdit | null | undefined>,
 	) {
-		const rangeStart = lastChange.range.start;
 		const version = document.version;
 		timeout = setTimeout(() => {
-			const position = new vscode.Position(rangeStart.line, rangeStart.character + lastChange.text.length);
-			provider(document, position, lastChange, () => vscode.window.activeTextEditor?.document.version !== version).then(text => {
-				if (text && isEnabled) {
-					const activeEditor = vscode.window.activeTextEditor;
-					if (activeEditor) {
-						const activeDocument = activeEditor.document;
-						if (document === activeDocument && activeDocument.version === version) {
-							if (typeof text === 'string') {
-								const selections = activeEditor.selections;
-								if (selections.length && selections.some(s => s.active.isEqual(position))) {
-									activeEditor.insertSnippet(new vscode.SnippetString(text), selections.map(s => s.active));
+			const position = vscode.window.activeTextEditor?.selections.length === 1 && vscode.window.activeTextEditor.selections[0].active;
+			if (position) {
+				provider(document, position, lastChange, () => vscode.window.activeTextEditor?.document.version !== version).then(text => {
+					if (text && isEnabled) {
+						const activeEditor = vscode.window.activeTextEditor;
+						if (activeEditor) {
+							const activeDocument = activeEditor.document;
+							if (document === activeDocument && activeDocument.version === version) {
+								if (typeof text === 'string') {
+									const selections = activeEditor.selections;
+									if (selections.length && selections.some(s => s.active.isEqual(position))) {
+										activeEditor.insertSnippet(new vscode.SnippetString(text), selections.map(s => s.active));
+									}
+									else {
+										activeEditor.insertSnippet(new vscode.SnippetString(text), position);
+									}
 								}
 								else {
-									activeEditor.insertSnippet(new vscode.SnippetString(text), position);
+									activeEditor.insertSnippet(new vscode.SnippetString(text.newText), text.range);
 								}
 							}
-							else {
-								activeEditor.insertSnippet(new vscode.SnippetString(text.newText), text.range);
-							}
 						}
 					}
-				}
-			});
+				});
+			}
 			timeout = undefined;
 		}, 100);
 	}

vue-language-tools/vue-language-service/src/documentService.ts

@@ -7,6 +7,7 @@ import useTsPlugin from '@volar-plugins/typescript';
 import { DocumentServiceRuntimeContext } from '@volar/language-service';
 import useVuePlugin from './plugins/vue';
 import useAutoWrapParenthesesPlugin from './plugins/vue-autoinsert-parentheses';
+import useAutoAddSpacePlugin from './plugins/vue-autoinsert-space';
 import * as embeddedLS from '@volar/language-service';
 import * as vue from '@volar/vue-language-core';
 import * as shared from '@volar/shared';
@@ -29,6 +30,7 @@ export function getDocumentServicePlugins(
 	const autoWrapParenthesesPlugin = useAutoWrapParenthesesPlugin({
 		getVueDocument: doc => context.getSourceFileDocument(doc)?.[0],
 	});
+	const autoAddSpacePlugin = useAutoAddSpacePlugin();
 	const pugFormatPlugin = usePugFormatPlugin();
 
 	return [
@@ -40,6 +42,7 @@ export function getDocumentServicePlugins(
 		jsonPlugin,
 		tsPlugin,
 		autoWrapParenthesesPlugin,
+		autoAddSpacePlugin,
 	];
 }
 

vue-language-tools/vue-language-service/src/plugins/vue-autoinsert-space.ts

@@ -0,0 +1,37 @@
+import { LanguageServicePlugin, LanguageServicePluginContext } from '@volar/language-service';
+
+export default function (): LanguageServicePlugin {
+
+	let context: LanguageServicePluginContext;
+
+	return {
+
+		setup(_context) {
+			context = _context;
+		},
+
+		async doAutoInsert(document, position) {
+
+			if (document.languageId === 'html' || document.languageId === 'jade') {
+
+				const enabled = await context.env.configurationHost?.getConfiguration<boolean>('volar.addSpaceBetweenDoubleCurlyBrackets') ?? true;
+				if (!enabled)
+					return;
+
+				const prev = document.getText({
+					start: { line: position.line, character: position.character - 2 },
+					end: position,
+				});
+				if (prev === '{{') {
+					const next = document.getText({
+						start: position,
+						end: { line: position.line, character: position.character + 2 },
+					});
+					if (next === '}}') {
+						return ` $0 `;
+					}
+				}
+			}
+		},
+	};
+}