CODEWITHSUNDEEP
jsoneditorcode-snippetsvisual-studio-code
pjk_ok
pjk_ok

Reputation: 947

Over-ride Default Snippet Prefix in VS Code

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",
}

enter image description here

Upvotes: 1

Views: 1151

Answers (2)

almaceleste
almaceleste

Reputation: 467

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.
addEventListener dropdown list 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

Upvotes: 0

Alex
Alex

Reputation: 67561

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

Upvotes: 3

Related Questions