Custom HTML snippet in Visual Studio only prints default values

Question

I have an HTML snippet which adds a Label and Input element. But when I invoke the snippet, it doesn't let me alter the literal's, it just adds the tags with default values.

I made a different snippet for C# and that worked as expected ($value$), but even though I've copied the code it doesn't work.

Result when invoking the snippet:

<label for="MyInput">My Label</label> <input type="text" id="MyInput" name="MyInput" />

The snippet:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Shortcut>sltinput</Shortcut>
      <Keywords>
        <Keyword>Html</Keyword>
        <Keyword>input</Keyword>
        <Keyword>label</Keyword>
      </Keywords>
      <SnippetTypes>
        <SnippetType>Expansion</SnippetType>
      </SnippetTypes>
      <Title>Input and Label element</Title>
      <Author>Stein Lundbeck</Author>
      <Description>Creates an input and matching label</Description>
    </Header>
    <Snippet>
      <Declarations>
        <Literal Editable="true">
          <ID>name</ID>
          <ToolTip>Name of element</ToolTip>
          <Default>MyInput</Default>
        </Literal>
        <Literal Editable="true">
          <ID>label</ID>
          <ToolTip>Label content</ToolTip>
          <Default>My Label</Default>
        </Literal>
        <Literal Editable="true">
          <ID>type</ID>
          <ToolTip>Input type</ToolTip>
          <Default>text</Default>
        </Literal>
      </Declarations>
      <Code Language="HTML" Delimiter="$"><![CDATA[<label for="$name$">$label$</label> <input type="$type$" id="$name$" name="$name$" /> $end$]]></Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

Prabhat Yadav · Accepted Answer · 2025-08-07 05:31:52Z

1

That’s just how VS’s HTML editor works—it doesn’t support editable $…$ placeholders, so it always pastes your defaults. Those tab stops only work in the C#/VB/XML editors.

Quick fixes:

Use XML/ASPX: Change <Code Language="HTML"> → <Code Language="XML"> and run it in an .aspx oOR.xml file.
Install Web Essentials: It adds full snippet support to the HTML editor.
Switch to VS Code: Its HTML snippets honor placeholders out of the box.

Hope that helps! :)

answered Aug 7 at 5:31

Prabhat Yadav

705 bronze badges

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

3 Comments

SteinTech Aug 7 at 6:08

ah ok, I didn't know. I work with .cshtml files. How is the support for .cshtml files in VS Code?

Prabhat Yadav Aug 7 at 6:13

VS Code actually does a pretty good job with .cshtml files once you’ve got the C# for Visual Studio Code (OmniSharp) and Razor Language Server extensions installed. Snippet placeholders work reliably there , just add your custom snippets in a razor.json (or html.json) under User Snippets, and you’ll get true tab-stop editing in your Razor views......

SteinTech Aug 7 at 7:56

Snippets are so much better in VS Code, and it works without too much import or adding snippet files. Thanks for the tip! Earlier I suggested for the VS team to support more variables like time, filename, namespace, class, or interface name etc. Now it's very limited, specially versus VS Code

Ved Bohra · Accepted Answer · 2025-08-07 13:21:05Z

1

Answer

VS Code: Use JSON Snippet

To create a working, editable HTML snippet in VS Code, follow these steps:

Step 1: Open Snippet File

Open Command Palette: Ctrl + Shift + P

Type: Preferences: Configure User Snippets

Select: html.json

Step 2: Paste This Code

Paste the following inside the html.json snippet file:

{
  "HTML Input and Label": {
    "prefix": "sltinput",
    "body": [
      "<label for=\"${1:MyInput}\">${2:My Label}</label>",
      "<input type=\"${3:text}\" id=\"${1}\" name=\"${1}\" />"
    ],
    "description": "Creates an input and matching label"
  }
}

Step 3: Test the Snippet

Create or open an index.html file

Type: sltinput

Press Tab

You should see:

<label for="MyInput">My Label</label>
<input type="text" id="MyInput" name="MyInput" />

You can now tab through and edit:

Input ID

Label text

Input type

Screenshot of the implementation :: https://prnt.sc/uI9MC4wxZEPY, https://prnt.sc/4iLatAtG2hcj

answered Aug 7 at 13:21

Ved Bohra

253 bronze badges

1 Comment

SteinTech Aug 7 at 20:42

Thanks, I've already moved my HTML and razor snippets to VS Code. It's strange that VS has so limited support for snippets (and VS Code is completely different).

Collectives™ on Stack Overflow

Custom HTML snippet in Visual Studio only prints default values

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related