Vscode: [snippets] Global snippet option

[jreljac]

• VSCode Version: 1.5.3
• OS Version: macOS 10.12

Currently snippets are defined by language type and only available when a file of that language is open. In an effort to not reproduce snippets between languages I'd like to see a "global" snippet .json file that makes snippets available for any file type, in addition to the file type specific ones defined in Code...Preferences...User Snippets.

Example. I've created a snippet for the CSS margin option:

"margin": { "prefix": "Z_margin", "body": ["margin: ${1:top}px ${2:right}px ${3:bottom}px ${4:left}px;${5:}"], "description": "Margin" }

I'd like to have that available for .css, .html, and .php files without haveing to copy it in all three .json files.

[jrieken]

Makes sense. Needs thinking. @aeschli As the initial creator of this, ideas?

[TheColorRed]

Couldn't you add something like this?

global.json

{
    "My Awesome Snippet": {
        "prefix": "abc",
        "lang": ["css", "php", "html"],
        "body":[
            "abc123!@#"
        ]
    }
}

[TheColorRed]

@jreljac That was just my example of implementation to answer @jrieken question.

[Ciantic]

With HTML / PHP this is particularly annoying since I would like to have my snippets working in the whole PHP file. Right now they work inside "normal" HTML parts, but not for example when I'm inside an attribute value:

e.g.
They work just fine inside html (when defined in html.json):

<div>They work inside this</div>

But they do not work inside an attribute:

<div class="image" style="background-image: url('SNIPPETS DOES NOT WORK HERE');">

I've tried adding my snippets to plaintext, xml etc, nothing seems to work inside attribute value.

[pushkarski]

+1 for idea of common snippets for all/chosen languages

[grigoryvp]

Will be very useful for both multi-language stacks like PHP and VueJS, and for commenting different code with comment-related language snippets

[MunifTanjim]

For user-defined snippets, user/workspace setting could have something like this:

/* this is not an actual implemented option... */
snippets.extend: {
  "javascriptreact": "javascript"
}

which will load all the user-defined "javascript" snippets in the "javascriptreact" files.

[larssb]

I'm actually on the lookout for snippets being available on a workspace level in addition to the implementation as it is today. Here is why; Using Plaster it is easy to get the idea that snippets should be templated. However, when doing this via Plaster you avoid overwritting an potentially already existing "language".json file in the users "snippets" folder.
In regards to precedence I think the workspace snippets should have precedence. There is this other issue, here in the VS Code repo #8102 .... however still leaves with the fact that I have to control for a certain extension to be installed in VS Code. As of now that is not possible with Plaster.

All ideas are welcome. Thank you.

[freMea]

Currently, in last insider, there is no way AFAIK to have a common snippets file for CSS, LESS, SASS, etc. It is bulky. 😓

[OutThisLife]

+1

[kleinfreund]

Some snippets might be completely language-agnostic. I use a couple of snippets for typography:

"doublequotes-en": {
  "prefix": "\"",
  "body": ["“${TM_SELECTED_TEXT}”"],
  "description": "English Quotes"
}

or

```
"en dash": {
"prefix": "--",
"body": ["–"],
"description": "EN DASH"
}

[hansoksendahl]

The lack of global snippets may be my biggest pain point with vscode. I use lambda calculus expressions in my source code comments when I need to explain function composition. Has there been any progress on this feature?

Something like this would be nice. In this example there is a global snippets configuration which has an additional lang parameter (which optionally takes a wildcard). This would allow the user to target several languages at once or to target all languages.

global.json

{
    "Lower Case Lambda": {
        "prefix": "lambda",
        "lang": ["*"],
        "body":[
            "λ"
        ]
    }
}

[ioan-ungurean]

I would also like something like that. Is there any progress on this issue?

[geddski]

this is something I've needed as well

[mcshaman]

+1

Painful having to copy changes from my JavaScript snippets to JavaScript React.

[jrieken]

This is actually related to https://github.com/Microsoft/vscode/issues/22661 which is about adding scopes to snippets. So for once narrowing, e.g. have a snippet only in comments, but also about widening, e.g. this snippet is everywhere.

The idea would be to introduce a new .code-snippet file which doesn't denote it's target language by name but by scope attribute, e.g.

{
    "prefix": "copy",
    "scope": "typescript,javascript",
    "body": [
        "/**",
        "* Copyright ...",
        "*/"
    ],
    "description": "Default Copyright Statement"
}

Two options: Either have one snippet per file and define the name of the snippet from the file name (like it's done in ST) or continue to have multiple snippets per snippet-file... Preferences?

[ioan-ungurean]

I think that having multiple snippets per snippet-file makes more sense than having multiple files with a snippet-name as snippet-file.

[Amparose]

Multiple snippets per file would be great. I also hope that one would be able to have many snippet files as well (be like having multiple snippet libraries or folders of snippet files in ST). Then it would be possible to check out a project, copy the project-specific snippets file across, and be on our way.

[jrieken]

Ok. In that case it'll be .vscode-snippets I guess ;-)

[hansoksendahl]

Here is a dead simple solution.

global.json

{
    "Rainbow": {
        "prefix": "r!",
        "body":[
            "🌈"
        ]
    }
}

my-lang.json

{
    "Unicorn": {
        "prefix": "u!",
        "body":[
            "🦄"
        ]
    }
}

Evaluating snippets for my-lang.

myLangSnippets = Object.assign({}, globalJSON, myLangJSON);

[huarse]

+1

[KamasamaK]

Is scope intended to just be a comma-separated list of language IDs? Is there any plan to make scope more granular? (e.g. TM scope)

[jrieken]

Is there any plan to make scope more granular? (e.g. TM scope)

@KamasamaK That information doesn't actually make it into the core. We have three scopes 'comment', 'string', 'source' which we might expose with this. A sample of a scope would then be: scope: "typescript.comment,javascript"

[jrieken]

This will be available in tomorrows insiders builds (minus bugs). You can now have xyz.code-snippets files. They support a scope attribute which can be a comma-separated list of language ids, e.g.

{
    "Copyright": {
        "prefix": "cr",
        "scope": "typescript,javascript,cpp,c,go,csharp",
        "body": "BigCorp Copyright",
        "description": "Copyright Statement"
    }
}

The snippet will appear in all listed scopes (languages). When the attribute is omitted the snippet will appear in all files.

Last, when configuring snippets you can chose languages and (new!) global snippets or create global snippets.

[jrieken]

Some more tweaks to the configure/creation picker. Now it groups things by existing snippets and allows to create new snippets (globally or per language)

[pmolaro]

+1 for this

I currently dev CFML and would love to be able to use HTML, CSS, CFML snippets all in the same .cfm file. I'd be good with the global.json solution proposed.

[pushkarski]

Thanks a lot for adding a new feature, but the global snippets still don't work inside both multiline and single line comments.

/*
don't work
*/

// don't work too

[grigoryvp]

+1 for the comment issue. While programming, I need snippets mostly to comment same stuff consistently. And the feature is not working for comments for no reason :(

[hansoksendahl]

A bunch of useful single character global snippets. https://gist.github.com/hansoksendahl/d35c4e7b0d831b2d3b008803d2a16ab5