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>
2 Answers 2
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.aspxoOR.xmlfile.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! :)
3 Comments
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