10 VS Code emmet tips to make you more productive

VS Code and Emmet

Visual Studio Code(aka, VS Code) is one of the leading source code editor(also an IDE) and arguably one of the best today for web development. Emmet is a plug-in based infrastructure that can produce HTML/CSS code snippets from short-hand syntaxes. VS Code supports Emmet 2.0 out of the box. It means you do not need any additional extensions to take advantage of it.

Let us see ten such usages of the emmet using VS code to help you become a more productive developer.

Feel free to open an empty HTML file in the VS Code editor and try out these tips & tricks as you read!

1. HTML Structure and Tags

One of the struggles that most web developers face is remembering the HTML Structure and syntaxes of HTML tags. What could be more exciting than a single character can create the basic HTML structure for us? Open an empty HTML file using VS code and type ! character. You will get an option to select to create a basic HTML structure, as shown in the image below.

You can type a few initial letters of any HTML tags to create elements with the required attributes. The image below shows the possibilities to create the anchor tag with different attributes.

Here are a few more examples that are of frequent use in web development. We can link to a CSS file, load a JavaScript file, create different input tags, a disabled button, etc.

There are plenty of others you can try out by typing the initial characters of the HTML tags.

 

출처 : https://blog.greenroots.info/10-vs-code-emmet-tips-to-make-you-more-productive-ckknjvxal028f1qs18w20e94t