Πώς να δημιουργήσετε το δικό σας πακέτο ESLint Config

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

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

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

Έχοντας αυτό υπόψη, η κοινότητα JavaScript και οι εταιρείες που χρησιμοποιούν JavaScript μπορούν να επεκτείνουν την αρχική διαμόρφωση ESLint. Υπάρχουν πολλά παραδείγματα στο μητρώο npm: το eslint-config-airbnb είναι ένα από τα πιο γνωστά.

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

Δημιουργήστε το έργο

Πρώτα θα πρέπει να δημιουργήσετε έναν νέο φάκελο και έργο npm. Κατά συνθήκη, το όνομα της ενότητας ξεκινά με eslint-config-, όπως eslint-config-test.

mkdir eslint-config-test cd eslint-config-test npm init 

Θα έχετε ένα αρχείο package.json που θα μοιάζει με το ακόλουθο απόσπασμα:

{ "name": "eslint-config-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 

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

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier 

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

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

module.exports = { extends: [ 'airbnb', 'eslint:recommended', 'plugin:import/errors', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended', 'prettier/react', ], plugins: [ 'react-hooks', ], rules: { }, }; 

Το rulesαντικείμενο αποθηκεύει οποιονδήποτε κανόνα που θέλετε να παρακάμψετε. Στο απόσπασμα παραπάνω rulesείναι άδειο, αλλά μη διστάσετε να ελέγξετε τις παρακάμψεις μου. Στο αποθετήριο Airbnb / JavaScript μπορείτε να βρείτε μια λίστα παρακάμψεων κανόνων από την κοινότητα.

Δημιουργήστε προσαρμοσμένους κανόνες

Ώρα να δημιουργήσετε ένα .prettierrcμε τους προσαρμοσμένους κανόνες σας - αυτό είναι ένα δύσκολο μέρος, δεδομένου ότι οι Prettier και ESLint μπορεί να συγκρουστούν με μερικούς κανόνες:

{ "tabWidth": 2 } 

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

Το επόμενο βήμα είναι να εξαγάγετε τη διαμόρφωση σας στο index.jsαρχείο:

const eslintrc = require('./.eslintrc.js'); module.exports = eslintrc; 

Είναι τεχνικά δυνατό να δημιουργηθούν όλες οι διαμορφώσεις στο index.jsαρχείο. Αλλά αν το κάνετε αυτό, δεν θα πάρετε το αντικείμενο διαμόρφωσης (εισάγετε εδώ το αστείο Inception).

Τελείωσες!

Voilà! Αυτό είναι το μόνο που χρειάζεστε για να ξεκινήσετε το δικό σας πακέτο διαμορφώσεων. Μπορείτε να δοκιμάσετε τοπικά το πακέτο ρυθμίσεων εκτελώντας τα ακόλουθα σε ένα έργο JavaScript:

npm install /Users/leonardo/path/to/eslint-config-test 

Λάβετε υπόψη ότι ενδέχεται να εγκατασταθούν και οι εξαρτήσεις του πακέτου διαμόρφωσης.

Εάν όλα φαίνονται καλά, μπορείτε να δημοσιεύσετε στο μητρώο npm:

npm publish 

Πλήρες παράδειγμα

Έχω ένα λειτουργικό έργο GitHub που δείχνει τη ρύθμιση αυτής της ανάρτησης: eslint-config-leozera. Μπορείτε επίσης να το δείτε παρακάτω:

Περισσότερα για το έργο

  • Διαμόρφωση ESLint: επίσημα έγγραφα ESLint. Ξέρετε, διαβάστε τα έγγραφα
  • Πώς να δημοσιεύσετε το πρώτο σας πακέτο NPM: αναφέροντας τον υπότιτλο μετά - "ό, τι πρέπει να γνωρίζετε για να δημιουργήσετε ένα πακέτο NPM."
  • eslint-config-wesbos: ένα έργο του Wes Bos που με βοήθησε κατά τη διάρκεια αυτής της εργασίας

Επίσης δημοσιεύτηκε στο blog μου. Αν σας αρέσει αυτό το περιεχόμενο, ακολουθήστε με στο Twitter και στο GitHub. Φωτογραφία εξωφύλλου της Susan Holt Simpson / Unsplash.