Support optional deprecated when completion

CHANGELOG.md

@@ -11,6 +11,7 @@
 - 🙌 Add command `Vetur: Restart VLS (Vue Language Server)`. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #2331.
 - 🙌 Fix no complete literal string union. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #2300 and #2353.
 - 🙌 Add --version command. Thanks to contribution from [@andrewisaburden](https://github.com/andrewisaburden). #2337.
+- 🙌 Complete with `?.` for optional properies in completion. Thanks to contribution from [@yoyo930021](https://github.com/yoyo930021). #2326 and #2357.
 
 ### 0.28.0 | 2020-09-23 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.28.0/vspackage)
 

server/src/modes/script/javascript.ts

@@ -25,7 +25,8 @@ import {
   CodeAction,
   CodeActionKind,
   WorkspaceEdit,
-  FoldingRangeKind
+  FoldingRangeKind,
+  CompletionItemTag
 } from 'vscode-languageserver-types';
 import { LanguageMode } from '../../embeddedSupport/languageModes';
 import { VueDocumentRegions, LanguageRange } from '../../embeddedSupport/embeddedSupport';
@@ -165,7 +166,7 @@ export async function getJavascriptMode(
           const range = entry.replacementSpan && convertRange(scriptDoc, entry.replacementSpan);
           const { label, detail } = calculateLabelAndDetailTextForPathImport(entry);
 
-          return {
+          const item: CompletionItem = {
             uri: doc.uri,
             position,
             preselect: entry.isRecommended ? true : undefined,
@@ -174,7 +175,7 @@ export async function getJavascriptMode(
             filterText: getFilterText(entry.insertText),
             sortText: entry.sortText + index,
             kind: toCompletionItemKind(entry.kind),
-            textEdit: range && TextEdit.replace(range, entry.name),
+            textEdit: range && TextEdit.replace(range, entry.insertText || entry.name),
             insertText: entry.insertText,
             data: {
               // data used for resolving item details (see 'doResolve')
@@ -183,7 +184,22 @@ export async function getJavascriptMode(
               offset,
               source: entry.source
             }
-          };
+          } as CompletionItem;
+
+          if (entry.kindModifiers) {
+            const kindModifiers = parseKindModifier(entry.kindModifiers ?? '');
+            if (kindModifiers.optional) {
+              item.label += '?';
+            }
+            if (kindModifiers.deprecated) {
+              item.tags = [CompletionItemTag.Deprecated];
+            }
+            if (kindModifiers.color) {
+              item.kind = CompletionItemKind.Color;
+            }
+          }
+
+          return item;
         })
       };
 
@@ -804,6 +820,16 @@ function convertCodeAction(
   return textEdits;
 }
 
+function parseKindModifier(kindModifiers: string) {
+  const kinds = new Set(kindModifiers.split(/,|\s+/g));
+
+  return {
+    optional: kinds.has('optional'),
+    deprecated: kinds.has('deprecated'),
+    color: kinds.has('color')
+  };
+}
+
 function convertTSDiagnosticCategoryToDiagnosticSeverity(c: ts.DiagnosticCategory) {
   switch (c) {
     case ts.DiagnosticCategory.Error:

test/lsp/features/completion/script.test.ts

@@ -6,6 +6,7 @@ describe.only('Should autocomplete for <script>', () => {
   const basicUri = getDocUri('completion/script/Basic.vue');
   const hyphenUri = getDocUri('completion/script/Hyphen.vue');
   const literalUri = getDocUri('completion/script/issue-2300.vue');
+  const kindModifiersUri = getDocUri('completion/script/kindModifiers.vue');
 
   it('completes module names when importing', async () => {
     await testCompletion(basicUri, position(5, 8), ['lodash', 'vue', 'vuex']);
@@ -20,7 +21,7 @@ describe.only('Should autocomplete for <script>', () => {
   });
 
   it('completes Vue default export methods', async () => {
-    await testCompletion(basicUri, position(20, 4), ['data', 'props', 'mounted']);
+    await testCompletion(basicUri, position(20, 4), ['data?', 'props?', 'mounted?']);
   });
 
   it('completes hyphen properties in object', async () => {
@@ -29,5 +30,9 @@ describe.only('Should autocomplete for <script>', () => {
 
   it('completes literal string', async () => {
     await testCompletion(literalUri, position(3, 6), ['black', 'blue']);
+  })
+
+  it('completes optional properties in object', async () => {
+    await testCompletion(kindModifiersUri, position(12, 8), [{ label: 'b?', insertTextValue: '?.b' }]);
   });
 });

test/lsp/fixture/completion/script/kindModifiers.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+export const getData = () => {
+  interface Data {
+    a?: { b?: 1 }
+    /** @deprecated no d */
+    d: 2
+  }
+
+  const res: Data = {
+    d: 2
+  }
+
+  res.a.
+}
+
+getData()
+</script>

test/vue3/features/completion/basic.test.ts

@@ -10,7 +10,7 @@ describe('Vue 3 integration test', () => {
     it('complete `setup`', async () => {
       await testCompletion(fileUri, position(6, 2), [
         {
-          label: 'setup',
+          label: 'setup?',
           kind: CompletionItemKind.Field
         }
       ]);