Add support for markup attributes in vue (#92)

microsoft · Apr 5, 2024 · a6ba695 · a6ba695
1 parent ea184b3
commit a6ba695
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 2 deletions.
diff --git a/src/configCompat.ts b/src/configCompat.ts
@@ -45,6 +45,6 @@ export function parseSnippets(snippets: SnippetsMap): SnippetsMap {
  * List of all known syntaxes
  */
 export const syntaxes = {
-    markup: ['html', 'xml', 'xsl', 'jsx', 'js', 'pug', 'slim', 'haml'],
+    markup: ['html', 'xml', 'xsl', 'jsx', 'js', 'pug', 'slim', 'haml', 'vue'],
     stylesheet: ['css', 'sass', 'scss', 'less', 'sss', 'stylus']
 };
diff --git a/src/emmetHelper.ts b/src/emmetHelper.ts
@@ -742,6 +742,31 @@ export function getExpandOptions(syntax: string, emmetConfig?: VSCodeEmmetConfig
 		}
 	}
 
+	if (syntax === 'vue') {
+		// Ref https://github.com/emmetio/emmet/blob/master/src/config.ts#L404
+		const defaultMarkupAttributeOptions = {
+			'class*': ':class',
+		};
+
+		const defaultMarkupValuePrefixOptions = {
+			'class*': '$style'
+		};
+
+		if (profile['markup.attributes']) {
+			userPreferenceOptions['markup.attributes'] = {
+				...defaultMarkupAttributeOptions,
+				...profile['markup.attributes']
+			};
+		}
+
+		if (profile['markup.valuePrefix']) {
+			userPreferenceOptions['markup.valuePrefix'] = {
+				...defaultMarkupValuePrefixOptions,
+				...profile['markup.valuePrefix']
+			};
+		}
+	}
+
 	const combinedOptions: any = {};
 	[...Object.keys(defaultVSCodeOptions), ...Object.keys(userPreferenceOptions)].forEach(key => {
 		const castKey = key as keyof Options;

diff --git a/src/test/emmetHelper.test.ts b/src/test/emmetHelper.test.ts
@@ -257,6 +257,27 @@ describe('Test Basic Expand Options', () => {
 		assert.strictEqual(expandOptions.options['markup.valuePrefix']!['class'], 'valuePrefix');
 		assert.strictEqual(expandOptions.options['markup.attributes']!['class'], 'attributePrefix');
 	})
+
+	it('should support vue markup attributes', () => {
+		const syntax = 'vue';
+		const emmetConfig = {
+			syntaxProfiles: {
+				vue: {
+					'markup.attributes': {
+						'class': 'attributePrefix'
+					},
+					'markup.valuePrefix': {
+						'class': 'valuePrefix'
+					}
+				}
+			}
+		};
+		const expandOptions = getExpandOptions(syntax, emmetConfig);
+		assert.ok(expandOptions.options['markup.valuePrefix']);
+		assert.ok(expandOptions.options['markup.attributes']);
+		assert.strictEqual(expandOptions.options['markup.valuePrefix']!['class'], 'valuePrefix');
+		assert.strictEqual(expandOptions.options['markup.attributes']!['class'], 'attributePrefix');
+	})
 });
 
 describe('Test addons in Expand Options', () => {

diff --git a/src/test/expand.test.ts b/src/test/expand.test.ts
@@ -199,7 +199,20 @@ describe('Expand Abbreviations', () => {
 	// https://github.com/microsoft/vscode/issues/180689
 	testExpandWithCompletion('jsx', '.bar', '<div className="bar">${0}</div>', { 'syntaxProfiles': { 'jsx': { 'jsx.enabled': true }}});
 	testExpandWithCompletion('jsx', '..bar', '<div styleName={styles.bar}>${0}</div>', { 'syntaxProfiles': { 'jsx': { 'jsx.enabled': true }}});
-
+	testExpandWithCompletion(
+		'vue',
+		'..bar',
+		'<div :class="\\$style.bar">${0}</div>',
+		{
+			syntaxProfiles: {
+				vue: {
+					'markup.valuePrefix': {
+						"class*": "$style"
+					}
+				}
+			}
+		}
+	);
 	// https://github.com/microsoft/vscode/issues/137240
 	// testExpandWithCompletion('css', 'dn!important', 'display: none !important;');