Οι καλύτερες συντομεύσεις HTML VS Code

Το Visual Studio Code (VS Code) προσφέρει πολλές πολύτιμες δυνατότητες και συντομεύσεις για την απλοποίηση της ανάπτυξης HTML. Αυτές οι δυνατότητες είναι χρήσιμες και επιτρέπουν στους προγραμματιστές να αφιερώνουν λιγότερο χρόνο γράφοντας κώδικα. Αν και μπορεί να μην χρησιμοποιείτε όλες τις διαθέσιμες συντομεύσεις, η εκμάθηση των πιο σημαντικών μπορεί να σας βοηθήσει πολύ. Αυτό το άρθρο καλύπτει μερικές από τις πιο εύχρηστες συντομεύσεις που πρέπει να λάβετε υπόψη κατά την κωδικοποίηση HTML.

Emmet Συντομογραφίες

Το VS Code υποστηρίζει το Emmet. Αυτό το εργαλείο διευκολύνει τη σύνταξη κώδικα CSS και HTML μέσω συντομεύσεων. Η βασική δομή HTML επεκτείνεται εάν πληκτρολογήσετε ένα θαυμαστικό (!) και μετά πατήσετε Tab.

Το Emmet εισάγει δυνατότητες επέκτασης που μειώνουν τον χρόνο που απαιτείται για τον κώδικα χρησιμοποιώντας HTML στον κώδικα του Visual Studio. Μπορείτε να το χρησιμοποιήσετε και σε άλλους συντάκτες. Η σύνταξη συντομογραφιών οδηγεί σε πλήρεις δομές σε HTML.

• Βασικές συντομογραφίες Emmet : Αυτές οι συντομογραφίες επεκτείνουν ορισμένα κοινά χρησιμοποιούμενα στοιχεία. Πληκτρολογώντας div και στη συνέχεια πατώντας Tab επεκτείνεται σε , ενώ το p επεκτείνεται σε

  . Εάν πληκτρολογήσετε ul>li*3 , θα επεκταθεί σε μια λίστα με τρία στοιχεία.

• Ένθετα στοιχεία : το > μπορεί να χρησιμοποιηθεί για τον καθορισμό θυγατρικών στοιχείων. Για παράδειγμα, το div>h1 επεκτείνεται σε , δημιουργώντας ουσιαστικά ένα στοιχείο με το

  στοιχείο μέσα.

