Πώς να γράψετε ταχύτερα HTML / CSS με Emmet Cheat-Codes

Το Emmet είναι ένα από τα αγαπημένα μου ενσωματωμένα χαρακτηριστικά του κώδικα VS. Είναι επίσης διαθέσιμο ως επέκταση σε άλλους συντάκτες κώδικα.

Σκεφτείτε τον Έμετ ως στενογραφία. Με αυτό, μπορείτε εύκολα να γράψετε πολύ κώδικα γρήγορα. Επιταχύνει δραματικά τη ροή εργασίας HTML & CSS.

Η κατανόηση του τρόπου χρήσης του Emmet είναι κυριολεκτικά μια υπερδύναμη. Ορισμένοι μάλιστα το ονόμασαν κωδικοποιητικό cheat-code. ;

Και είναι απλώς ένα από τα πολλά καταπληκτικά ενσωματωμένα χαρακτηριστικά του κώδικα VS.

Πρόσφατα, ξεκίνησα ένα περιεκτικό και λεπτομερές μάθημα που ονομάζεται Become A VS Code SuperHero . Καλύπτει όλες τις πτυχές του κώδικα VS σε μεγάλο βάθος.

Αυτό το άρθρο βασίζεται σε μία από τις 11 ενότητες του μαθήματος: Γράψιμο & μορφοποίηση κώδικα .

HTML

Με το Emmet μπορείτε να δημιουργήσετε γρήγορα ένα βραχίονα HTML σε ένα μάτι. Σε ένα αρχείο HTML, απλά πληκτρολογήστε !και θα δείτε ότι το Emmet εμφανίστηκε ως πρόταση. Τώρα χτύπησε Enter. Εκεί το έχετε, μια βασική, κενή ιστοσελίδα HTML έτοιμη να ξεκινήσει.

Εάν δεν έχετε ξαναδεί HTML και δεν έχετε ιδέα τι είναι όλα αυτά, μην ανησυχείτε. Δείχνω απλώς τις δυνατότητες του VS Code και του Emmet. Δεν χρειάζεται να ξέρετε τι σημαίνει αυτό τώρα.

Βασικές ετικέτες

Για να δημιουργήσετε βασικές ετικέτες HTML, απλώς πληκτρολογήστε το όνομα της ετικέτας και πατήστε Enter. Παρατηρήστε πώς η Emmet βάζει τον κέρσορα μέσα στην ετικέτα. Τώρα είστε έτοιμοι να συνεχίσετε να πληκτρολογείτε μέσα στην ετικέτα.

  • Δοκιμάστε να πληκτρολογήσετε: divτότε Enter, ή h1 Enter, ή p Enter.
  • Οι εν λόγω εργασίες, καθώς και: bqγια ένα , hdrγια έναν , ftrγια ένα , btnγια έναν , και sectγια ένα τμήμα.

Μαθήματα

Εάν είστε εξοικειωμένοι με το CSS, το Emmet χρησιμοποιεί τον ίδιο τρόπο για να αναφέρεται σε μαθήματα χρησιμοποιώντας ένα .. Για να ορίσετε μια τάξη μαζί με την ετικέτα, απλώς προσθέστε την ως εξής:

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

Ταυτότητες

Η δουλειά του Id είναι το ίδιο:

  • div#hero ->

Συνδυάζοντας

Μπορείτε να τα συνδυάσετε:

  • div#hero.wrapper ->

Γνωρίσματα

Μπορούμε επίσης να καθορίσουμε χαρακτηριστικά για ετικέτες:

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

Περιεχόμενο

Για να συμπεριλάβετε περιεχόμενο μέσα στην ετικέτα, απλά τυλίξτε το περιεχόμενο σε άγκιστρα, { }.

  • p{This is a paragraph} ->

    This is a paragraph

Αδέλφια και παιδιά

