Over-ride Default Snippet Prefix in VS Code

Question

I am writing some JavaScript snippets for VS Code, and when I add the one for an event listener, there are a number of pre-defined prefix allocations relating to other pieces of code. I would like to use "ael" as the prefix prompt for this snippet, but that defaults to an alert command (this is particularly frustrating because the first 3 letters of alert are actually "ale"), anyway, is there a way of over-riding the default behaviour?

In the code below if I change the prefix to "ttt", and subsequently type "ttt", the snippet works, when I use "ael" it doesn't.

How do I over-ride this?

SNIPPET

"ael": {
    "prefix": "ael",
    "body": [
        "addEventListener(\"\t$1\", function(){",
        "\t$2",
        "}, false);"
    ],
    "description": "Add an Event Listener",
}

Then give more details. Logically "ael" should overwrite alert keyword. Add a screenshot. — Alex
– Alex, Commented Jan 17, 2018 at 15:41

Alex · Accepted Answer · 2018-02-02 15:53:58Z

3

It's a part of the latest update: 1.19 release notes

When you accept a suggestion it remembers and jumps to the thing that you previously accepted. Here is the issue about controlling this feature: #41060

Since vscode 1.20 there is an option to disable or modify this behavior:

"editor.suggestSelection"

"first" - as it was before (no rememering, no preselecting)

"recentlyUsed" - select the previously used item

"recentlyUsedByPrefix" - select items based on prefixes you have used

edited Feb 2, 2018 at 15:53

answered Jan 17, 2018 at 16:29

Alex

69.4k25 gold badges150 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pjk_ok Over a year ago

Thanks. I'll read that properly when I'm home. The current feature is the single most stupid thing I've seen in a code editor since the time Brackets decided to not allow you to remove all folders from the workspace area so you always had to have one in there even if you weren't using it. Perhaps I'll go back to Atom.

almaceleste · Accepted Answer · 2020-11-02 23:45:16Z

If I understand correctly what is going on with you, then you do not need to scroll through the list. When you type ael, your snippet is already selected in the dropdown list (judging by the screenshot). You just need to press Enter or Tab after that.

Several prefixes in the snippet

In addition, you can add additional prefixes for ease of use in different situations, for example, like this:

    "addEventListener": {
        "prefix": ["ael", "addEventListener"],
        "body": [
            "addEventListener(\"${1:event}\", (${2:e}) => {",
            "\t$0",
            "}, false);"
        ],
        "description": "Add an Event Listener",
    }

After that, if you enter, for example, add or even adli in the javascript file, the list shown below will appear.
In it, you will need to move a few steps down to the addEventListener line and also press Enter or Tab, after which the editor will insert the code from the snippet, select the first placeholder ($1), which in this case contains the name of the event. Next, you can edit it, press Tab to move to the second placeholder ($2), change the input parameter of the function, and then press Tab again to move to the body of the function ($0 - last placeholder).

Suggest selection

And yes, as Alex mentioned in his answer, you can use editor.suggestSelection setting to change the behavior of the pre-selection in the dropdown. As described on code.visualstudio.com:

first - Always select the top list item.

recentlyUsed - (default) The previously used item is selected unless a prefix (type to select) selects a different item.

recentlyUsedByPrefix - Select items based on previous prefixes that have completed those suggestions.

"Type to select" means that the current prefix (roughly the text left of the cursor) is used to filter and sort suggestions. When this happens and when its result differs from the result of recentlyUsed it will be given precedence.

When using the last option, recentlyUsedByPrefix, VS Code remembers which item was selected for a specific prefix (partial text). For example, if you typed co and then selected console, the next time you typed co, the suggestion console would be pre-selected. This lets you quickly map various prefixes to different suggestions, for example co -> console and con -> const.

Snippets in suggestions

As code.visualstudio.com notes:
By default, VS Code shows snippets and completion proposals in one widget. You can control the behavior with the editor.snippetSuggestions setting. Available values for it:

none - remove snippets from the suggestions widget
top - place snippets at the top
bottom - place snippets at the bottom
inline - (default) show snippet suggestions with other suggestions ordered alphabetically

Collectives™ on Stack Overflow

Over-ride Default Snippet Prefix in VS Code

2 Answers 2

1 Comment

Several prefixes in the snippet

Suggest selection

Snippets in suggestions

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Several prefixes in the snippet

Suggest selection

Snippets in suggestions

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related