VScode doesn't autocomplete variables in custom snippets

user_9277453 0
Viewed 847

How to turn on the autocompletion in custom-made snippets in VSCode? I create my snippets in javascriptreact.json


  "importReact": {
     "prefix": "import-stateless",
     "body": ["import React from 'react';"],
     "description": "import React statement"
  },

  "consolelog": {
     "prefix": "import-stateless",
     "body": ["console.log($1);"]
  }

and use in my_file.js:

import | from '|'
...
const variable = '';
console.log( | );
...

The problem is: when I type rea in import statement or varia in console.log - VSCode doesn't propose finish my word as react or variable It's problem with custom snippets only, because while manual typing import React from 'r it autocompletes the word react;

see hows it work

Thanks

vscode-settings visual-studio-code
2 Answers

@Mark Thanks for your help! To make work autocomplete in snippets put in settings.json put the suggested line

"editor.suggest.snippetsPreventQuickSuggestions": false

the source

user_92774530

Just figured this out myself and it's really simple.

The issue is just a matter of the cursor status and making sure it's it's set to the final cursor position.

So anywhere you want to be able to use auto-complete for variables, you just add $0 to that spot when you create the snippet, as that denotes the final cursor position: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_tabstops.

"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "clg",
    "body": ["console.log($0);"],
    "description": "Log output to console"
  }

Unlike the prior suggestion, what this does is actually put your cursor there, so you don't need to move your cursor back into the parentheses after the call.

Happy coding!

user_184774870
Related