Learn to harness the power of Emmet, a popular code editor plugin. Mentored by the Sourceress, you'll summon large chunks of HTML code with just a snap of your fingertips. With Emmet, you can type shortcuts that expand to the code you want — helping you write HTML faster, more accurately, and with better structure.
— codepip.com/games/sourcery/

Coderen met Emmet

We verkennen even enkele mogelijkheden van Emmet, een plugin (meestal al vooraf geïnstalleerd in editors zoals visual studio code) om efficiënt HTML (en later ook CSS) te schrijven.

Emmet video Kevin Powell

Emmet zit standaard ingebouwd in Visual Studio Code en kan ook in andere editors als plugin geïnstalleerd worden. Het versnelt de invoer van HTML en CSS aanzienlijk. Hoe je Emmet voor CSS kan gebruiken is voor een later moment.

In volgend youtube filmpje toont Kevin Powell in een tiental minuten een aantal Emmet shortcuts die het intypen van HTML-code vereenvoudigen. Na de video toon ik nog een Emmet shortcut die ik vaak gebruik en hoe ik daar dan een afkorting aan toeken in Visual Studio Code.

Schrijf een regel Emmet-code om in één keer een section te maken, met daarin twee alinea's (p). Elke alinea bevat 50 random woorden (lorem-tekst). Na de tweede alinea staat nog een geordende lijst met drie items.

Typ het volgende in (zonder spaties, alles aan elkaar) section>(p>lorem50)*2+ol>li*3 en sluit af met de tab-toets of enter.

Nieuwe shortcut in Visual Studio Code

Volgende situatie komt geregeld voor: je hebt een bepaald stuk HTML code en er moet een element rond gezet worden. Rond een paar p elementen moet bvb een section gezet worden.

Je kan dan een section typen voor de paragrafen. Vervelend is wel dat je dan de sluittag </section> moet uitknippen en verplaatsen naar achter.

Er bestaat echter een Emmet-afkorting die een element rond een ander element kan zetten! Die zit jammer genoeg wat weggestopt in Visual Studio Code: View > Command Palette > Emmet: wrap with abbreviation. In de volgende video toon ik hoe je zelf een afkorting maakt voor een dergelijk commando.

Meer info, cheat sheets