Μην χάνετε τον κωδικό σας - διορθώστε τον με το Prettier

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

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

Τι εννοείς διορθώστε το;

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

Αν μεταβείτε στο επόμενο επίπεδο, ορισμένοι χειριστές θα σας επιτρέψουν να μεταβιβάσετε ένα όρισμα στην εντολή που εκτελεί το linter που του επιτρέπει να το διορθώσει αυτόματα. Αυτό σημαίνει ότι δεν χρειάζεται να περάσετε με μη αυτόματο τρόπο και να κάνετε όλα αυτά τα μικρά κενά και ερωτηματικά (προσθέστε τα!?) Τροποποιήστε τον εαυτό σας!

Τι άλλο μπορώ να κάνω για να διορθώσω τα πράγματα;

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

Τι είναι το Prettier;

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

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

Ξεκινώντας με το Prettier

Για αυτήν την καθοδήγηση, θα υποθέσω ότι έχετε ρυθμίσει και διαμορφώσει το ESLint σε μια εφαρμογή. Ιδιαίτερα, πρόκειται να παραλάβω από εκεί που σταμάτησα στην προηγούμενη αναδρομή μου όπου εγκαταστήσαμε το ESLint σε μια εφαρμογή React.

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

Τι ξεκινάμε λοιπόν; Εμείς ήδη:

  • Έχετε εγκαταστήσει το ESLint
  • Έχω προσθέσει τον Babel ως αναλυτή μας
  • Έχετε προσθέσει ένα πρόσθετο που περιλαμβάνει διαμορφώσεις React

Στη συνέχεια, ας ξεκινήσουμε εγκαθιστώντας μερικά πακέτα:

yarn add prettier prettier-eslint prettier-eslint-cli -D

Σημείωση: η παραπάνω εντολή είναι παρόμοια με τη χρήση npm. Εάν το έργο σας δεν χρησιμοποιείται yarn, πραγματοποιήστε εναλλαγή στο npmκατάλληλο.

Πάνω, εγκαθιστούμε:

  • ωραιότερος: πυρήνας πακέτο Prettier και κινητήρας
  • prettier-lint: μεταβιβάζει το αποτέλεσμα Prettier στο ESLint για διόρθωση χρησιμοποιώντας τη διαμόρφωση ESLint
  • prettier-eslint-cli: βοηθά τους Prettier και ESLint να συνεργάζονται σε διάφορα αρχεία στο έργο σας

Και τα εγκαθιστούμε ως εξάρτηση dev, καθώς δεν το χρειαζόμαστε εκτός ανάπτυξης.

Διαμόρφωση του νέου μορφοποιητή σας

Τώρα που έχουν εγκατασταθεί τα πακέτα μας, μπορούμε να ρυθμίσουμε για yarnνα εκτελέσουμε αυτήν την εντολή για εμάς.

Προηγουμένως, δημιουργήσαμε ένα lintσενάριο για να μοιάζει με αυτό στο package.json:

"scripts": { ... "lint": "eslint . --ext .js" ... }

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

"scripts": { ... "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'", "lint": "eslint . --ext .js" ... }

Τι συμβαίνει λοιπόν εκεί; Είμαστε:

  • Προσθέτοντας ένα νέο σενάριο που ονομάζεται format, το οποίο μπορούμε να τρέξουμε ωςyarn format
  • Χρησιμοποιούμε το prettier-eslint-cliπακέτο μας για να εκτελέσουμε τη μορφοποίηση για εμάς
  • Περνάμε στη διαμόρφωση ESLint που βρίσκεται δίπλα μας package.jsonστη ρίζα του έργου (αλλάξτε αυτό εάν βρίσκεται σε διαφορετική τοποθεσία)
  • Και τέλος, λέμε πιο όμορφα να γράψουμε όλα τα αρχεία που ταιριάζουν **/*.jsή οποιαδήποτε αρχεία JS που βρίσκει αναδρομικά μέσω του έργου μας

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

Εκτελέστε το μορφοποιητή σας!

Τώρα που είμαστε όλοι έτοιμοι, ας το τρέξουμε! Εκτελέστε το εξής:

yarn format 

και αμέσως, βλέπουμε ότι λειτουργεί:

Γεια, ο κωδικός μου φαίνεται διαφορετικός!

Όπως ανέφερα νωρίτερα, ο Prettier μας λέει κατ 'ευθείαν, είναι ένας διαμορφωτής με γνώμονα. Στέλνει με τους δικούς του κανόνες, σαν τη δική του διαμόρφωση ESLint, οπότε θα περάσει και θα κάνει αυτές τις αλλαγές επίσης.

Μην εγκαταλείψετε τον κωδικό σας! Αντ 'αυτού, μπορείτε να ελέγξετε τις αλλαγές, να δείτε αν ίσως είναι λογικό να το διατηρήσετε έτσι (θα είναι πολύ συνεπές) ή μπορείτε να ενημερώσετε το ESLint config ( .eslintrc.js) για να αντικαταστήσετε τους κανόνες που δεν σας αρέσουν. Αυτός είναι επίσης ένας καλός τρόπος για να μάθετε μερικά νέα πράγματα που ίσως δεν θα περίμενε κανείς να πιάσουν στο παρελθόν.

Πού μας αφήνει λοιπόν;

Εάν έχετε ακολουθήσει μέχρι τώρα, έχουμε τώρα δύο εντολές:

  • lint: που θα ελέγξει τον κωδικό σας για εσάς και θα σας πει τι συμβαίνει
  • format: θα προσπαθήσει αυτόματα να διορθώσει τα προβλήματα για εσάς

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

Τι έπεται?

Τώρα που μπορούμε να διαμορφώσουμε τον κώδικα αυτόματα, θα πρέπει να μπορούμε να διορθώσουμε τον κώδικα αυτόματα!

Την επόμενη φορά θα το κάνουμε ένα βήμα παραπέρα και θα δημιουργήσουμε ένα gitάγκιστρο που θα το επιτρέψει να τρέξει πριν το δεσμεύσετε. Αυτό σημαίνει ότι δεν θα χρειαστεί ποτέ να ανησυχείτε για να ξεχάσετε να το εκτελέσετε ξανά!

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου

Αρχικά δημοσιεύθηκε στη διεύθυνση //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/