Introduction to Emmet & Snippets
We have been using VS Code for many years and are always finding new ways to be more productive with this editor. Having found several tips and tricks that helped us code faster along the way.
Such as shortcut keys, Emmet abbreviations and snippets. So here's some we use, or think will be helpful in getting you started.
Emmet Abbreviations
Emmet abbreviation is a built-in feature for VS Code, with no extension installation required. You may see the abbreviation displayed in the suggestion list as you are typing some code, a wrench icon will appear at the start of the Emmet.
Create initial code in HTML by using ! followed by TAB
Create a link to your CSS file by typing link:css
Create class and id by using . .className and # #idName
Create child element by using > >childElement
Create sibling element by using + h2+p
Create multiple lines of code by using * p*4
Create item numbering by using $ ul>li.item$*3
Create text between HTML tag by using {} ul>li{item$}*3
Create dummy text with Lorem Ipsum for number of words lorem4 , number of lines of text lorem*4 , number of words in a paragraph p>lorem4 , number of paragraphs of text p*4>lorem . Note the 4 in these examples should be changed to the number of words or paragraphs you require.
In addition, there is a cheat sheet on Emmet.io at docs.emmet.io/cheat-sheet
What is Emmet?
Emmet is a built-in feature within VS Code plus a large number of other editors and services, that provides predefined snippets for a number of languages.
These snippets can really speed up your workflow, once you get used to using them. Everyone likes less typing right?!!
Using Emmet
You enter the Emmet snippet within your HTML or CSS file then press Tab to expand the snippet. If you enter the snippet and don't see the option menu press Ctrl + Spacebar then you will be able to press Tab You can also use the Ctrl + Spacebar twice to see a sample of the expanded snippet pressing Ctrl + Spacebar again will close the sample popup.
We have a short overview of Emmet available that covers some of the Emmet abbreviation you can use.
Snippets
Code snippets are templates that make it easier to enter repeating code patterns. So very useful when you have to type the same code every time. Snippets appear in IntelliSense mixed with other suggestions and a block/square will display in front of it identifying it as a snippet.
We have shipped a file to provide some custom snippets for your template.
To use these snippets first start typing in your HTML file jws then select the one you want from the options that appear using the mouse or arrow keys then press tab The code is then generated for you.
You can also create your own snippets using these steps:
- Click the gear icon at the left-bottom corner
- Select 'User Snippets'
- Choose computer language that you prefer
- A JSON file in the chosen language will then appear
- It will have an example snippet for you
You can start creating your own snippets by looking at our example. Though there are 5 components that you have to define.
- Snippet's name - It is displayed via IntelliSense at the end of the suggestions.
- scope - which makes the snippet available only for those specified languages (ie "scope": "html")
- prefix - defines one or more trigger words that display the snippet in IntelliSense which makes VS Code know that it is a snippet.
- body - one or more lines of content that will be generated when you use the snippet. The $ is then used to let VS Code know where your cursor will be when you press the Tab key.
- description - is an optional description of the snippet to explain what the snippet does.
Further Information
Emmet in Visual Studio Code https://code.visualstudio.com/docs/editor/emmet
Snippets in Visual Studio Code https://code.visualstudio.com/docs/editor/userdefinedsnippets
Page Last Edited: