From the course: Visual Studio Code Productivity Tips
Unlock the full course today
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Use Emmet notation to add boilerplate text - Visual Studio Code Tutorial
From the course: Visual Studio Code Productivity Tips
Use Emmet notation to add boilerplate text
- [Narrator] Emmet is a text expansion tool that allows you to generate large HTML code blocks from small text shortcuts. Visual Studio Code supports Emmet notation right in the editor. You've probably used Emmet without even realizing it. Here I am in this HTML document and I'd like to add a div tag. The typical way of doing that would be to type the open angle bracket. Put the focus here. And then, div and then the close angle bracket and when I type the close angle bracket, Visual Studio stubs in the end tag. That is not Emmet. It's useful, but it's not Emmet. Ctrl + Z to undo. Emmet, I don't have to have to type the open angle bracket, so just start typing div, and as you see, this pop-up shows that, if I hit the Enter key right now, it's going to auto-complete with this syntax. Now, let's try that. Press Enter. And I get the same results as before, but I typed two less characters. I didn't have to type the open and closing angle brackets for the div tag. If this is all that Emmet…
Contents
-
-
-
(Locked)
Use Go to and Peek Definition to find code references4m 29s
-
(Locked)
Refactor the code4m 12s
-
Favorite extensions: Bracket Pair Colorizer2m 53s
-
(Locked)
Tidy code layout with Format Document6m 54s
-
(Locked)
Favorite extensions: XML Tools2m 36s
-
(Locked)
Create custom keybindings for common commands2m 40s
-
(Locked)
Favorite extensions: Spell Checker2m 40s
-
(Locked)
A simple technique to copy code blocks1m 1s
-
(Locked)
Favorite extensions: Sort lines2m 2s
-
(Locked)
Use Emmet notation to add boilerplate text6m 14s
-
(Locked)
Favorite extensions: GitLens4m 24s
-
(Locked)
Use font ligatures to add symbols to your code2m 46s
-
(Locked)
-