Όταν πληκτρολογείτε εντολές στο VS Code, η προσπάθεια να είστε τακτοποιημένοι μπορεί μερικές φορές να είναι το τελευταίο πράγμα που έχετε στο μυαλό σας. Αν και η μορφοποίηση δεν απαιτείται για την εκτέλεση ενός προγράμματος, βοηθάει πολύ κατά τον εντοπισμό σφαλμάτων και την προσπάθεια εντοπισμού σφαλμάτων.
Σε αυτό το άρθρο, θα σας δείξουμε πώς να μορφοποιήσετε τον κώδικα σε VS Code μαζί με άλλες χρήσιμες συμβουλές για να διατηρείτε τον κώδικά σας καλά οργανωμένο.
Πώς να μορφοποιήσετε τον κώδικα
Το VS Code έχει ενσωματωμένες εντολές για τη διευθέτηση του τρέχοντος πληκτρολογημένου κώδικα στην τυπική μορφή. Αυτά τα πλήκτρα συντόμευσης δεν απαιτούν πρόσθετες επεκτάσεις και μπορούν να χρησιμοποιηθούν ανά πάσα στιγμή. Οι συντομεύσεις είναι οι εξής:
Για Η/Υ
Μορφοποιήστε ολόκληρο το έγγραφο:
Ανοίξτε το αρχείο με τον κώδικα που θέλετε να μορφοποιήσετε.
Πατήστε “Shift + Alt + F”.
Αποθηκεύστε τις αλλαγές κάνοντας κλικ στο “Αρχείο” στην επάνω αριστερή γωνία και στη συνέχεια επιλέγοντας “Αποθήκευση” ή πατώντας “Ctrl + S”.
Μορφοποίηση μόνο επιλεγμένου κώδικα:
Στο αρχείο με τις γραμμές κώδικα που θέλετε να μορφοποιήσετε, επιλέξτε τις γραμμές επισημαίνοντάς τις με το ποντίκι σας.
Πατήστε «Ctrl + K».
Πατήστε “Ctrl + F”.
Αποθηκεύστε τις αλλαγές είτε επιλέγοντας «Αποθήκευση» στο μενού Αρχείο στην επάνω αριστερή γωνία ή πατώντας «Ctrl + S».
Σημειώστε ότι εάν πατήσετε “Ctrl + F” χωρίς πρώτα να πατήσετε “Ctrl + K”, θα ανοίξετε το μενού Εύρεση. Εάν συμβεί αυτό, απλώς κλείστε το κάνοντας κλικ στο κουμπί «x» ή πατώντας Esc.
Μετακινήστε τις γραμμές πάνω ή κάτω:
Μετακινήστε τον κέρσορα στην αρχή της γραμμής που θέλετε να μετακινήσετε.
Κρατήστε πατημένο το πλήκτρο Alt.
Για να μετακινήσετε τη γραμμή προς τα πάνω, πατήστε το επάνω βέλος. Για να το μετακινήσετε προς τα κάτω, πατήστε το κάτω βέλος.
Αποθηκεύστε το αρχείο σας επιλέγοντάς το από το μενού Αρχείο στην επάνω αριστερή γωνία του παραθύρου ή πατώντας «Ctrl + S».
Αλλαγή εσοχής μιας γραμμής:
Μετακινήστε τον κέρσορα στην αρχή της γραμμής στην οποία θέλετε να αλλάξετε την εσοχή.
Πατήστε “Ctrl + ]” για να αυξήσετε την εσοχή.
Πατήστε «Ctrl + [“ to decrease the indent.
Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
For Mac
Format the entire document:
Open the file with the code that you wish to format.
Press “⇧ + ⌥ + F.”
Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
Formatting selected code only:
Highlight the part of the document that you wish to format.
Press “⌘ + K”.
Press “⌘ + F”.
Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.
Move lines up or down:
Place your cursor at the beginning of the line you want to edit.
Hold down the “⌥” Key.
To move a line up, press the up arrow. To move it down, press the down arrow.
Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
Change indentation of a single line:
Move your cursor to the beginning of the line in which you want to change the indention.
Press “⌘ + ]” για να αυξήσετε την εσοχή.
Πατήστε “⌘ +[“γιαναμειώσετετηνεσοχή[“todecreasetheindent
Αποθηκεύστε το αρχείο πατώντας «⌘ + S» ή επιλέγοντας «Αποθήκευση» από το μενού Αρχείο στην επάνω αριστερή γωνία του παραθύρου.
VS Code Format Code σε Αποθήκευση
Το VS Code δεν έχει εγγενή εντολή που μορφοποιεί το έγγραφό σας κατά την αποθήκευση. Αντίθετα, αυτό μπορεί να γίνει εγκαθιστώντας μια επέκταση μορφοποίησης στην εφαρμογή VS Code. Η πιο δημοφιλής από αυτές τις επεκτάσεις είναι η Prettier, η οποία παρέχει πολλές λειτουργίες μορφοποίησης στο VS Code. Το Prettier μπορεί να εγκατασταθεί κάνοντας τα εξής:
Ανοίξτε τον κωδικό VS.
Κάντε κλικ στο κουμπί Επεκτάσεις που βρίσκεται στο αριστερό μενού. Αυτό είναι το εικονίδιο που μοιάζει με τέσσερα κουτιά. Εναλλακτικά, μπορείτε να πατήσετε “Ctrl + Shit + x” για υπολογιστή ή “⌘ + ⇧ + x” σε Mac.
Στη γραμμή αναζήτησης στο επάνω μέρος του μενού, πληκτρολογήστε Prettier.
Κάντε κλικ στο κουμπί Εγκατάσταση στην κάτω δεξιά γωνία του εικονιδίου Prettier.
Περιμένετε μέχρι η επέκταση να ολοκληρώσει την εγκατάσταση.
Για να μπορέσει ο Prettier να αρχίσει να μορφοποιεί αυτόματα το έγγραφό σας κατά την αποθήκευση, θα πρέπει να ρυθμίσετε την επέκταση για να ενεργοποιήσετε τη δυνατότητα. Αυτό γίνεται κάνοντας τα εξής:
Ανοίξτε το παράθυρο ρυθμίσεων πατώντας «Ctrl +», σε υπολογιστή ή «⌘ +», σε Mac.
Στη γραμμή αναζήτησης πληκτρολογήστε μορφοποιητή. Αυτό θα πρέπει να εμφανίσει αρκετές ρυθμίσεις μορφοποίησης.
Στη ρύθμιση Editor: Default Formatter, βεβαιωθείτε ότι η επιλεγμένη επέκταση είναι πιο όμορφη. Εάν δεν υπάρχει προεπιλεγμένος μορφοποιητής ή ο Κώδικας VS χρησιμοποιεί άλλον μορφοποιητή από προεπιλογή, πατήστε το αναπτυσσόμενο βέλος. Επιλέξτε “Prettier – Code Formatter” από τη λίστα. Εναλλακτικά, ο Prettier μπορεί να εμφανίζεται στη λίστα ως “esbenp.prettier-vscode”.
Βεβαιωθείτε ότι έχει επιλεγεί η επιλογή «Επεξεργαστής: Μορφοποίηση σε αποθήκευση». Εάν όχι, αλλάξτε το σημάδι επιλογής.
Πληκτρολογήστε “Prettier” στη γραμμή αναζήτησης ρυθμίσεων.
Κάντε κύλιση προς τα κάτω μέχρι να βρείτε τη γραμμή “Πιο όμορφη: Απαιτείται διαμόρφωση”. Βεβαιωθείτε ότι το πλαίσιο ελέγχου έχει επιλεγεί. Αυτή η ρύθμιση εμποδίζει τον Prettier να μορφοποιεί έγγραφα χωρίς αρχείο διαμόρφωσης. Αυτό είναι χρήσιμο όταν εξετάζετε τον ληφθέν κώδικα που μπορεί να έχει τους δικούς του κανόνες μορφοποίησης. Αυτό σας εμποδίζει να αντικαταστήσετε τις επιλογές μορφοποίησης ακούσια. Λάβετε υπόψη ότι τα αρχεία χωρίς τίτλο θα εξακολουθήσουν να μορφοποιούνται αυτόματα ακόμα και αν αυτή η ρύθμιση είναι επιλεγμένη.
Μπορείτε να επεξεργαστείτε συγκεκριμένες ρυθμίσεις Prettier ανάλογα με τις προτιμήσεις σας. Μόλις τελειώσετε, μπορείτε να βγείτε από αυτό το μενού.
Καθώς έχετε διαμορφώσει το Prettier ώστε να μορφοποιείται αυτόματα μόνο όταν υπάρχει ένα αρχείο διαμόρφωσης, πρέπει να δημιουργήσετε ένα για κάθε έργο. Αυτό γίνεται ακολουθώντας αυτά τα βήματα:
Επιλέξτε τη ρίζα του έργου σας στο αριστερό μενού.
Κάντε κλικ στο κουμπί νέο αρχείο για να δημιουργήσετε ένα αρχείο διαμόρφωσης.
Ονομάστε αυτό το αρχείο “.prettierrc.”
Στο αρχείο, απλώς πληκτρολογήστε {}.
Το Prettier θα μορφοποιεί αυτόματα το έγγραφό σας κάθε φορά που το αποθηκεύετε.
Συμβουλές για την οργάνωση του κώδικα
Αν και η εσοχή δεν είναι απαραίτητη για την εκτέλεση ενός προγράμματος, μπορεί να βοηθήσει στον εντοπισμό σφαλμάτων με τη διαμερισματοποίηση του κώδικα σε διαχειρίσιμες μονάδες. Οι δηλώσεις If-Then ή οι ένθετες περιπτώσεις, για παράδειγμα, μπορούν να επωφεληθούν από αυτό καθιστώντας κάθε εναλλακτική επιλογή οπτικά διακριτή μεταξύ τους. Αυτό είναι χρήσιμο όταν αντιμετωπίζετε λογικά σφάλματα αντί για συντακτικά.
Εάν ονομάζετε λειτουργικές μονάδες ή σύντομες γραμμές κώδικα, κάντε συνήθεια να χρησιμοποιείτε περιγραφικούς τίτλους αντί να τις αποκαλείτε απλώς ενότητα 1, ενότητα 2 κ.λπ. Αυτό διευκολύνει το να γνωρίζετε ποιο μέρος του κώδικα κάνει μια συγκεκριμένη λειτουργία.
Είναι πάντα καλή ιδέα να χρησιμοποιείτε τα σχόλια προς όφελός σας. Είτε συμπεριλάβετε μια γρήγορη περιγραφή είτε απλώς προσθέτετε μια σημείωση για τον εαυτό σας, τα σχόλια βοηθούν πάρα πολύ κατά τον εντοπισμό σφαλμάτων.
Οργανωτικός Κώδικας
Το να διατηρείτε τα έργα σας σωστά μορφοποιημένα όχι μόνο διευκολύνει την ανάγνωση, αλλά βοηθά επίσης στον εντοπισμό σφαλμάτων και διατηρεί τον κώδικά σας οργανωμένο. Αν και δεν είναι απαραίτητο για την εκτέλεση ενός προγράμματος, το να γνωρίζετε πώς να μορφοποιήσετε τα αρχεία σας σε VS Code είναι ένα σαφές πλεονέκτημα.
Γνωρίζετε άλλους τρόπους για να μορφοποιήσετε τα αρχεία σας στο VS Code; Μη διστάσετε να μοιραστείτε τις σκέψεις σας στην παρακάτω ενότητα σχολίων.
