Sådan skriver du HTML / CSS hurtigere med Emmet Cheat-Codes

Emmet er en af ​​mine foretrukne indbyggede funktioner i VS Code. Den er også tilgængelig som en udvidelse i andre kodeditorer.

Tænk på Emmet som stenografi. Med det kan du nemt skrive en masse kode hurtigt. Det fremskynder din HTML & CSS-arbejdsgang dramatisk.

At forstå Emmet er bogstaveligt talt en supermagt. Nogle har endda kaldt det en kodende snydekode. ?

Og det er bare en af ​​mange fantastiske indbyggede funktioner i VS Code.

For nylig lancerede jeg et omfattende og detaljeret kursus kaldet Become A VS Code SuperHero . Det dækker alle aspekter af VS-kode i dybden.

Denne artikel er baseret på en af ​​de 11 sektioner på kurset: Skrivning og formateringskode .

HTML

Med Emmet kan du hurtigt oprette en HTML-kedelplade på et øjeblik. I en HTML-fil skal du blot skrive !og du vil se, at Emmet er dukket op som et forslag. Hit nu Enter. Der har du det, en grundlæggende, tom HTML-webside klar til brug.

Hvis du aldrig har set HTML før og ikke har nogen anelse om, hvad alt dette er, skal du ikke bekymre dig. Jeg demonstrerer bare kapaciteterne i VS Code og Emmet. Du behøver ikke vide, hvad noget af dette betyder lige nu.

Grundlæggende tags

For at oprette grundlæggende HTML-tags skal du blot indtaste tagets navn og trykke Enter. Læg mærke til, hvordan Emmet placerer din markør inde i taggen. Du er nu indstillet til at fortsætte med at skrive inde i tagget.

  • Prøv at skrive: divderefter Enter, eller h1 Enter, eller p Enter.
  • Disse fungerer også: bqfor en , hdrfor en , ftrfor en , btnfor en og sectfor en sektion.

Klasser

Hvis du er fortrolig med CSS, bruger Emmet på samme måde at henvise til klasser ved hjælp af en .. For at definere en klasse sammen med tagget skal du blot tilføje det således:

  • div.wrapper ->
  • h1.header.center ->

ID'er

Id's arbejde er meget det samme:

  • div#hero ->

Kombinerer

Du kan strenge disse sammen:

  • div#hero.wrapper ->

Egenskaber

Vi kan også specificere attributter for tags:

  • img[src="cat.jpg"][alt="Cute cat pic"] ->

Indhold

For at medtage indhold i tagget pakker vi blot indholdet i krøllede seler { }.

  • p{This is a paragraph} ->

    This is a paragraph

Søskende og børn

