Dont include used attributes in suggestions

.prettierignore

@@ -0,0 +1 @@
+server/src/modes/template/test/completion.test.ts

server/src/modes/template/services/htmlCompletion.ts

@@ -16,6 +16,7 @@ import { NULL_COMPLETION } from '../../nullMode';
 import { getModifierProvider, Modifier } from '../modifierProvider';
 import { toMarkupContent } from '../../../utils/strings';
 import { Priority } from '../tagProviders/common';
+import { kebabCase } from 'lodash';
 
 export function doComplete(
   document: TextDocument,
@@ -147,8 +148,15 @@ export function doComplete(
     return result;
   }
 
+  function getUsedAttributes(offset: number) {
+    const node = htmlDocument.findNodeBefore(offset);
+    return node.attributeNames.map(normalizeAttributeNameToKebabCase);
+  }
+
   function collectAttributeNameSuggestions(nameStart: number, nameEnd: number = offset): CompletionList {
-    const execArray = /^[:@]/.exec(scanner.getTokenText());
+    const usedAttributes = getUsedAttributes(nameStart);
+    const currentAttribute = scanner.getTokenText();
+    const execArray = /^[:@]/.exec(currentAttribute);
     const filterPrefix = execArray ? execArray[0] : '';
     const start = filterPrefix ? nameStart + 1 : nameStart;
     const range = getReplaceRange(start, nameEnd);
@@ -158,6 +166,18 @@ export function doComplete(
     tagProviders.forEach(provider => {
       const priority = provider.priority;
       provider.collectAttributes(currentTag, (attribute, type, documentation) => {
+        if (
+          // include current typing attribute for completing `="$1"`
+          !(attribute === currentAttribute && text[nameEnd] !== '=') &&
+          // can listen to same event by adding modifiers
+          type !== 'event' &&
+          // `class` and `:class`, `style` and `:style` can coexist
+          attribute !== 'class' &&
+          attribute !== 'style' &&
+          usedAttributes.includes(normalizeAttributeNameToKebabCase(attribute))
+        ) {
+          return;
+        }
         if ((type === 'event' && filterPrefix !== '@') || (type !== 'event' && filterPrefix === '@')) {
           return;
         }
@@ -392,3 +412,26 @@ function getWordEnd(s: string, offset: number, limit: number): number {
   }
   return offset;
 }
+
+export function normalizeAttributeNameToKebabCase(attr: string): string {
+  let result = attr;
+
+  if (result.startsWith('v-model:')) {
+    result = attr.slice('v-model:'.length);
+  }
+
+  if (result.startsWith('v-bind:')) {
+    result = attr.slice('v-bind:'.length);
+  } else if (result.startsWith(':')) {
+    result = attr.slice(':'.length);
+  }
+
+  // Remove modifiers
+  if (result.includes('.')) {
+    result = result.slice(0, result.indexOf('.'));
+  }
+
+  result = kebabCase(result);
+
+  return result;
+}

server/src/modes/template/services/vuePropValidation.ts

@@ -4,6 +4,7 @@ import type { TextDocument } from 'vscode-languageserver-textdocument';
 import { HTMLDocument, Node } from '../parser/htmlParser';
 import { kebabCase } from 'lodash';
 import { getSameTagInSet } from '../tagProviders/common';
+import { normalizeAttributeNameToKebabCase } from './htmlCompletion';
 
 export function doPropValidation(document: TextDocument, htmlDocument: HTMLDocument, info: VueFileInfo): Diagnostic[] {
   const diagnostics: Diagnostic[] = [];
@@ -50,7 +51,7 @@ function generateDiagnostic(n: Node, definedProps: PropInfo[], document: TextDoc
   const seenProps = n.attributeNames.map(attr => {
     return {
       name: attr,
-      normalized: normalizeHtmlAttributeNameToKebabCase(
+      normalized: normalizeHtmlAttributeNameToKebabCaseAndReplaceVModel(
         attr,
         definedProps.find(prop => prop.isBoundToModel)?.name ?? 'value'
       )
@@ -86,31 +87,10 @@ function generateDiagnostic(n: Node, definedProps: PropInfo[], document: TextDoc
   };
 }
 
-function normalizeHtmlAttributeNameToKebabCase(attr: string, modelProp: string) {
-  let result = attr;
-
+function normalizeHtmlAttributeNameToKebabCaseAndReplaceVModel(attr: string, modelProp: string) {
   // v-model.trim
-  if (!result.startsWith('v-model:') && result.startsWith('v-model')) {
+  if (!attr.startsWith('v-model:') && attr.startsWith('v-model')) {
     return kebabCase(modelProp);
   }
-
-  // Allow `v-model:prop` in vue 3
-  if (result.startsWith('v-model:')) {
-    result = attr.slice('v-model:'.length);
-  }
-
-  if (result.startsWith('v-bind:')) {
-    result = attr.slice('v-bind:'.length);
-  } else if (result.startsWith(':')) {
-    result = attr.slice(':'.length);
-  }
-
-  // Remove modifiers
-  if (result.includes('.')) {
-    result = result.slice(0, result.indexOf('.'));
-  }
-
-  result = kebabCase(result);
-
-  return result;
+  return normalizeAttributeNameToKebabCase(attr);
 }

server/src/modes/template/test/completion.test.ts

@@ -77,24 +77,21 @@ suite('HTML Completion', () => {
       .become('<input tabindex="$1"');
 
     html`<input t|ype="text"`
-      .has('type')
-      .become('<input type="text"')
+      .hasNo('type')
       .has('tabindex')
       .become('<input tabindex="text"');
 
     html`<input type="text" |`
       .has('style')
       .become('<input type="text" style="$1"')
-      .has('type')
-      .become('<input type="text" type="$1"')
+      .hasNo('type')
       .has('size')
       .become('<input type="text" size="$1"');
 
     html`<input type="text" s|`
       .has('style')
       .become('<input type="text" style="$1"')
-      .has('type')
-      .become('<input type="text" type="$1"')
+      .hasNo('type')
       .has('size')
       .become('<input type="text" size="$1"');
 
@@ -114,7 +111,19 @@ suite('HTML Completion', () => {
 
     html`<input :di| type="text"`.has('dir').become('<input :dir="$1" type="text"');
 
+    html`<input :type="type" |`.hasNo('type');
+
+    html`<input :type.prop="type" |`.hasNo('type');
+
+    // `class` and `:class`, `style` and `:style` can coexist
+    html`<input :class="$style.input" |`.has('class');
+    html`<input style="style" |`.has('style');
+    html`<input :cl|ass="$style.input"`.has('class').become('<input :class="$style.input"');
+
     html`<input @|`.has('mousemove').become('<input @mousemove="$1"');
+
+    // can listen to same event by adding modifiers
+    html`<input @mousemove="mousemove" @|`.has('mousemove').become('<input @mousemove="mousemove" @mousemove="$1"');
   });
 
   test('Complete Value', () => {

test/interpolation/features/completion/property.test.ts

@@ -93,7 +93,7 @@ describe('Should autocomplete interpolation for <template> in property class com
     ];
 
     it(`completes child component's props`, async () => {
-      await testCompletion(parentTemplateDocUri, position(2, 27), propsList);
+      await testCompletion(parentTemplateDocUri, position(2, 26), propsList);
     });
 
     it(`completes child component's props when camel case component name`, async () => {

test/interpolation/fixture/completion/propertyDecorator/Parent.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <basic-property-class :foo=""></basic-property-class>
+    <basic-property-class ></basic-property-class>
     <basic-property-class v-if="" @click="" :foo=""></basic-property-class>
     <BasicPropertyClass  />
     <