Vscode: Snippet in Snippet (SubSnippet) - against duplication code of snippets

[lukaszpolowczyk]

Steps to Reproduce:

Example, react-component with declared types:

"types for component": {
    "scope": "javascript,javascriptreact",
    "prefix": "types-for-component",
    "body": [
        "/**",
        "* @augments {Component<{$2}, {}>}",
        "*/"
    ]
},
"component react": {
    "scope": "javascript,javascriptreact",
    "prefix": "component-react",
    "body": [
        "class $1 extends Component {",
        "\tstate = {};",
        "\t\trender() {",
        "\t\treturn (",
        "\t\t\t<div>",
        "\t\t\t$3",
        "\t\t\t</div>",
        "\t\t)",
        "\t}",
        "}"
    ]
},
"component with types": {
    "scope": "javascript,javascriptreact",
    "prefix": "component-with-types",
    "body": [
        "/**",
        "* @augments {Component<{$2}, {}>}",
        "*/",
        "class $1 extends Component {",
        "\tstate = {};",
        "\t\trender() {",
        "\t\treturn (",
        "\t\t\t<div>",
        "\t\t\t$3",
        "\t\t\t</div>",
        "\t\t)",
        "\t}",
        "}"
    ]
}

There you need to rewrite body of types-for-component and component-with-types.

I propose:

"types for component": {
    "scope": "javascript,javascriptreact",
    "prefix": "types-for-component",
    "body": [
        "/**",
        "* @augments {Component<{$2}, {}>}",
        "*/"
    ]
},
"component react": {
    "scope": "javascript,javascriptreact",
    "prefix": "component-react",
    "body": [
        "class $1 extends Component {",
        "\tstate = {};",
        "\t\trender() {",
        "\t\treturn (",
        "\t\t\t<div>",
        "\t\t\t$3",
        "\t\t\t</div>",
        "\t\t)",
        "\t}",
        "}"
    ]
}

And someting like that:

"component with types": {
    "scope": "javascript,javascriptreact",
    "prefix": "component-with-types",
    "body": [
        "${types-for-component}",
        "${component-react}"
    ]
}

Where ${types-for-component} and ${component-react} just paste whole body of snippets(even multi-line).
Numeric variables must be set in a universal order so that they work correctly after gluing (they do not overwrite each other).

I guess it's fairly easy to implement?

[jrieken]

Not yet sold on the idea. The syntax in your proposal is already used by variables, also it's not clear if you can cross-reference snippets from other snippets only. Last, authoring snippets isn't done frequently (at least in my workflow) so I wonder if we optimise at the wrong end.

[lukaszpolowczyk]

@jrieken
That's the point, to treat them as variables (any prefix or name) to the body snippet. These names, from a given file, should be automatically ready variables.

I prefer to prepare my own snippets.
When I use ready-made ones, the names are not always intuitive. Besides, there are too many of them (?), Even from a single source, cluttering the intelliSence hints (this is perhaps a completely different subject that snippets should appear more contextually).

Perhaps you will find that it is too small a thing to lean on it.
However, it seems to me that it should be simple enough to implement, that it will not take much time, however it is worth doing.

[jrieken]

at's the point, to treat them as variables (any prefix or name) to the body snippet.

But conflicts with how variables are defined and it's not us defining them but we try to be somewhat TextMate compatible.

[lukaszpolowczyk]

@jrieken
The syntax is like this:
http://docs.sublimetext.info/en/latest/extensibility/snippets.html#substitutions

Just as you can use ${TM_FILENAME}, you can use ${types-for-component} as well.
These names will most often not overlap (if only because global variables use uppercase letters).

Compatibility - I do not know what power you have, but maybe you can also take it there. It's good that you maintain compatibility. But if such an extra function does not bite with the rest, I think that it will not disturb anyone so far.

[moranje]

Just to chime in here, I use this feature in my custom monaco editor. The syntax I use for instantly expanding snippets is ${!int:reference}.

! signifies an instant expansion at first Insert
int is used to anchor the reflow of tabstops inside the instantly inserted snippet
reference is a snippet name

The way I have implemented this, the instant insertion is recursive which allows for fairly complex snippet composition.

[madmidi]

Thanks, Martien, that sounds great.
I would need those nested sub snippets for my plenty PowerShell snippets, too.
Too much doubled code is always an issue.
e.g. the snippets for:
function
Param() section of a function
single parameter
parameter attributes

[vscodebot[bot]]

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!