Το Visual Studio Code (VS Code) προσφέρει πολλές πολύτιμες δυνατότητες και συντομεύσεις για την απλοποίηση της ανάπτυξης HTML. Αυτές οι δυνατότητες είναι χρήσιμες και επιτρέπουν στους προγραμματιστές να αφιερώνουν λιγότερο χρόνο γράφοντας κώδικα. Αν και μπορεί να μην χρησιμοποιείτε όλες τις διαθέσιμες συντομεύσεις, η εκμάθηση των πιο σημαντικών μπορεί να σας βοηθήσει πολύ. Αυτό το άρθρο καλύπτει μερικές από τις πιο εύχρηστες συντομεύσεις που πρέπει να λάβετε υπόψη κατά την κωδικοποίηση HTML.
Το VS Code υποστηρίζει το Emmet. Αυτό το εργαλείο διευκολύνει τη σύνταξη κώδικα CSS και HTML μέσω συντομεύσεων. Η βασική δομή HTML επεκτείνεται εάν πληκτρολογήσετε ένα θαυμαστικό (!) και μετά πατήσετε Tab.
Το Emmet εισάγει δυνατότητες επέκτασης που μειώνουν τον χρόνο που απαιτείται για τον κώδικα χρησιμοποιώντας HTML στον κώδικα του Visual Studio. Μπορείτε να το χρησιμοποιήσετε και σε άλλους συντάκτες. Η σύνταξη συντομογραφιών οδηγεί σε πλήρεις δομές σε HTML.
. Εάν πληκτρολογήσετε ul>li*3 , θα επεκταθεί σε μια λίστα με τρία στοιχεία.
στοιχείο μέσα.
στοιχείο που περιέχει μια ταξινομημένη λίστα με τρία στοιχεία λίστας με ονόματα κλάσεων 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. Μπορείτε να ανοίξετε πολλές κλειστές καρτέλες χρησιμοποιώντας αυτήν τη συντόμευση.
Πολλές συντομεύσεις κάνουν τη χρήση του κώδικα VS σχετικά πιο εύκολη. Αν και υπάρχουν περισσότερες επιλογές από αυτές που περιλαμβάνονται στο άρθρο, οι παραπάνω είναι μερικές από τις πιο κοινές που μπορεί να φανούν χρήσιμες για αρχάριους και έμπειρους χρήστες. Με τη δημοτικότητα του VS Code, η αξιοποίηση όλων των χαρακτηριστικών μπορεί να το κάνει πιο ευχάριστο. Επιλέξτε συντομεύσεις που χρησιμοποιείτε συνήθως για να αυξήσετε την ταχύτητα κωδικοποίησης.
Στη συνέχεια, θα πρέπει να μάθετε πώς να συγκρίνετε δύο αρχεία στο VS Code .
Ε: Είναι οι συντομεύσεις HTML προσαρμόσιμες στον κώδικα VS;
Α: Ναι. Μπορείτε να προσαρμόσετε τις συντομεύσεις HTML στο VS Code αλλάζοντας τις ρυθμίσεις χρήστη ή χώρου εργασίας.
Ε: Μπορώ να δημιουργήσω τις δικές μου προσαρμοσμένες συντομεύσεις HTML σε VS Code;
Α: Ναι. Μπορείτε να δημιουργήσετε προσαρμοσμένα αποσπάσματα HTML ή συντομεύσεις στον Κώδικα VS ορίζοντας τα στις ρυθμίσεις χρήστη ή χώρου εργασίας. Αυτό σας επιτρέπει να δημιουργείτε συντομεύσεις για μοτίβα κώδικα ή προσαρμοσμένα στοιχεία που χρησιμοποιούνται συχνά.
Δείτε πώς μπορείτε να διατηρείτε τους κωδικούς πρόσβασής σας στον Microsoft Edge υπό έλεγχο και να αποτρέψετε το πρόγραμμα περιήγησης από το να αποθηκεύει τυχόν μελλοντικούς κωδικούς πρόσβασης.
Ακολουθήστε αυτόν τον οδηγό για το πώς να αλλάξετε το φόντο σας και να κάνετε την επιφάνεια εργασίας σας να φαίνεται θετικά μοναδική στα Windows 11.
Ανακαλύψτε πώς να ενεργοποιήσετε τις εισερχόμενες συνδέσεις απομακρυσμένης επιφάνειας εργασίας στα Windows 10 και να αποκτήσετε πρόσβαση στον υπολογιστή σας απομακρυσμένα.
Ανακαλύψτε πώς να ρυθμίσετε τη φωτεινότητα της οθόνης στα Windows 10 για καλύτερη οπτική εμπειρία και διάρκεια ζωής μπαταρίας.
Ακολουθεί ένας οδηγός για το πώς να αλλάξετε το θέμα, το χρώμα και πολλά άλλα στα Windows 11 για να δημιουργήσετε μια εκπληκτική εμπειρία επιφάνειας εργασίας.
Αν έχετε πρόβλημα με τον ήχο στον υπολογιστή σας με Windows 10, ακολουθήστε αυτά τα βήματα για να επαναφέρετε τον ήχο άμεσα.
Ανακαλύψτε πώς να συγχρονίσετε τις ρυθμίσεις σας στα Windows 10 με απόλυτη ευκολία. Αυτή η οδηγία θα σας καθοδηγήσει στη διαδικασία συγχρονισμού.
Ανακαλύψτε πώς να δείτε λεπτομερείς πληροφορίες για το υλικό και το λογισμικό του υπολογιστή σας στα Windows 10 με τον οδηγό μας.
Μάθετε πώς να διατηρείτε την κατάσταση σας διαθέσιμη στο Microsoft Teams για καλύτερη επικοινωνία χρησιμοποιώντας απλές ρυθμίσεις.
Ανακαλύψτε πώς να προβάλλετε τους αποθηκευμένους κωδικούς πρόσβασης στο Google Chrome με απλές και ασφαλείς μεθόδους.
