Ο οδηγός στυλ Airbnb είναι ένα σύνολο οδηγιών για τη σύνταξη καθαρού και συνεπούς κώδικα. Κυκλοφόρησε το 2012 και έκτοτε έχει γίνει ένας από τους πιο δημοφιλείς οδηγούς στυλ για έργα JavaScript.
Παρέχει ένα σύνολο οδηγιών για τη σύνταξη συνεπούς κώδικα που είναι εύκολο να διατηρηθεί επιβάλλοντας μια ποικιλία στυλ κανόνες για εσοχές, σχόλια, μέγιστο μήκος γραμμής, συμβάσεις ονομασίας μεταβλητών, εισαγωγικά και ορισμούς συναρτήσεων. Για να ρυθμίσετε τον οδηγό στυλ Airbnb σε ένα έργο JavaScript, θα πρέπει να χρησιμοποιήσετε ένα εργαλείο λινάτσας όπως το ESLint.
Εγκαταστήστε το ESLint
Το ESLint είναι μια JavaScript ανοιχτού κώδικα εργαλείο για ρινίσματα που βοηθά τους προγραμματιστές να γράφουν καθαρό κώδικα εντοπίζοντας και επιδιορθώνοντας προβλήματα. Μπορεί να εντοπίσει προβλήματα στον κώδικά σας, όπως σφάλματα σύνταξης, μη έγκυρες παραμέτρους και απροσδιόριστες μεταβλητές. Όταν εκτελείτε το ESLint με το
- -διορθώσετε ετικέτα, εντοπίζει αυτόματα και διορθώνει τυχόν προβλήματα που μπορούν να διορθωθούν στον κώδικα, εξοικονομώντας έτσι χρόνο.Μπορείτε να χρησιμοποιήσετε το ESLint για να επιβάλετε οδηγούς στυλ όπως ο οδηγός στυλ Airbnb.
Για να ξεκινήσετε, εκτελέστε την ακόλουθη εντολή στο τερματικό για να εγκαταστήσετε το ESLint ως εξάρτηση dev:
npm εγκατάσταση --save-dev eslint eslint-config-airbnb
Στη συνέχεια, αρχικοποιήστε το ESLint.
npx eslint --init
Θα σας ζητηθούν ερωτήσεις σχετικά με το έργο σας. Όταν σας ζητηθεί με:
? Πώς θα θέλατε να χρησιμοποιήσετε το EsLint;
Επιλέξτε αυτήν την επιλογή:
> Για να ελέγξετε τη σύνταξη, να βρείτε προβλήματα και να επιβάλετε το στυλ κώδικα
Απαντήστε στις επόμενες ερωτήσεις σύμφωνα με το έργο σας μέχρι να συναντήσετε το ακόλουθο μήνυμα.
? Πώς θα θέλατε να ορίσετε ένα στυλ για το έργο σας;
Στη συνέχεια απαντήστε ως εξής.
> Χρησιμοποιήστε έναν δημοφιλή οδηγό στυλ
Επιλέξτε τον οδηγό στυλ Airbnb για την επόμενη προτροπή.
? Ποιον οδηγό στυλ θέλετε να ακολουθήσετε;
> Airbnb:
Τέλος, εγκαταστήστε τις απαιτούμενες εξαρτήσεις επιλέγοντας «Ναι» στην επόμενη προτροπή.
Μόλις ολοκληρωθεί η εγκατάσταση, θα πρέπει να έχετε ένα .eslintsrc.json αρχείο στη ρίζα του φακέλου σας.
Προσαρμογή του Οδηγού στυλ Airbnb
Ο οδηγός στυλ Airbnb επιτρέπει την προσαρμογή. Μπορείτε να προσθέσετε επιπλέον κανόνες ή να παρακάμψετε υπάρχοντες κανόνες στο .eslintsrc.json αρχείο ρυθμίσεων.
Για παράδειγμα, για να επιτρέψετε το μέγιστο 80 χαρακτήρες ανά γραμμή, μπορείτε να προσθέσετε αυτόν τον κανόνα στην ενότητα κανόνων.
{
"επεκτείνεται": [
"πρόσθετο: αντιδρώ/προτείνεται",
"airbnb"
],
"κανόνες": {
"max-len": ["λάθος", { "κώδικας": 80 }]
}
}Εκτέλεση του ESLint στο package.json
Προσθέστε ένα σενάριο στο πακέτο.json αρχείο για εκτέλεση του ESLint.
"σενάρια": {
"στουπί": "ελεύθερος"
}
Εκτελέστε το σενάριο lint για να ελέγξετε για τυχόν σφάλματα στο linting εκτελώντας αυτήν την εντολή.
npm τρέξτε λιντ
Μπορείτε επίσης να προσθέσετε ένα σενάριο για να διορθώσετε προβλήματα στον κώδικα χρησιμοποιώντας το --διορθώσετε σημαία.
"σενάρια": {
"στουπί": "ελεύθερος",
"Lint: fix": "npm run lint -- --fix"
},
Τρέξιμο npm run lint: fix στο τερματικό θα διορθώσει αυτόματα τυχόν προβλήματα που μπορεί να επιδιορθώσει το λιπαντικό.
Ενεργοποιήστε το Linting στο Save in VS Code
Η εκτέλεση ενός σεναρίου κάθε φορά που θέλετε να βάλετε τον κώδικά σας μπορεί να γίνει κουραστικό. Ακολουθήστε τα παρακάτω βήματα για να ενεργοποιήσετε το linting κατά την αποθήκευση στο VS Code.
- Μεταβείτε στην καρτέλα "Επεκτάσεις" στην αριστερή πλευρά του παραθύρου VS Code.
- Αναζήτηση για το Επέκταση ESLint και εγκαταστήστε το.
- Μόλις εγκατασταθεί η επέκταση, ανοίξτε τις ρυθμίσεις VS Code (Αρχείο > Προτιμήσεις > Ρυθμίσεις ή πατώντας Ctrl +,).
- Στο πρόγραμμα επεξεργασίας ρυθμίσεων, αναζητήστε "ενέργειες κώδικα κατά την αποθήκευση".
- Κάντε κλικ στο "Επεξεργασία στο settings.json" και προσθέστε τις ακόλουθες ρυθμίσεις στο ρυθμίσεις.json αρχείο.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": αληθής
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
Αυτό επιτρέπει στην επέκταση ESLint να διορθώνει αυτόματα τον κωδικό σας όταν αποθηκεύετε.
Οφέλη από τη χρήση ενός οδηγού στυλ
Το κύριο πλεονέκτημα της χρήσης ενός οδηγού στυλ όπως ο οδηγός στυλ Airbnb είναι ότι σας βοηθά να διατηρείτε μια συνεπή βάση κώδικα. Αυτό είναι χρήσιμο σε μια ομάδα, καθώς οι προγραμματιστές μπορούν να κατανοήσουν και να συνεισφέρουν στη βάση κώδικα εύκολα. Σας βοηθά επίσης να εφαρμόσετε τις βέλτιστες πρακτικές και να αποφύγετε κοινά λάθη κωδικοποίησης.