• Πολλαπλασιασμός : Ο πολλαπλασιασμός δημιουργεί πολλαπλά στοιχεία. Η προσθήκη του *3 σε ​​μια ταξινομημένη λίστα δημιουργεί μια λίστα με τρία στοιχεία.
• Χαρακτηριστικά : Προσθέστε χαρακτηριστικά σε στοιχεία HTML μέσα σε αγκύλες. Για παράδειγμα, το [href=”#”] γίνεται , δημιουργώντας ένα στοιχείο αγκύρωσης με χαρακτηριστικό href.
• Σύνταξη τύπου CSS : Η σύνταξη είναι εμπνευσμένη από επιλογείς CSS, καθιστώντας την οικεία και διαισθητική για τους προγραμματιστές ιστού.
• Μαθηματικές εκφράσεις : Μπορείτε να εκτελέσετε ορισμένες βασικές μαθηματικές πράξεις μέσα σε συντομογραφίες. Για παράδειγμα, το div>ul>li.item$*3 θα επεκταθεί σε an

  στοιχείο που περιέχει μια ταξινομημένη λίστα με τρία στοιχεία λίστας με ονόματα κλάσεων item1, item2 και item3.

Οι συντομογραφίες επεκτείνονται πληκτρολογώντας και στη συνέχεια πατώντας το κουμπί Tab . Εάν υπάρχουν μερικές έγκυρες εξηγήσεις για τη συντομογραφία σας, κυκλώστε τις πατώντας ξανά την επιλογή Tab . Οι συντομογραφίες Emmet δεν είναι συγκεκριμένες για τον κώδικα VS. Μπορείτε να τα χρησιμοποιήσετε σε άλλα προγράμματα επεξεργασίας που υποστηρίζουν το Emmet.

Αναδίπλωση ετικέτας

Επιλέξτε μια γραμμή ή μια εντολή και, στη συνέχεια, πατήστε Ctrl+Shift+G εάν χρησιμοποιείτε Linux ή Windows. Εάν χρησιμοποιείτε Mac, χρησιμοποιήστε Cmd+Shift+G . Αυτή η συντόμευση αναδιπλώνει το επιλεγμένο περιεχόμενο με μια ετικέτα HTML.

Αυτό είναι ένα βολικό χαρακτηριστικό στο VS Code. Είναι χρήσιμο όταν πρέπει να περικλείετε το περιεχόμενο του περιεχομένου με ετικέτες ή όταν χρειάζεται να δομήσετε τον κώδικά σας. Η επιλογή μπορεί να είναι μία γραμμή, πολλές γραμμές ή ένα μπλοκ κώδικα.

Μια άλλη επιλογή είναι να κάνετε δεξί κλικ στον επιλεγμένο κωδικό και, στη συνέχεια, να επιλέξετε Αναδίπλωση με συντομογραφία στο μενού περιβάλλοντος. Όταν ενεργοποιείτε την εντολή αναδίπλωσης ετικετών, εμφανίζεται μια προτροπή όπου μπορείτε να επιλέξετε ένα επιθυμητό όνομα ετικέτας HTML. Εάν εισάγετε div , για παράδειγμα, a

στοιχείο τυλίγει τον επιλεγμένο κωδικό.

Η αναδίπλωση ετικετών βοηθά στη σήμανση και τη δομή του κώδικα χωρίς τη μη αυτόματη πληκτρολόγηση των ετικετών ανοίγματος και κλεισίματος. Αυτό εξοικονομεί πολύ χρόνο και μειώνει τη συχνότητα των συντακτικών σφαλμάτων.

Μορφοποίηση

Η μορφοποίηση κώδικα HTML είναι ένας καλός τρόπος διατήρησης της συνέπειας και της αναγνωσιμότητας στα έργα. Στο VS Code, οι ενσωματωμένες επιλογές μορφοποίησης επιτρέπουν την αυτόματη εκτέλεση της ενέργειας σε HTML ακολουθώντας προκαθορισμένους κανόνες.

Η συντόμευση πληκτρολογίου που χρησιμοποιείται για τη μορφοποίηση HTML είναι Shift+Alt+F για Windows και Linux. Το Shift+Option+F λειτουργεί σε macOS. 

Η συντόμευση μπορεί να μορφοποιήσει ένα ολόκληρο έγγραφο HTML ή ένα μέρος του κώδικα. Όταν το πατάτε, εφαρμόζονται οι κανόνες μορφοποίησης. Το διάστημα των εσοχών και οι αλλαγές γραμμής προσαρμόζονται ανάλογα.

Μπορείτε επίσης να μορφοποιήσετε αυτόματα τον κώδικα στο VS Code .

Σχολιάζοντας

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

Πλοήγηση κώδικα

Αυτό αναφέρεται στην ικανότητα μετακίνησης μεταξύ των διαφορετικών τμημάτων της βάσης κώδικα ή μετάβασης απευθείας στους ορισμούς στα χαρακτηριστικά ή τις ετικέτες HTML. Χρησιμοποιώντας την επιλογή Ctrl+] σε Linux και Windows για πλοήγηση στις ετικέτες. Οι χρήστες Mac μπορούν να χρησιμοποιήσουν το Cmd+] για να μεταβούν στην ετικέτα κλεισίματος του στοιχείου. Για να μεταβείτε στην ετικέτα ανοίγματος, πατήστε Ctrl+[ για Windows και Linux ή Cmd +[ για Mac.

Για να μεταβείτε στον ορισμό ενός χαρακτηριστικού ή μιας ετικέτας, χρησιμοποιήστε το πλήκτρο F12 . Προσδιορίζει την αντίστοιχη ετικέτα κλεισίματος ή ανοίγματος της βάσης κωδικών για να βρει τη σωστή θέση.

Θα εξακολουθείτε να έχετε πρόσβαση στον ορισμό όταν κρατάτε πατημένο το κλειδί ελέγχου και κάνετε κλικ σε ένα χαρακτηριστικό ή ετικέτα HTML στα Windows. Πατήστε Command+κλικ στο macOS για την ίδια ενέργεια. Αυτό εξαλείφει την ανάγκη μη αυτόματης αναζήτησης της τοποθεσίας.

Λειτουργία Ζεν

Αυτή η λειτουργία είναι χωρίς περισπασμούς. Διευκολύνει τους προγραμματιστές να επικεντρωθούν αποκλειστικά στον κώδικα κρύβοντας κουμπιά και γραμμές εργαλείων. Ενεργοποιήστε αυτήν τη λειτουργία χρησιμοποιώντας τη συντόμευση Ctrl+KZ στα Windows και Cmd+KZ σε Mac. Εναλλακτικά, μεταβείτε στην Προβολή και μετά στην Εμφάνιση . Ενεργοποιήστε τη λειτουργία Zen εδώ.

Παλέτα εντολών

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

Το μόνο που έχετε να κάνετε είναι να πληκτρολογήσετε αυτό που θέλετε να γίνει μέσα στην παλέτα εντολών. Θα λάβετε διαφορετικές εντολές για να σας βοηθήσουν.

Για πρόσβαση στην παλέτα εντολών , χρησιμοποιήστε τη συντόμευση Ctrl+Shift+P για Windows. Η συντόμευση του Mac είναι Cmd+Shift+P .

Αναζήτηση αρχείων

Εάν υπάρχει κείμενο που χρειάζεστε και βρίσκεται στα τρέχοντα αρχεία του έργου, μπορείτε να αποκτήσετε πρόσβαση σε αυτό κάνοντας κλικ στο εικονίδιο Αναζήτηση στην πλαϊνή γραμμή. Εναλλακτικά, χρησιμοποιήστε τη συντόμευση Ctrl+Shift+F στα Windows ή Cmd+Shift+F σε Mac.

Διαγραφή της Προηγούμενης Λέξης

Όταν κρατάτε πατημένο τη γραμμή backspace για να διαγράψετε μια λέξη, ενδέχεται να διαγράψετε κατά λάθος άλλα μέρη. Για να περιορίσετε τη διαγραφή στην προηγούμενη λέξη, χρησιμοποιήστε τη συντόμευση Ctrl+Backspace στα Windows ή Cmd+Backspace σε Mac.

Γραμμή αντιγραφής

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

Η συντόμευση των Windows είναι Shift+alt+up ή Shift+alt+down . Για Mac, η συντόμευση είναι Opt+shift+up ή Opt+shift+down .

Ανοίξτε ξανά το κλειστό πρόγραμμα επεξεργασίας

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

Για να ανοίξετε ξανά ένα κλειστό πρόγραμμα επεξεργασίας, χρησιμοποιήστε τη συντόμευση Ctrl+Shift+T στα Windows ή Cmd +Shift+T σε Mac. Μπορείτε να ανοίξετε πολλές κλειστές καρτέλες χρησιμοποιώντας αυτήν τη συντόμευση.

Επιτάχυνση κωδικοποίησης με συντομεύσεις HTML

Πολλές συντομεύσεις κάνουν τη χρήση του κώδικα VS σχετικά πιο εύκολη. Αν και υπάρχουν περισσότερες επιλογές από αυτές που περιλαμβάνονται στο άρθρο, οι παραπάνω είναι μερικές από τις πιο κοινές που μπορεί να φανούν χρήσιμες για αρχάριους και έμπειρους χρήστες. Με τη δημοτικότητα του VS Code, η αξιοποίηση όλων των χαρακτηριστικών μπορεί να το κάνει πιο ευχάριστο. Επιλέξτε συντομεύσεις που χρησιμοποιείτε συνήθως για να αυξήσετε την ταχύτητα κωδικοποίησης.

Στη συνέχεια, θα πρέπει να μάθετε πώς να συγκρίνετε δύο αρχεία στο VS Code .

Συχνές ερωτήσεις

Ε: Είναι οι συντομεύσεις HTML προσαρμόσιμες στον κώδικα VS;

Α: Ναι. Μπορείτε να προσαρμόσετε τις συντομεύσεις HTML στο VS Code αλλάζοντας τις ρυθμίσεις χρήστη ή χώρου εργασίας.

Ε: Μπορώ να δημιουργήσω τις δικές μου προσαρμοσμένες συντομεύσεις HTML σε VS Code;

Α: Ναι. Μπορείτε να δημιουργήσετε προσαρμοσμένα αποσπάσματα HTML ή συντομεύσεις στον Κώδικα VS ορίζοντας τα στις ρυθμίσεις χρήστη ή χώρου εργασίας. Αυτό σας επιτρέπει να δημιουργείτε συντομεύσεις για μοτίβα κώδικα ή προσαρμοσμένα στοιχεία που χρησιμοποιούνται συχνά.