Διατηρείτε τον κωδικό σας καθαρό με πιο όμορφα

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

Θέματα μορφοποίησης

Οι ομάδες ανάπτυξης λογισμικού έχουν χάσει αμέτρητες ώρες καθ 'όλη τη διάρκεια του ιστορικού υποστηρίζοντας το μέγιστο μήκος γραμμής ή σε ποια γραμμή πρέπει να ακολουθήσει ένα στήριγμα. Όποια προσωπική προτίμηση λέει, οι περισσότεροι άνθρωποι συμφωνούν σε τουλάχιστον ένα πράγμα: η μορφοποίηση κώδικα πρέπει να είναι συνεπής σε ένα έργο.

Το Prettier είναι ένα εργαλείο σχεδιασμένο για να το επιτύχει. Δώστε του κάποιο κωδικό και θα παραδώσει τον ίδιο κωδικό, μορφοποιημένο με συνεπή τρόπο. Το Prettier διαθέτει ενσωμάτωση προγράμματος επεξεργασίας κειμένου, εργαλείο γραμμής εντολών και online επίδειξη.

Μιλώντας τη σωστή γλώσσα

Πρώτα απ 'όλα, θα θέλατε να μάθετε εάν το Prettier είναι συμβατό με τη γλώσσα ή τις γλώσσες με τις οποίες συνήθως εργάζεστε. Το Prettier επικεντρώνεται επί του παρόντος σε ένα βασικό σύνολο γλωσσών που είναι κυρίως αφιερωμένο στην ανάπτυξη ιστού front-end, όπως:

• JavaScript
• HTML
• CSS
• Σας
• Χαμήλωση τιμής
• ΓΙΑΜΛ

Υπάρχει επίσης ανοιχτή υποστήριξη για πρόσθετες γλώσσες μέσω προσθηκών.

Δοκιμάστε την ομορφότερη χρήση της διαδικτυακής παιδικής χαράς

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

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

Για παράδειγμα, δοκιμάστε να εισαγάγετε την ακόλουθη JavaScript:

(λειτουργία ()
{
window.alert («εντάξει»)
}())

Ο πιο όμορφος πρέπει να το μετατρέψει σε:

(λειτουργία () {
window.alert ("εντάξει");
})();

Παρατηρήστε, από προεπιλογή, οι αλλαγές που κάνει το Prettier περιλαμβάνουν:

• Μετατροπή συμβολοσειρών μιας αναφοράς σε διπλές εισαγωγικές
• Προσθήκη ημι-άνω και άνω τελείων
• Μετατροπή εσοχών σε δύο διαστήματα

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

Διαμόρφωση επιλογών

Το Prettier είναι αυτο-περιγραφόμενο ως «μελετημένο», μια εκούσια σχεδιαστική επιλογή που σημαίνει ότι ο έλεγχος των χαρακτηριστικών θυσιάζεται για απλότητα και συνέπεια. Είναι σχεδιασμένο για να ρυθμίσετε και μετά να το ξεχάσετε, αντί να παραμείνετε απασχολημένοι με κάθε τελευταία λεπτομέρεια μορφοποίησης του κώδικα σας. (Για μια εναλλακτική λύση με πολύ λεπτότερο έλεγχο σε κάθε τελευταία λεπτομέρεια μορφοποίησης, δοκιμάστε Έλλιντ.)

Ωστόσο, οι συγγραφείς αναγνωρίζουν επίσης ότι ορισμένες αποφάσεις έχουν λειτουργικό αντίκτυπο πέρα ​​από το πώς φαίνεται ο κώδικας. Ορισμένες επιλογές - συμπεριλαμβανομένων ορισμένων για παλαιούς σκοπούς - παραμένουν, οπότε θα πρέπει τουλάχιστον να καταλάβετε τι κάνουν, ακόμη και αν χρησιμοποιείτε το Prettier στην προεπιλεγμένη του κατάσταση.

Ο καλύτερος τρόπος διαχείρισης Πιο όμορφες επιλογές είναι να τα αποθηκεύσετε σε ένα αρχείο διαμόρφωσης. Υπάρχουν πολλοί τρόποι να το οργανώσετε, αλλά ξεκινήστε δημιουργώντας ένα αρχείο με το όνομα .prettierrc.json στον τοπικό κατάλογο έργων. Μπορεί να περιέχει οποιαδήποτε από τις υποστηριζόμενες επιλογές σε ένα τυπικό αντικείμενο JSON, π.χ.

{
"tabWidth": 8
}

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

Χρησιμοποιώντας νήματα ή npm, η εγκατάσταση πρέπει να είναι απλή. Για νήματα:

$ yarn global add πιο όμορφο

Και για npm:

Εγκατάσταση $ npm --global πιο όμορφο

Μόλις εγκαταστήσετε το Prettier παγκοσμίως, θα μπορείτε να πληκτρολογήσετε:

$ ομορφότερο

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

Καθαρισμός αρχείου

Για να διαμορφώσετε ξανά ένα αρχείο, χρησιμοποιήστε μια εντολή παρόμοια με:

$ prettier --write filename.js

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

$ ομορφότερο --write.

Το Prettier θα εκτελεστεί σε όλα τα αρχεία στον τρέχοντα κατάλογο, μορφοποιώντας όλα αυτά που αναγνωρίζει.

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

$ prettier test.js> test2.js

Έλεγχος αρχείου

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

$ ομορφότερο --ελέγξτε.

Θα λάβετε μια γραμμή εξόδου για κάθε αρχείο που δεν ταιριάζει με την αναμενόμενη μορφή, σύμφωνα με τη διαμόρφωση του Prettier:

