Merge branch 'remove-used-attributes-from-suggestion' of https://github.com/sapphi-red/vetur into sapphi-red-remove-used-attributes-from-suggestion

Author: yoyo930021

.prettierignore

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

CHANGELOG.md

@@ -4,7 +4,8 @@
 
 - Show deprecated hint in script block.
 - Infer wrong vue version when no `dependencies` field in package.json. #2632
-- Fix building in directory that has space in the path when development. Thanks to contribution from [@jasonlyu123](https://github.com/jasonlyu123). #2641.
+- 🙌 Fix building in directory that has space in the path when development. Thanks to contribution from [@jasonlyu123](https://github.com/jasonlyu123). #2641.
+- 🙌 Remove used attributes from suggestions. Thanks to contribution from [@sapphi-red](https://github.com/sapphi-red).
 
 ### 0.31.3 | 2020-12-13 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.31.3/vspackage)
 

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 new Set(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.has(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  />
     <