VScode doesn't autocomplete variables in custom snippets

Question

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;

Thanks

Answer 1

@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

Answer 2

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!