Έλεγχος μορφοποίησης ...
[προειδοποίηση] .prettierrc
[προειδοποίηση] .prettierrc.json
[προειδοποίηση] Ζητήματα στυλ κώδικα βρέθηκαν στα παραπάνω αρχεία. Ξεχάσατε να τρέξετε Prettier;

Επιλογές γραμμής εντολών

Οι τυπικές επιλογές του Prettier διατίθενται ως επιλογές γραμμής εντολών, εάν τις χρειάζεστε. Ακολουθεί ένα παράδειγμα για το πώς το - μοναδική προσφορά η σημαία επηρεάζει την έξοδο:

$ ομορφότερη tmp.js
παράδειγμα συνάρτησης () {
console.log ("γεια, κόσμος");
}
$ prettier --single-quote tmp.js
παράδειγμα συνάρτησης () {
console.log ('γεια, κόσμος');
}

Λαμβάνω βοήθεια

Το εργαλείο Command Line παρέχει ενημερωτική βοήθεια για οποιαδήποτε επιλογή μέσω του --βοήθεια σημαία:

$ prettier - βοηθήστε το τελικό κόμμα
- ουρά-κόμμα 
Εκτυπώστε τελικά κόμματα, όπου είναι δυνατόν, όταν κάνετε πολλές γραμμές.
Έγκυρες επιλογές:
es5 Κομματικά κόμματα όπου ισχύουν σε ES5 (αντικείμενα, πίνακες κ.λπ.)
κανένα Χωρίς κόμματα.
όλα τα κόμματα που ακολουθούν όπου είναι δυνατόν (συμπεριλαμβανομένων των ορισμάτων συνάρτησης).
Προεπιλογή: es5

Χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας κειμένου

Αφού εγκαταστήσετε το Prettier, μπορείτε να το χρησιμοποιήσετε σε διάφορα σενάρια, ανάλογα με το σύνολο εργαλείων που χρησιμοποιείτε ήδη. Οι πιθανότητες είναι ότι χρησιμοποιείτε ένα πρόγραμμα επεξεργασίας κειμένου. Το Prettier έχει δεσμεύσεις για τα περισσότερα από τα δημοφιλή, οπότε εδώ μπορείτε να ρυθμίσετε τρία από αυτά:

Υψηλό κείμενο

JsPrettier είναι ένα Sublime Text plugin που κάνει το Prettier διαθέσιμο στον επεξεργαστή. Παρόλο που υπάρχουν πολλοί διαφορετικοί τρόποι εγκατάστασης του JsPrettier, σας συνιστούμε να χρησιμοποιήσετε τη μέθοδο Package Control. Θα πρέπει να έχετε ήδη εγκαταστήσει το Prettier, και στη συνέχεια να ανοίξετε την παλέτα εντολών του Sublime Text και να επιλέξετε "Control Package: Install Package":

Στη συνέχεια, αναζητήστε το "jsprettier" και κάντε κλικ για να το εγκαταστήσετε:

Μόλις εγκατασταθεί το JsPrettier, μπορείτε να κάνετε δεξί κλικ σε οποιοδήποτε ανοιχτό αρχείο για να το μορφοποιήσετε. Μπορείτε επίσης να ορίσετε την τιμή του auto_format_on_save προς την αληθής στις ρυθμίσεις του JsPrettier, με αποτέλεσμα το JsPrettier να καθαρίζει αυτόματα τυχόν συμβατά αρχεία όταν τα αποθηκεύετε στο Sublime Text.

Ατομο

Η εγκατάσταση για το Atom μοιάζει πολύ με το Sublime Text: απλώς χρησιμοποιήστε τον ενσωματωμένο διαχειριστή πακέτων του προγράμματος επεξεργασίας για εγκατάσταση πιο όμορφο άτομο:

Μόλις εγκατασταθεί, η χρήση είναι εξοικειωμένη: μια συντόμευση ή ένα στοιχείο μενού σάς επιτρέπει να μορφοποιήσετε ένα αρχείο κατά παραγγελία, ενώ μια ρύθμιση Atom σάς επιτρέπει να εκτελείτε αυτόματα το Prettier κάθε φορά που αποθηκεύεται ένα αρχείο.

Δύναμη

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

mkdir -p ~ / .vim / pack / plugins / start
git κλώνος https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-ομορφότερη

Το Git είναι ίσως ο ευκολότερος τρόπος λήψης των απαραίτητων αρχείων, αλλά οποιουσδήποτε τρόπους για να αποκτήσετε vim-ομορφότερο σε αυτόν τον αρχικό κατάλογο πρέπει να κάνει τη δουλειά.

Μόλις εγκατασταθεί, το Prettier θα εκτελείται αυτόματα όταν ένα αρχείο αποθηκεύεται στο vi. Μπορεί επίσης να εκτελεστεί χειροκίνητα ανά πάσα στιγμή μέσω του Πιο όμορφος εντολή:

Που πρέπει να οδηγήσει σε ένα καθαρισμένο αρχείο:

Ενσωματώστε πιο όμορφα στο έργο σας

Η χρήση ενός μορφοποιητή κώδικα όπως το Prettier μπορεί να βοηθήσει στη διατήρηση μιας βάσης κώδικα που είναι ευκολότερη στην ανάγνωση. Μπορεί επίσης να βοηθήσει να παρακάμψετε τις συζητήσεις σχετικά με το συγκεκριμένο στυλ που πρέπει να χρησιμοποιείτε κατά την κωδικοποίηση - απλώς αναθέτετε αυτές τις αποφάσεις στο Prettier!

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

νανο εναντίον Vim: The Best Terminal Text Editors, σε σύγκριση

Ψάχνετε για τερματικό πρόγραμμα επεξεργασίας κειμένου για Linux; Η κύρια επιλογή είναι μεταξύ Vim και nano! Δείτε πώς συγκρίνονται.

Σχετικά με τον Συγγραφέα