Snippets with indentation in Visual Studio Code

Question

I'm trying to create a snippet in Visual Studio Code. This works, but the indentation is missing:

My snippet :

"HTML structure": {
    "prefix": "html",
    "body": [
        "<!DOCTYPE html>",
        "<html lang='fr'>",
        "<head>",
            "<meta charset='UTF-8'>",
            "<meta name='viewport' content='width=device-width, initial-scale=1.0'>",
            "<meta http-equiv='X-UA-Compatible' content='ie=edge'>",
            "<title>$1</title>",
        "</head>",
        "<body>",
            "$2",
        "</body>",
        "</html>"
    ],
    "description": "Base template for html file"
}

What you see :

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>test</title>
</head>
<body>
test
</body>
</html>

What I'd like :

<!DOCTYPE html>
<html lang='fr'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title></title>
</head>
<body>
</body>
</html>

IdontCareAboutReputationPoints · Accepted Answer · 2019-11-18 02:20:56Z

29

I think the more appropriate way is to use \t instead of space to maintain document indentation even.

"\t<meta charset='UTF-8'>",

edited Nov 18, 2019 at 2:20

answered Jul 2, 2019 at 10:18

IdontCareAboutReputationPoints

1,7741 gold badge23 silver badges26 bronze badges

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

1 Comment

Seth Over a year ago

Visual Studio Code will convert the tab character into your preferred indentation.

Gama11 · Accepted Answer · 2018-06-25 08:51:59Z

10

The indentation needs to be inside of the strings, not outside (where it's meaningless), so:

"  <meta charset='UTF-8'>",

instead of:

  "<meta charset='UTF-8'>",

This works as intended:

"HTML structure": {
    "prefix": "html",
    "body": [
        "<!DOCTYPE html>",
        "<html lang='fr'>",
        "<head>",
        "  <meta charset='UTF-8'>",
        "  <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
        "  <meta http-equiv='X-UA-Compatible' content='ie=edge'>",
        "  <title>$1</title>",
        "</head>",
        "<body>",
        "  $2",
        "</body>",
        "</html>"
    ],
    "description": "Base template for html file"
}

edited Jun 25, 2018 at 8:51

answered Jun 27, 2017 at 19:43

Gama11

34.6k9 gold badges92 silver badges107 bronze badges

1 Comment

Fahad Javed Over a year ago

Instead of having indentation as hardcoded in strings, you should better use the escape sequence for tab character "\t".

Judson Terrell · Accepted Answer · 2023-02-06 00:02:11Z

I ran into this today and wanted to provide a more "robust" answer.

create a file in the .vscode folder called html.code-snippets please the contents in like i have done here:

{
"client-page": {
    "scope": "html",
    "prefix": "sn-client-page",
    "body": [
        "<ion-content>",
        "\t<ion-grid class=\"grid-full-height\">",
        "\t\t<ion-row>",
        "\t\t\t<ion-col>",
        "\t\t\t\t<header>",
        "\t\t\t\t\t<app-client-name></app-client-name>",
        "\t\t\t\t</header>",
        "\t\t\t</ion-col>",
        "\t\t\t<ion-col>",
        "\t\t\t\t<header>title</header>",
        "\t\t\t</ion-col>",
        "\t\t</ion-row>",
        "\t\t<ion-row>",
        "\t\t\t<ion-col>",
        "\t\t\t\t<!---content-->",
        "\t\t\t</ion-col>",
        "\t\t\t<ion-col>",
        "\t\t\t\t<!---content-->",
        "\t\t\t</ion-col>",
        "\t\t</ion-row>",
        "\t</ion-grid>",
        "</ion-content>",
    ]
  }
}

I can now start typing "sn" (without the quotes) in a vscode html file and will see the snippet name and hit enter... the output is this!

Please note the using \t each time represents amount of tabs/spaces/ indention. I hope this helps someone. Thanks.

Collectives™ on Stack Overflow

Snippets with indentation in Visual Studio Code

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related