Πώς να ενσωματώσετε το Prettier με ESLint και stylelint

ή Πώς να μην ανησυχείτε ξανά για το στυλ του κώδικα

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

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

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

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

Ας δούμε τώρα βήμα προς βήμα πώς να το ρυθμίσουμε όλα αυτά, καθώς και πώς να μορφοποιήσουμε όλο τον υπάρχοντα κώδικα σύμφωνα με τους κανόνες του χνούδια. Αυτός ο οδηγός προϋποθέτει ότι το έργο σας έχει ήδη ρυθμιστεί ESLint και stylelint με τα αρχεία .eslintrcκαι τα .stylelintrcαρχεία τους.

ΜΕΡΟΣ 1: Μορφοποίηση της υπάρχουσας βάσης κώδικα

Βήμα 1

Εγκαταστήστε το prettier-eslint, το οποίο είναι ένα εργαλείο που διαμορφώνει τη JavaScript σας χρησιμοποιώντας το Prettier ακολουθούμενο από eslint --fix. Το --fixείναι ένα χαρακτηριστικό ESLint ότι οι προσπάθειες για να διορθώσετε αυτόματα κάποια προβλήματα για σας.

npm install --save-dev prettier-eslint

Αυτό το εργαλείο εισάγει τις αντίστοιχες επιλογές Prettier config από το υπάρχον αρχείο .eslintrc . Επομένως, δεν χρειάζεται να δημιουργήσετε ένα νέο αρχείο .prettierrc στις περισσότερες περιπτώσεις.

Βήμα 2

Εγκαταστήστε το prettier-eslint-cli. Αυτό είναι το εργαλείο CLI που θα σας βοηθήσει να εκτελέσετε όλα τα αρχεία σας μέσω της ομορφιάς-eslint ταυτόχρονα.

npm install --save-dev prettier-eslint-cli

Βήμα 3

Εγκαταστήστε το prettier-stylelint, το οποίο είναι ένα εργαλείο που διαμορφώνει το CSS / SCSS σας με το Prettier ακολουθούμενο από stylelint —-fix. Όπως το ESLint, --fixείναι ένα χαρακτηριστικό στυλ που προσπαθεί να διορθώσει αυτόματα ορισμένα προβλήματα για εσάς.

npm install prettier-stylelint --save-dev

Αυτό το εργαλείο προσπαθεί επίσης να δημιουργήσει ένα Prettier config με βάση το stylelint config.

Λάβετε υπόψη ότι σε αντίθεση με το prettier-eslint, δεν χρειάζεται να εγκαταστήσετε άλλο πακέτο για το CLI του, καθώς αυτό περιλαμβάνεται ήδη σε αυτό.

Βήμα 4

Γράψτε σενάρια εντός της package.jsonστόχευσής σας τα υπάρχοντα αρχεία στη βάση κώδικα που θέλετε να εκτελέσετε μέσω του prettier-eslint και του prettier-stylelint.

"scripts": {
 "fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",
 "fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss}' "
}

Όπως μπορείτε να δείτε, στοχεύω όλα τα υπάρχοντα JS και JSX και όλα τα υπάρχοντα CSS και SCSS, αντίστοιχα.

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

Βήμα 5

Εκτελέστε τα σενάρια!

npm run fix-codenpm run fix-styles

Τώρα, μπορείτε να κάνετε check-in σε όλες αυτές τις νέες αλλαγές ως μία ενιαία μεγάλη δέσμευση (ίσως ακόμη και από έναν προσωρινό χρήστη git, εάν δεν θέλετε να μολύνετε το δικό σας ιστορικό git.)

Μέρος 2: Ρύθμιση VSCode

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

Βήμα 1

Εγκαταστήστε τις προεκτάσεις Prettier, ESLint και stylelint για VSCode:

Prettier - Διαμορφωτής κώδικα - Visual Studio Marketplace

Παράταση για το Visual Studio Κωδικός - VS Κωδικός plugin για ομορφότερη / πιο όμορφη marketplace.visualstudio.com ESLint - Visual Studio Marketplace

Επέκταση για Visual Studio Code - Ενσωματώνει το ESLint JavaScript στον κώδικα VS. marketplace.visualstudio.com στυλ - Visual Studio Marketplace

Επέκταση για Visual Studio Code - Modern CSS / SCSS / Less linter marketplace.visualstudio.com

Βήμα 2

Διαμορφώστε μερικές ρυθμίσεις VSCode:

"prettier.eslintIntegration": true - λέει στον Prettier να χρησιμοποιήσει την ομορφιά αντί του Prettier

"prettier.stylelintIntegration": true - λέει στον Prettier να χρησιμοποιήσει την ομορφιά αντί του Prettier

"eslint.autoFixOnSave": false- δεν χρειαζόμαστε το ESLint για να διορθώσουμε άμεσα τον κώδικα μας, καθώς ο prettier-eslint θα λειτουργεί eslint --fixγια εμάς.

"editor.formatOnSave": true - τρέχει Prettier με τις παραπάνω επιλογές σε κάθε αποθήκευση αρχείων, οπότε δεν χρειάζεται ποτέ να καλέσετε χειροκίνητα την εντολή μορφής του VSCode.

Επιπλέον, μπορείτε να κάνετε check-in στις παραπάνω ρυθμίσεις στο χώρο εργασίας για έλεγχο πηγής, ώστε να είναι πιο εύκολο για τα άλλα μέλη της ομάδας να ρυθμίσουν τους συντάκτες τους. Μπορείτε να το κάνετε δημιουργώντας ένα .vscodeφάκελο στη ρίζα του έργου σας και τοποθετώντας όλους τους παραπάνω κανόνες σε ένα settings.jsonαρχείο.

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

strings.jsonscripts/*

Και αυτό είναι! Ποτέ μην ανησυχείτε για το styling κώδικα;

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

Παρακαλώ γράψτε ένα σχόλιο παρακάτω για οποιαδήποτε βοήθεια, πρόταση κ.λπ.

βιβλιογραφικές αναφορές

//prettier.io/docs/en/

//stylelint.io/user-guide/

//eslint.org/

//github.com/prettier/prettier-vscode

//github.com/prettier/prettier-eslint

//github.com/prettier/prettier-eslint-cli

//github.com/hugomrdias/prettier-stylelint

//www.youtube.com/watch?v=YIvjKId9m2c