Πώς λειτουργεί η ομορφοποίηση JavaScript
Το beautifier διαβάζει τον κώδικά σας χαρακτήρα προς χαρακτήρα και τον αναδημιουργεί με συνεπή διάταξη.
- Tokenization. Η βιβλιοθήκη σαρώνει την είσοδο σε token: keywords, identifiers, strings, operators.
- Παρακολούθηση φωλιασμού. Καθώς προχωρά, το beautifier διατηρεί ένα τρέχον επίπεδο εσοχής.
- Εφαρμογή επιλογών. Η επιλογή εσοχής, στυλ αγκύλης και ορίου κενών γραμμών εφαρμόζεται.
- Αναπαραγωγή. Ο μορφοποιητής εκτυπώνει τα token με εσοχή και αλλαγές γραμμής.
Γιατί να ομορφοποιήσετε JavaScript
- Ανάγνωση μινιμαλισμένου κώδικα. Τα production bundles είναι σε μία γραμμή. Η ομορφοποίηση αποκαθιστά την αναγνωσιμότητα.
- Τακτοποίηση ασυνεπών αρχείων. Κώδικας από πολλά άτομα έχει μικτή εσοχή. Ένα πέρασμα τον κανονικοποιεί.
- Δεν επιβαρύνει τη σελίδα σας. Το js-beautify φορτώνεται μόνο όταν κάνετε κλικ στο Ομορφοποίηση.
- Τίποτα δεν φεύγει από το πρόγραμμα περιήγησης. Το beautifier τρέχει εξ ολοκλήρου στη συσκευή σας.
Συνήθεις εφαρμογές
Η ομορφοποίηση JavaScript χρειάζεται όταν κάποιος θέλει να διαβάσει κώδικα.
- Εντοπισμός σφαλμάτων σε παραγωγή.
- Προετοιμασία code review.
- Έλεγχοι ασφάλειας και συμμόρφωσης.
Παράδειγμα
Επικολλήστε function f(a){if(a){return a*2}else{return 0}} και κάντε κλικ στο Ομορφοποίηση.
FAQ
Αυτό τρέχει στο πρόγραμμα περιήγησής μου;
Ναι. Το js-beautify φορτώνεται lazy και ο κώδικάς σας δεν φεύγει από τη σελίδα.
Είναι το ίδιο το beautifying με το un-minifying;
Αποκαθιστά τη μορφοποίηση, αλλά όχι τα αρχικά ονόματα μεταβλητών ή σχόλια.
Θα αλλάξει η συμπεριφορά του κώδικά μου;
Όχι. Η ομορφοποίηση προσθέτει και αφαιρεί μόνο κενά και αλλαγές γραμμής.
Τι σημαίνουν οι επιλογές στυλ αγκύλης;
Collapse: η αγκύλη στην ίδια γραμμή. Expand: νέα γραμμή. End-expand: else/catch σε νέα γραμμή.
Ομορφοποιήστε JavaScript χωρίς build step ή ανέβασμα.