Emmet expand should autocomplete tags like <div Fixes #29774

extensions/emmet/src/abbreviationActions.ts

@@ -91,13 +91,30 @@ export function expandAbbreviation(args) {
 	let firstAbbreviation: string;
 	let allAbbreviationsSame: boolean = true;
 
-	editor.selections.forEach(selection => {
+	let getAbbreviation = (document: vscode.TextDocument, selection: vscode.Selection, position: vscode.Position, isHtml: boolean): [string, vscode.Range] => {
 		let rangeToReplace: vscode.Range = selection;
-		let position = selection.isReversed ? selection.anchor : selection.active;
-		let abbreviation = editor.document.getText(rangeToReplace);
-		if (rangeToReplace.isEmpty) {
-			[rangeToReplace, abbreviation] = extractAbbreviation(editor.document, position);
+		if (!rangeToReplace.isEmpty) {
+			return [document.getText(rangeToReplace), rangeToReplace];
+		}
+
+		// Expand cases like <div to <div></div> explicitly
+		// else we will end up with <<div></div>
+		if (isHtml) {
+			const currentLine = editor.document.lineAt(position.line).text;
+			const textTillPosition = currentLine.substr(0, position.character);
+			let matches = textTillPosition.match(/<(\w+)$/);
+			if (matches) {
+				let abbreviation = matches[1];
+				rangeToReplace = new vscode.Range(position.translate(0, -(abbreviation.length + 1)), position);
+				return [abbreviation, rangeToReplace];
+			}
 		}
+		return extractAbbreviation(editor.document, position);
+	};
+
+	editor.selections.forEach(selection => {
+		let position = selection.isReversed ? selection.anchor : selection.active;
+		let [abbreviation, rangeToReplace] = getAbbreviation(editor.document, selection, position, syntax === 'html');
 		if (!isAbbreviationValid(syntax, abbreviation)) {
 			vscode.window.showErrorMessage('Emmet: Invalid abbreviation');
 			return;