VS Code and Emmet Tutorial смотреть онлайн

00:00 Intro

In this video you will learn how to type less with VS Code and Emmet. You will also learn how to create custom Emmet snippets you can use in VS Code.

00:22 HTML tag variations

Let’s start by creating an empty index.html file. Normally you would have to type out the boilerplate code when creating a new HTML file, but when using Emmet abbreviations you only
need to type a few characters. Let’s look at the HTML Emmet abbreviations available to us in VS Code.
The first is the familiar html element
The second abbreviation you can use is the html:5 abbreviation, this significantly reduces the boilerplate code you need to write.
The third abbreviation you can use is the EXtensible HyperText Markup Language abbreviation - this generates the namespace needed for XHTML documents

00:45 Head Elements

Let’s look at some meta abbreviations you can use when working with an existing HTML file.
If you need to add a viewport meta element you can use the following abbreviation.
If you need to add a description meta element you can use the meta description abbreviation.
There is also an abbreviation for the keyword meta element.

If you need to reference a CSS file, there’s two abbreviations you can use.
There’s also an abbreviation for adding a fave-icon, also known as a favicon.
If you need to add CSS files that only need to be applied when printing, you can use the print abbreviation.

You can also add scripts using the script abbreviations.

02:41 HTML Elements
If you need to nest elements you can use the child combinator CSS selector.

You can also use the adjacent sibling combinator CSS selector to place elements adjacent or next to one another.

If you want to create a specified amount of elements you can use the multiplication symbol followed by the amount you want to generate. You can combine this with the child combinator CSS selector.

When you want to create more complex markup you will need to make use of pr·en·thuh·seez
, also known as Grouping.

You can use the CSS class selector to assign a CSS class to an element.
Adding an ID to an element can be done by using the ID CSS selector.

Adding multiple CSS classes to an element can be done by separating the CSS class names by a period.

You can use the CSS attribute selector to add any attribute to an element.

You can append numerical values to class names or IDs by using the dollar symbol.

If you need to place an element outside the adjacent element you can climb up one level.

When you need to generate placeholder text you can use the lorem ipsum abbreviation. This abbreviation allows you to specify the amount of words you want to generate.

If you need to type custom text you can wrap your text in braces.

06:38 Custom Snippets
VS Code supports custom Emmet snippets. For more information regarding the schema of the snippets.json file please visit the VS Code website and navigate to the custom Emmet snippets section. For custom Emmet snippets to show up as available abbreviations you need to add the path to your snippets.json file to your VS Code settings file. The custom Emmet snippets that we are going to create are going to be based on the bootstrap library