CHEATSHEET
✨Visual Studio Code Shortcuts For Developer✨
Visual Studio Code Shortcuts
These VS Code shortcuts come in handy when writing hundreds and hundreds of lines of code. These help you code faster and improve your productivity 10 times. Also, you don’t require any extensions to use these shortcuts.
Let’s learn some magic 🧨
Exclamation mark ‘ ! ‘
Open your VS Code editor, create a file, type, !and press Enter to get the HTML boilerplate. Congratulations on writing 11 lines of code by simply typing !.
See the magic I was talking about earlier? It truly is that simple.
If you look at the illustration below, you will get a similar result:
Exclamation mark ‘ ! ‘
ID and CLASS attributes
The hash#is used for the id attribute, and the dot. is used for the class attributes. These attributes will generate a <div> with an id and class, or you can type anything you want.
See the example given below where .header will generate a div with class = header and .navbar#header will generate a div with class = navbarand id = header.
ID and CLASS attributes
Sibling: + and Text: { }
The plus sign + is used to create elements that are next to each other.
The curly braces{ } are used to write text between the opening and closing tags of an element.
See the example given below, where <div></div>, <p></p> and <a></a> are sibling elements, and “Get Started" is the text that is written between the opening and closing tags<a></a>.
Sibling: + and Text: { }
Child: >
The greater-than sign > is used to create the children of elements.
See the example given below, where<span></span> is the parent element and<em></em> is the child element.
Child: >
Climb-up: ^
The climb-up sign^ is used to write an element that comes after a child element and should be the sibling of the parent element. It essentially means to come out of the element and become a sibling of the parent element.
See the example given below, where<span></span> is the parent element and<em></em>is the child element of it. You can also see that<blockquote></blockquote> is the element on the same level as<span> that is written after ^ .
Climb-up: ^
Multiplication: *
The multiplication sign* is used to generate multiple elements of the same type.
In the given example, we generated 3 lis just by multiplying li with 3.
Multiplication: *
Implicit tag names
Generate elements by just typing the names of the tags, astable in the given example.
Implicit tag names
Grouping: ( )
The parentheses are used to group together different elements.
See the example given below to better understand.
Grouping: ( )
For more information, see the complete cheat sheet in the Emmet Documentation.
Conclusion
Thank you for reading! I hope you find it useful! 💙
Follow me if you’re interested in reading more, and don’t forget to subscribe to my newsletter to receive stories in your inbox.