VS Code : User Snippets : on enter key press

3
votes

I have this custom php snippet 

    "php": {
    "prefix": "php",
    "body": [
        "<?php $1 ?>"
    ],
    "description": "php tag"
}

What I need to do is, when I press Enter at first placeholder i.e $1, it should add a new line with proper indent.

When I type php and press tab, it would do this

<h1><?php | ?></h1>

where | is cursor position. I need this because sometime I use this tag inside html tags, So I want all code in single line.

But when I need php tag alone, like this 

<?php | ?>

And then I press enter key, it should do this

<?php
    |
?>
3
visual-studio-codecode-snippets
It is not clear what you want to accomplish. Can you include what your code should look like after the snippet. Please edit your original question. – Mark
Done, please have a look. – mav-raj
So the real question is why doesn't vscode properly indent the next line when you hit enter. It may be this issue, see github.com/Microsoft/vscode/issues/42782. I would keep an eye on that issue and until it is resolved or verified simply make two snippets: your "inline" one and Alex's "indented". – Mark
It works fine with predefined snippets like while() {here when I hit enter} It does fine. Can't we just do the same thing with users snippets? – mav-raj

3 Answers

0
votes
"body": [
    "<?php",
    "\t$1",
    "?>"
]
0
votes

This body "body": [ "<?php ${1} ?>" ] will show <?php | ?> on tab and afer you press enter it will be as below

<?php 
| ?>
0
votes

Here is what I use for my divs, and it seems like it might help you here. Instead of having to hit enter to expand the tags, they are already expanded. I don't know how to get it to start together and expand only IF you hit enter, but this might help you, so I'll leave it here:

"wrapper div - expanded": {
    "prefix": "dd",
    "body": [
        "<div class='$1'>",
        "  $2",
        "</div>"
    ],
    "description": "creates an expanded div"
}

You could easily create a second snippet that is not expanded, and give it a different prefix (one d for collapsed div and two d's for an expanded div), if you want to have more control.

"wrapper div - collapsed": {
    "prefix": "d",
    "body": [
        "<div class='$1'>$2</div>"
    ],
    "description": "creates a collapsed div"
}