Merge pull request #1808 from yoyo930021/fix-hyphen-completion

Fix object property completion when have hyphen

server/src/modes/script/javascript.ts

@@ -165,9 +165,11 @@ export async function getJavascriptMode(
             position,
             label,
             detail,
+            filterText: getFilterText(entry.insertText),
             sortText: entry.sortText + index,
             kind: toCompletionItemKind(entry.kind),
             textEdit: range && TextEdit.replace(range, entry.name),
+            insertText: entry.insertText,
             data: {
               // data used for resolving item details (see 'doResolve')
               languageId: scriptDoc.languageId,
@@ -723,3 +725,28 @@ function convertTSDiagnosticCategoryToDiagnosticSeverity(c: ts.DiagnosticCategor
       return DiagnosticSeverity.Hint;
   }
 }
+
+/* tslint:disable:max-line-length */
+/**
+ * Adapted from https://github.com/microsoft/vscode/blob/2b090abd0fdab7b21a3eb74be13993ad61897f84/extensions/typescript-language-features/src/languageFeatures/completions.ts#L147-L181
+ */
+function getFilterText(insertText: string | undefined): string | undefined {
+  // For `this.` completions, generally don't set the filter text since we don't want them to be overly prioritized. #74164
+  if (insertText?.startsWith('this.')) {
+    return undefined;
+  }
+
+  // Handle the case:
+  // ```
+  // const xyz = { 'ab c': 1 };
+  // xyz.ab|
+  // ```
+  // In which case we want to insert a bracket accessor but should use `.abc` as the filter text instead of
+  // the bracketed insert text.
+  else if (insertText?.startsWith('[')) {
+    return insertText.replace(/^\[['"](.+)[['"]\]$/, '.$1');
+  }
+
+  // In all other cases, fallback to using the insertText
+  return insertText;
+}

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

@@ -1,28 +1,32 @@
-import { activateLS, showFile } from '../../helper';
+import { activateLS } from '../../helper';
 import { position, getDocUri } from '../../util';
 import { testCompletion } from './helper';
 
 describe('Should autocomplete for <script>', () => {
-  const scriptDocUri = getDocUri('completion/script/Basic.vue');
+  const basicUri = getDocUri('completion/script/Basic.vue');
+  const hyphenUri = getDocUri('completion/script/Hyphen.vue');
 
   before('activate', async () => {
     await activateLS();
-    await showFile(scriptDocUri);
   });
 
   it('completes module names when importing', async () => {
-    await testCompletion(scriptDocUri, position(5, 8), ['lodash', 'vue', 'vuex']);
+    await testCompletion(basicUri, position(5, 8), ['lodash', 'vue', 'vuex']);
   });
 
   it('completes for this.', async () => {
-    await testCompletion(scriptDocUri, position(15, 11), ['foo', 'bar', '$store', '$router', '$el', '$data']);
+    await testCompletion(basicUri, position(15, 11), ['foo', 'bar', '$store', '$router', '$el', '$data']);
   });
 
   it('completes for lodash methods with _.', async () => {
-    await testCompletion(scriptDocUri, position(18, 8), ['curry', 'fill']);
+    await testCompletion(basicUri, position(18, 8), ['curry', 'fill']);
   });
 
   it('completes Vue default export methods', async () => {
-    await testCompletion(scriptDocUri, position(20, 4), ['data', 'props', 'mounted']);
+    await testCompletion(basicUri, position(20, 4), ['data', 'props', 'mounted']);
+  });
+
+  it('completes hyphen properties in object', async () => {
+    await testCompletion(hyphenUri, position(6, 4), ['a', 'a-2']);
   });
 });

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

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+const obj = { a: 1, 'a-2': 2 }
+
+obj.
+</script>