Linting JavaScript με JSHint

Linting στον προγραμματισμό υπολογιστών είναι η διαδικασία του Στατικό κώδικα ανάλυσης για την εύρεση ζητημάτων όπως η λανθασμένη σύνταξη και η χρήση του κώδικα. Το εργαλείο που χρησιμοποιείται για τη χαλάρωση είναι γνωστό ως a στουπί ή linter. Ένα από τα linters διαθέσιμα για JavaScript σήμερα είναι JSHint.

Το JSHint είναι διαθέσιμο για πολλαπλές πλατφόρμες. Το online εργαλείο ιστού που γνωρίζουν οι περισσότεροι από εμάς είναι στο jshint.com. Υπάρχουν επίσης οι εργαλείο γραμμής εντολών μέσω Node.js, ένα API JavaScript, πολλαπλούς επεξεργαστές κειμένου και plug-ins IDE για το JSHint. Μπορείτε να δείτε την πλήρη λίστα των διαθέσιμων εργαλείων JSHint για διαφορετικά περιβάλλοντα στη σελίδα λήψης και εγκατάστασης της ιστοσελίδας JSHint.

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

Μέσω εργαλείου γραμμής εντολών

(1) Εάν δεν έχετε εγκαταστήσει το Node.js στον υπολογιστή σας, τότε θα πρέπει να μεταβείτε στον ιστότοπό του και να το κατεβάσετε και να το εγκαταστήσετε πρώτα. Για να ελέγξετε αν το Node.js έχει εγκατασταθεί με επιτυχία, μπορείτε να εκτελέσετε την εντολή npm -version στη διεπαφή γραμμής εντολών (CLI) και θα σας δείξει την έκδοση του Node.js στον υπολογιστή σας (ή μπορείτε απλά να εκτελέσετε την εντολή npm και να δούμε τι συμβαίνει).

(2) Για να εγκαταστήσετε το εργαλείο JSHint, εκτελέστε την εντολή npm install jshint στο CLI. Αν θέλετε να ελέγξετε αν το JSHint έχει εγκατασταθεί με επιτυχία, εκτελέστε την εντολή jshint -version για να δείτε την έκδοσή της. Μόλις ολοκληρωθεί αυτό το βήμα, η εγκατάσταση ολοκληρώθηκε.

(3) Για να εκτελέσετε το εργαλείο, μεταβείτε στον κατάλογο του CLI όπου βρίσκεται το αρχείο JavaScript (πχ test.js) και εκτελέστε την εντολή jshint test.js. Το αποτέλεσμα της ανάλυσης του εργαλείου στον κωδικό σας JavaScript θα εμφανιστεί (κάτι τέτοιο):

Μέσω του API JavaScript

(1) Κάντε λήψη του συμπιεσμένου αρχείου από αυτόν τον σύνδεσμο GitHub και αποσυνδέστε το. Στο dist φάκελο θα βρείτε το jshint Το αρχείο JS (η βιβλιοθήκη API).

(2) Για να χρησιμοποιήσετε το API, προσθέστε το jshint JS στο έργο σας και να το συνδέσετε στη σελίδα σας. Το API μπορεί να προσπελαστεί στον κώδικα JavaScript χρησιμοποιώντας τη λειτουργία / αντικείμενο που ονομάζεται JSHINT. Ακολουθεί ένας δείγμα κώδικα HTML όπου το API JavaScript του JSHint χρησιμοποιείται για την ανάλυση του κώδικα JavaScript που υπάρχει στο πηγή πίνακα και να εμφανίσει τα αποτελέσματα της ανάλυσης στη σελίδα.

(3) Περάσαμε το πηγή πίνακα που περιέχει τον πηγαίο κώδικα JavaScript προς ανάλυση και επιλογές αντικείμενο που περιέχει επιλογές χνούδι (θα πάμε σε επιλογές σύντομα) ως παράμετροι στο JSHINT λειτουργία. Το αποτέλεσμα της ανάλυσης (ένα αντικείμενο JSON) λαμβάνεται από JSHINTτης ιδιότητας λειτουργίας που ονομάζεται δεδομένα.

(4) JSON.stringify χρησιμοποιείται για εμφάνιση μόνο εδώ, για να εμφανιστεί το αποτέλεσμα που επιστρέφεται από το δεδομένα λειτουργία σε μορφή συμβολοσειράς στη σελίδα. ο ομορφιά Η συμβολοσειρά JSON μοιάζει με αυτή. Τα επισημασμένα μέρη είναι τα σφάλματα που εντοπίζονται από το JSHint σε απλές προτάσεις.

Επιλογές χνούδισης

Οι επιλογές Linting επιτρέπουν τη διαμόρφωση της διαδικασίας χνούδι. Μπορούμε να καθορίσουμε ποιο είδος σφαλμάτων ή wanring πρέπει να σφετεριστεί και ποια όχι. Στο προηγούμενο παράδειγμα χρησιμοποιήθηκαν δύο εναλλακτικές λύσεις undef και αχρησιμοποίητος.

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

Εάν χρησιμοποιείτε το εργαλείο CLI μέσω Node.js, μπορείτε να γράψετε τις επιλογές χαλάρωσης μέσα σε ένα package.json αρχείο κάτω από το ακίνητο jshintConfig στον ίδιο κατάλογο. Μπορείτε επίσης να προσθέσετε τις επιλογές ως οδηγίες στον κώδικα JavaScript.

 // - test.js - / * jshint undef: true, αχρησιμοποίητο: true * / foo (); α = 7;

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