VS Code Emmet Abbreviations and Snippets make your life easier

I have been using VS Code for many years and always find new ways to be more productive with this editor. I have found several tips and tricks that help me code faster such as shortcut key, Emmet abbreviation, snippet and so on. So, let’s get started.

Emmet Abbreviations

Emmet abbreviation is built-in feature for VS Code, no extension installation required. You may see the abbreviation displayed in the suggestion list when you are typing some code. Wrench icon will be appeared at the start of the Emmet.

1. Create initial code in html by using ! + TAB

create initial code

2. Create class and id by using .className and #idName

Create class and id

3. Create child element by using >childElement

Create children element

4. Create sibling element by using +siblingName

Create sibling element

5. Create multiple lines of code by using *

Create multiple lines of code

6. Create item numbering by using $

Create item numbering

7. Create text between html tag by using {}

Create text between html tag

In addition, there is a cheat sheet that I have found during my research. It would be helpful if you would like to know the other Emmet that I don’t mention to - Cheat Sheet (emmet.io).

Snippets

Code snippets are templates that make you easier to enter repeating code patterns. It’s very useful when you have to type the same code every time. Snippets appear in IntelliSense mixed with other suggestions and in front of the snippets will display a block of square which make you know that it’s the snippet.

Example of snippet

I’m sure that all of you have used snippet for a long time, but it would be better if you can create your own snippet and use it for your projects.

Using custom Emmet snippets

You can create your own snippets by these steps

• Click a gear icon at the left-bottom corner
• Click ‘User Snippets’
• Choose computer language that you prefer
• JSON file in the chosen language will appear
• It would have an example snippet for you

Therefore, you can start create your own snippet by looking at the example. There are 4 components that you have to define.

4 components in a snippet

• Snippet’s name — It is displayed via IntelliSense at the end of the suggestions.
• prefix — defines one or more trigger words that display the snippet in IntelliSense which make VS Code knows that it is a snippet.
• body — one or more lines of content that will be generated when you use the snippet and $ is defined to let VS Code know where your cursor will be when you press Tab key.
• description — is an optional description of the snippet to explain what the snippet does.

Create my own snippet

I create my own snippet for generating initial code for CSS file which use JSON syntax.

using my own snippet in CSS file

After that, I use my snippet in CSS file by typing “cset” and press tab. Then, the code is generated.

If you enjoyed and would like to get more information, you could find more information about the Emmet abbreviations and Snippets in the references below. 👇

References

• Emmet in Visual Studio Code
• Snippets in Visual Studio Code
• Cheat Sheet (emmet.io)