Det bliver bare bedre. Vi kan også angive søskende og børn, der bruger +og >tegn.

  • section+section ->
  • ul>li ->

    Klatring op

    Du skal prøve at forestille dig, hvad du bygger i dit hoved, når du skriver Emmet-stenografien. I dette eksempel "klatrer vi op" i træet ved hjælp af ^.

    div+div>p>span+em^bq

    Resultat:

    Her ønskede vi, at blockquote skulle være på samme niveau som afsnittet. På grund af det var vi nødt til at "klatre op". Ellers ville det være inde i afsnittet.

    Gruppering

    Hvis din struktur er meget kompleks, kan du gruppere tags i stedet for at krydse ved at klatre.

    I dette eksempel opretter vi en sidehoved og sidefod uden at klatre ved hjælp af parentes ( ).

    div>(header>ul>li>a)+footer>p

    Resultat:

    
        

      Multiplikation og $

      Vi kan generere flere tags ved at multiplicere ( *) og nummerere poster i rækkefølge ved hjælp af et dollartegn ( $).

      • ul>li*5 ->
        • ul>li{Item $}*3 ->
          • Item 1
          • Item 2
          • Item 3

        Du kan endda tilpasse nummereringssekvensen ved at polse med nuller, startende med et specifikt nummer og endda omvendt retning.

        Pad med nuller: ul>li.item$$$*5

        Resultat:

        
            

          Start med et specifikt nummer: ul>[email protected]*5

          Resultat:

          
              

            Omvendt retning: ul>[email protected]*5

            Resultat:

            
                

              Omvendt retning fra et bestemt nummer: ul>[email protected]*5

              Resultat:

              
                  

                Implicitte tagnavne

                Der er visse tags, der ikke behøver at blive skrevet og kan underforstås.

                • En klasse, der oprindeligt blev defineret uden mærke, vil blive antydet som en .

                  .wrapper ->

                • En klasse, der er defineret i et betoningsmærke, vil blive antydet som en .

                  em>.emphasis ->

                • En klasse defineret i en liste vil blive antydet som et listeelement.

                  ul>.item ->

                  • En klasse defineret i en tabel vil blive antydet som a og inden for en række ville være en .

                    table>.row>.col ->

                  Indpak med tags

                  Der vil være tidspunkter, hvor du har eksisterende kode, som du vil pakke med et tag. Vi kan nemt klare det med Emmet.

                  Fremhæv bare den kode, du vil pakke, og åbn kommandopallen ( F1). Søg derefter efter Emmet: Wrap with Abbreviation. Du får derefter en dialogboks, hvor du kan skrive elementet.

                  test -> test

                  Du kan også bruge Emmet-syntaks i denne dialog. Prøv at pakke lidt tekst med span.wrapper.

                  Som standard er denne funktion ikke tildelt en tastaturgenvej. Så hvis du ofte bruger det ofte, kan du tilføje en brugerdefineret genvej til det.

                  Lorem ipsum

                  "Lorem Ipsum" er dummy-tekst, der bruges af udviklere til at repræsentere data på en side. Bare skriv loremog slå Enter. Emmet genererer 30 ord falsk tekst, som du kan bruge som fyldstof i dit projekt.

                  Mængden af ​​genererede ord kan også defineres.

                  • lorem10 giver dig 10 ord tilfældig tekst.

                  Samler det hele

                  Lad os bruge flere ting, som vi har lært indtil videre. Prøv dette:

                  ul.my-list>lorem10.item-$*5

                  Resultat:

                  
                      
                  • Lorem ipsum dolor sit amet.
                  • Numquam repudiandae fuga porro consequatur?
                  • Culpa, est. Tenetur, deleniti nihil?
                  • Numquam architecto corrupti quam repudiandae.

                  CSS

                  I CSS har Emmet en forkortelse for hver ejendom. Jeg vil ikke liste dem alle, men jeg vil påpege mine mest anvendte. For at se hele listen henvises til Emmet-snydearket.

                  Position

                  • pos-> position:relative;(standard til relativ)
                  • pos:s ->position:static;
                  • pos:a ->position:absolute;
                  • pos:r ->position:relative;
                  • pos:f ->position:fixed;

                  Skærm

                  • d-> display:block;(standard for at blokere)
                  • d:n ->display:none;
                  • d:b ->display:block;
                  • d:f ->display:flex;
                  • d:if ->display:inline-flex;
                  • d:i ->display:inline;
                  • d:ib ->display:inline-block;

                  cursoren

                  • cur ->cursor:pointer;

                  Farve

                  • c ->color:#000;
                  • c:r ->color:rgb(0, 0, 0);
                  • c:ra ->color:rgba(0, 0, 0, .5);
                  • op ->opacity: ;

                  Margen & polstring

                  • m ->margin: ;
                  • m:a ->margin:auto;
                  • mt ->margin-top: ;
                  • mr ->margin-right: ;
                  • mb ->margin-bottom: ;
                  • ml ->margin-left: ;
                  • p ->padding: ;
                  • pt ->padding-top: ;
                  • pr ->padding-right: ;
                  • pb ->padding-bottom: ;
                  • pl ->padding-left: ;

                  Kassestørrelse

                  • bxz ->box-sizing:border-box;

                  Bredde

                  • w ->width: ;
                  • h ->height: ;
                  • maw ->max-width: ;
                  • mah ->max-height: ;
                  • miw ->min-width: ;
                  • mih ->min-height: ;

                  Grænse

                  • bd ->border: ;
                  • bd+ ->border:1px solid #000;
                  • bd:n ->border:none;

                  Emmet er fantastisk!

                  Med Emmet kan du oprette en virkelig kompleks HTML-struktur med en linje. Det er virkelig fantastisk. Og det fungerer også med CSS.

                  Du kan se, hvordan Emmet drastisk kan øge din effektivitet og hastighed, når du skriver HTML og CSS.

                  Hvis du vil øge din effektivitet og hastighed yderligere, mens du bruger VS-kode, skal du tjekke mit kursus Bliv A VS-kode SuperHero.

                  Kurset dykker meget dybere ned i disse begreber og hjælper dig med at blive en hurtig, effektiv superheltudvikler :)

                  Jeg er Jesse fra Texas. Tjek mit andet indhold, og fortæl mig, hvordan jeg kan hjælpe dig på din rejse til at blive webudvikler.

                  • Abonner på min YouTube
                  • Sig hej! Instagram | Twitter
                  • Tilmeld dig mit nyhedsbrev