How to change default auto selected user snippets behavior in Vs Code

Question

My default code editor is Vscode But recently i am facing some problem while i am trying to use some custom (User) code snippets for Vue js. I wrote some Vuejs custom snippets for my project. While i use some property in Vue instance like el, data, method etc. I saw the curly block area is automatically turn blurry or selected (What it is really called i don't know). While the blurry line remain only Keyboards ESC key can only remove this kind of behavior. It's really annoying. How can i stop this kind of behavior in Vscode while using custom user snippets?

Here is my snippet:

" "Provide the Vue instance an existing DOM element to mount on (Vue.js snippet)": {
    "prefix": "el",
    "body": ["el: $1"],
    "description": "Provide the Vue instance an existing DOM element to mount on (Vue.js snippet)"
},
"The data object for the Vue instance (Vue.js snippet)": {
    "prefix": "data",
    "body": ["data: $1"],
    "description": "The data object for the Vue instance (Vue.js snippet)"
}

Result:

score 0 · Accepted Answer · answered Dec 23 '20 at 17:32

Since you are using the tabstop $1 you can lose the highlighting with the Tab key - Tab moves on to the next tabstop.

But you don't need a tabstop at all from you showed or the last cursor tabstop $0 works. So either

"body": ["data: "],    // or
"body": ["data: $0"],

or Tab after entering your text.

(which are the same thing here) will not highlight the pasted or typed text that you enter after triggering the snippet.

How to change default auto selected user snippets behavior in Vs Code

1 Answers1