Emmet + Visual Studio Code gives you a golden experience of lightning-fast HTML coding that tickles your sense of omnipotence.

Hello.
I'm Mandai, in charge of Wild on the development team.

Do you know what Emmet is?
Emmet may not be familiar to those who don't usually code HTML or CSS, but it is well-known in that field as a tool that speeds up HTML/CSS coding.

However, in order to use Emmet, you need to use an editor that supports Emmet, and unfortunately it does not work with Notepad.

Today, I'm going to use Visual Studio Code (hereinafter referred to as VSCode), which I recommend, to easily prepare an execution environment for Emmet and let you experience the power of Emmet.

It's understandable that you might want to write unnecessary HTML and CSS.

First, prepare VSCode.

VSCode is free open source software developed by Microsoft and descended from Visual Studio.

Visual Studio Code - Code Editing. Redefined

When you access the above site, there will be a link to the installation package according to your environment, so download it and install it.
The installation procedure is very simple, so I will omit it here.

Once the installation is complete, the Emmet execution environment is ready!
VSCode itself is a light editor that allows you to write in any language by preparing an extension, so I highly recommend it.
It bears the name VisualStudio, and the IntelliSense experience is impressive, giving it a lightness that Eclipse lacks.

For more information on that, in detail on How to use Visual Studio Code to make bookmarklets go way too fast | Summary of Visual Studio Code shortcuts starting from and , so please read it as well.

 

Emmet's beginning

First, let's assemble some simple HTML using Emmet.

Create a new page with "CTRL + N" and save it immediately with "CTRL + S".
The file name can be anything, but the extension should be html.

You are now ready.

Try typing "!" in half-width characters.

Don't rush.
After typing !, slowly press the TAB key.

Then it will look like this.

You can easily imagine how "!" is expanded like this and the coding speed becomes overwhelming.

Emmet is nothing like this!
Generating a list is also very easy.

Let's create a list that has a parent-child relationship between ul and li tags, and has four li tags.
The following is a GIF of the work I added to the HTML I created earlier.

Just by writing "ul>li*4", you can create an ul tag with four li tags.

If you've come this far, you probably have an idea of ​​how to handle ID and CLASS.

If you know this much, I think you'll think it's a pretty useful guy.

Next, let's write the dl tag, dt, and dd tag at once.
The dt and dd tags are written as sibling elements rather than parent and child, which is just as you might imagine.

It also does proper indentation. In this video, I created it with a setting of 4 spaces, but you can also switch to 2 spaces or tabs by changing the settings of VSCode itself.

As a trick, if you don't put ">" after the last element after writing it in a dash, it may not convert as expected, so be careful.

Did you feel the sense of omnipotence coursing through your body?

 

Emmet is not just for HTML!

I understand that Emmet can create HTML at the speed of light.
But Emmet isn't the only kid who can do this.
He's an amazing guy who can write CSS very well!

However, CSS has too many properties, so there are many cases where it is not very useful.
Abbreviations are set for frequently used areas such as display, margin, and border, so you should use them as much as possible.

a cheat sheet here , so try to memorize only the ones you use often.
It is said that there are more than 500 of them, so it is difficult to memorize them, so if you have that kind of memory space, you would want to use it somewhere else.

However, one thing that I thought would be worth remembering is how to write "margin: 0 auto;", which is not included in the cheat sheet but is often used.

It looks like you can use "m0-auto"!

CSS also seems to be able to expand multiple properties at once using "+".
It's like this!

The original string is no longer a cipher.
If you manipulate this and code it harshly, it will probably make you sniffle quite a bit.

Emmet (ZenCoding) itself is not a new tool, but we must keep an eye on VSCode, which is greedily incorporating features into it.
I feel like it's becoming an editor that I can't live without.

That's it.