Mastering TypeScript 3 - Third Edition

Using Emmet

Let's now create a simple HTML page by using File | New, or simply pressing Ctrl+N. Instead of writing our HTML file by hand, we will use Emmet to generate our HTML. Type in the following Emmet string:

html>head+body>h3{index.html}+div#content 

Now, hit Ctrl+Alt+Enter, or, from the File menu, select Emmet | Expand Abbreviation.

Voilà! Emmet has generated the following HTML in a millisecond, not bad for one line of code:

<html> 
<head></head> 
<body> 
    <h3>index.html</h3> 
    <div id="content"></div> 
</body> 
</html> 

Hit Ctrl+S to save the file, and enter index.html as the filename.

Only when we have saved the file will Brackets start to do syntax highlighting based on the file extension.

Let's take a closer look at the Emmet abbreviation ...