Συνεχίζει να βελτιώνεται. Μπορούμε επίσης να καθορίσουμε τα αδέλφια και τα παιδιά χρησιμοποιώντας τους χαρακτήρες +και >.

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

    Αναρρίχηση

    Πρέπει να προσπαθήσετε να φανταστείτε τι χτίζετε στο μυαλό σας καθώς πληκτρολογείτε το κοντό Emmet. Σε αυτό το παράδειγμα θα "ανεβούμε" το δέντρο χρησιμοποιώντας ^.

    div+div>p>span+em^bq

    Αποτέλεσμα:

    Εδώ, θέλαμε το blockquote να είναι στο ίδιο επίπεδο με την παράγραφο. Εξαιτίας αυτού, χρειαζόμασταν να "ανεβούμε". Διαφορετικά, θα ήταν μέσα στην παράγραφο.

    Ομαδοποίηση

    Εάν η δομή σας είναι πολύ περίπλοκη, ίσως θελήσετε να ομαδοποιήσετε ετικέτες αντί να διασχίσετε ανεβαίνοντας.

    Σε αυτό το παράδειγμα, θα δημιουργήσουμε μια κεφαλίδα και υποσέλιδο χωρίς αναρρίχηση χρησιμοποιώντας παρένθεση ( ).

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

    Αποτέλεσμα:

    
        

      Πολλαπλασιασμός και $

      Μπορούμε να δημιουργήσουμε πολλαπλές ετικέτες πολλαπλασιάζοντας ( *) και αριθμούς στοιχείων διαδοχικά χρησιμοποιώντας ένα σύμβολο δολαρίου ( $).

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

        Μπορείτε ακόμη και να προσαρμόσετε την ακολουθία αρίθμησης γεμίζοντας με μηδενικά, ξεκινώντας με έναν συγκεκριμένο αριθμό και ακόμη και αντίστροφη κατεύθυνση.

        Μαξιλάρι με μηδενικά: ul>li.item$$$*5

        Αποτέλεσμα:

        
            

          Ξεκινήστε με έναν συγκεκριμένο αριθμό: ul>[email protected]*5

          Αποτέλεσμα:

          
              

            Αντίστροφη κατεύθυνση: ul>[email protected]*5

            Αποτέλεσμα:

            
                

              Αντίστροφη κατεύθυνση από συγκεκριμένο αριθμό: ul>[email protected]*5

              Αποτέλεσμα:

              
                  

                Σιωπηρά ονόματα ετικετών

                Υπάρχουν ορισμένες ετικέτες που δεν χρειάζεται να πληκτρολογηθούν και μπορούν να υπονοηθούν.

                • Μια κλάση που ορίζεται αρχικά χωρίς ετικέτα θα υπονοείται ως α .

                  .wrapper ->

                • Μια κλάση που ορίζεται σε μια ετικέτα έμφασης θα υποδηλώνεται ως .

                  em>.emphasis ->

                • Μια κλάση που ορίζεται σε μια λίστα θα υποδηλώνεται ως στοιχείο λίστας.

                  ul>.item ->

                  • Μια κλάση που ορίζεται μέσα σε έναν πίνακα θα υπονοείται ως α και σε μια σειρά θα είναι α .

                    table>.row>.col ->

                  Τυλίξτε με ετικέτες

                  Θα υπάρξουν στιγμές που έχετε τον υπάρχοντα κώδικα που θέλετε να τυλίξετε με μια ετικέτα. Μπορούμε να το κάνουμε εύκολα με το Emmet.

                  Απλώς επισημάνετε τον κωδικό που θέλετε να τυλίξετε και ανοίξτε την παλέτα εντολών ( F1). Στη συνέχεια, αναζητήστε Emmet: Wrap with Abbreviation. Στη συνέχεια, θα εμφανιστεί ένα παράθυρο διαλόγου όπου μπορείτε να πληκτρολογήσετε το στοιχείο.

                  test -> test

                  Μπορείτε επίσης να χρησιμοποιήσετε την τυπική σύνταξη Emmet σε αυτό το παράθυρο διαλόγου. Δοκιμάστε να τυλίξετε κάποιο κείμενο με span.wrapper.

                  Από προεπιλογή, αυτή η λειτουργικότητα δεν εκχωρείται σε συντόμευση πληκτρολογίου. Επομένως, αν χρησιμοποιείτε συχνά, ίσως θέλετε να προσθέσετε μια προσαρμοσμένη συντόμευση για αυτήν.

                  Λόρεμ Ίψουμ

                  Το "Lorem Ipsum" είναι εικονικό κείμενο που χρησιμοποιείται από προγραμματιστές για την αναπαράσταση δεδομένων σε μια σελίδα. Απλώς πληκτρολογήστε loremκαι πατήστε Enter. Το Emmet θα δημιουργήσει 30 λέξεις ψεύτικου κειμένου που μπορείτε να χρησιμοποιήσετε ως πληρωτικό στο έργο σας.

                  Ο όγκος των λέξεων που δημιουργούνται μπορεί επίσης να οριστεί.

                  • lorem10 θα σας δώσει 10 λέξεις τυχαίου κειμένου.

                  Βάζοντας τα όλα μαζί

                  Ας χρησιμοποιήσουμε πολλά πράγματα που έχουμε μάθει μέχρι τώρα. Δοκιμάστε το:

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

                  Αποτέλεσμα:

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

                  CSS

                  Στο CSS, η Emmet έχει μια συντομογραφία για κάθε ιδιοκτησία. Δεν πρόκειται να απαριθμήσω όλα αυτά, αλλά θα επισημάνω τα πιο χρησιμοποιημένα. Για να δείτε την πλήρη λίστα, ανατρέξτε στο cheat-φύλλο Emmet.

                  Θέση

                  • pos-> position:relative;(προεπιλογή σε σχετικό)
                  • pos:s ->position:static;
                  • pos:a ->position:absolute;
                  • pos:r ->position:relative;
                  • pos:f ->position:fixed;

                  Απεικόνιση

                  • d-> display:block;(προεπιλογές για αποκλεισμό)
                  • 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;

                  Δρομέας

                  • cur ->cursor:pointer;

                  Χρώμα

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

                  Περιθώριο και επένδυση

                  • 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: ;

                  Μέγεθος κουτιού

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

                  Πλάτος

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

                  Σύνορο

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

                  Το Emmet είναι φοβερό!

                  Με το Emmet, μπορείτε να δημιουργήσετε μια πολύ περίπλοκη δομή HTML με μία γραμμή. Είναι πραγματικά φοβερό. Και, λειτουργεί επίσης με CSS.

                  Μπορείτε να δείτε πώς το Emmet μπορεί να αυξήσει δραστικά την αποτελεσματικότητα και την ταχύτητά σας κατά τη σύνταξη HTML και CSS.

                  Αν θέλετε να αυξήσετε περαιτέρω την αποδοτικότητα και την ταχύτητά σας κατά τη χρήση του κωδικού VS, ρίξτε μια ματιά στο μάθημά μου Γίνετε ένας κωδικός VS SuperHero.

                  Το μάθημα εμβαθύνει πολύ βαθύτερα σε αυτές τις έννοιες και σας βοηθά να γίνετε ένας γρήγορος, αποτελεσματικός υπερήρωας προγραμματιστής :)

                  Είμαι ο Τζέσι από το Τέξας. Ρίξτε μια ματιά στο άλλο περιεχόμενό μου και ενημερώστε με πώς μπορώ να σας βοηθήσω στο ταξίδι σας για να γίνετε προγραμματιστής ιστού.

                  • Εγγραφείτε στο YouTube μου
                  • Πες γεια! Instagram | Κελάδημα
                  • Εγγραφείτε στο Newsletter μου