[jsx] Automatic HTML indentation and cursor position in JSX. Fixes #18284

extensions/typescript/package.json

@@ -29,6 +29,7 @@
 		"onLanguage:javascriptreact",
 		"onLanguage:typescript",
 		"onLanguage:typescriptreact",
+		"onLanguage:jsx-tags",
 		"onCommand:typescript.reloadProjects",
 		"onCommand:javascript.reloadProjects"
 	],

extensions/typescript/src/typescriptMain.ts

@@ -229,6 +229,23 @@ class LanguageProvider {
 					}
 				]
 			});
+
+			const EMPTY_ELEMENTS: string[] = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr'];
+
+			languages.setLanguageConfiguration('jsx-tags', {
+				wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\$\^\&\*\(\)\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\s]+)/g,
+				onEnterRules: [
+					{
+						beforeText: new RegExp(`<(?!(?:${EMPTY_ELEMENTS.join('|')}))([_:\\w][_:\\w-.\\d]*)([^/>]*(?!/)>)[^<]*$`, 'i'),
+						afterText: /^<\/([_:\w][_:\w-.\d]*)\s*>$/i,
+						action: { indentAction: IndentAction.IndentOutdent }
+					},
+					{
+						beforeText: new RegExp(`<(?!(?:${EMPTY_ELEMENTS.join('|')}))(\\w[\\w\\d]*)([^/>]*(?!/)>)[^<]*$`, 'i'),
+						action: { indentAction: IndentAction.Indent }
+					}
+				],
+			});
 		});
 	}