10 εργαλεία CSS και JavaScript για τη βελτιστοποίηση κώδικα

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

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

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

1. CSSLint

Το CSSLint προφανώς σκοπεύει να "βλάψει τα συναισθήματά σας", αλλά σε αντάλλαγμα αυτό "σας κάνει να κωδικοποιήσετε πολύ καλύτερα". Το CSSLint οδηγεί σήμερα την αγορά της CSS linting. Είναι γραμμένο σε JavaScript, είναι ανοικτού κώδικα και έρχεται με τόνους ρυθμιζόμενων επιλογών.

CSSLint σας επιτρέπει να επιλέξτε τι είδους σφάλματα και προειδοποιήσεις (συμβατότητα, απόδοση, επανάληψη κ.λπ.) που θέλετε να δοκιμάσετε, και επικυρώνει τη σύνταξη CSS σας ενάντια στους κανόνες που επιλέγετε.

Δεν λειτουργεί μόνο στο πρόγραμμα περιήγησης, αλλά έχει επίσης μια διασύνδεση γραμμής εντολών και μπορείτε να την ενσωματώσετε στο δικό σας build system.

2. SublimeLinter CSSLint

Το CSSLint είναι μια τέτοια αποτελεσματική στρώση CSS, που είναι δύσκολο να βρεθεί ένας ανταγωνιστής που να μετράει σε αυτό. Πιθανώς αυτός είναι ο λόγος για τον οποίο το πλαίσιο χαλάρωσης SublimeLinter δημιούργησε το plugin του CSS linting πάνω από αυτό. Το SublimeLinter είναι ένα plugin SublimeText που είναι (CSS, PHP, Python, Java, Ruby, κλπ.) μέσα στο SublimeText editor.

Πριν εγκαταστήσετε το ίδιο το plugin SublimeLinter CSSLint, πρέπει να εγκαταστήσετε το CSSLint ως μονάδα Node.js. Το μεγάλο πράγμα για αυτό το εύχρηστο εργαλείο είναι ότι εσείς πρέπει να ρυθμίσετε μόνο τις ρυθμίσεις μία φορά, ή αν είστε ικανοποιημένοι με τις προεπιλογές που δεν χρειάζεται καν να το κάνετε αυτό, τότε μπορείτε πάντα να λαμβάνετε τις σχετικές προειδοποιήσεις και ειδοποιήσεις μέσα στον επεξεργαστή σας SublimeText χωρίς περαιτέρω παρενόχληση.

3. StyleLint

Το StyleLint βοηθά τους προγραμματιστές να αποφεύγουν τα σφάλματα σε CSS, SCSS ή σε οποιαδήποτε άλλη σύνταξη που μπορεί να αναλύσει το PostCSS. Το StyleLint δοκιμάζει πάνω από εκατό κανόνες και μπορείτε επιλέξτε ποια θέλετε να ενεργοποιήσετε (δείτε ένα παράδειγμα config).

Εάν δεν θέλετε να δημιουργήσετε τη δική σας διαμόρφωση, μπορείτε επίσης να επιλέξετε ένα προκαθορισμένο, τυπικό config που περιέχει περίπου 60 κανόνες StyleLint. Το StyleLint είναι ένα αρκετά ευέλικτο εργαλείο, μπορεί να επεκταθεί με επιπλέον plugins και να χρησιμοποιηθεί σε 3 διαφορετικές μορφές: ως εργαλείο γραμμής εντολών, ως module Node.js ή ως plugin PostCSS.

4. Validator W3C CSS

Παρά το γεγονός ότι ο Validator του W3C CSS δεν θεωρείται συνήθως ως εργαλείο ξυρίσματος, δίνει στους προγραμματιστές μια μεγάλη ευκαιρία να ελέγξουν τον πηγαίο κώδικα τους CSS σύμφωνα με τα επίσημα πρότυπα του W3C. Το W3C δημιούργησε τους επικυρωτές του με πρόθεση να παράσχει ένα εργαλείο παρόμοιο με το πρόγραμμα ελέγχου Lint για τη γλώσσα C.

Αρχικά, δημιούργησαν τον επικυρωτή σήμανσης HTML, τον οποίο ακολούθησε αργότερα ο επικύρωση CSS. Ο έλεγχος CSS του W3C δεν έχει τόσες επιλογές όπως το CSSLint, αλλά αυτό επιστρέφει λεπτομερή και εύκολα κατανοητά μηνύματα σφάλματος και ειδοποιήσεις.

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

5. Βρώμικα σημάδια

Το Dirty Markup καθαρίζει, μορφοποιεί και επικυρώνει τον κώδικα HTML, CSS και JavaScript. Μπορεί να είναι μια εξαιρετική επιλογή εάν σας αρέσει ο απλός σχεδιασμός και θέλετε μια γρήγορη λύση. Βρώμικη σήμανση ρίχνει μηνύματα σφάλματος και ειδοποιήσεις σε πραγματικό χρόνο ενώ εσείς να γράψετε ή να τροποποιήσετε τον κώδικα σας μέσα στον επεξεργαστή.

Όταν χτυπήσετε το “ΚΑΘΑΡΗ” κουμπί, αυτό διορθώνει ταυτόχρονα σφάλματα σύνταξης, αλλάζει τη μορφή, αλλά αφήνει άθικτες τις προειδοποιήσεις επιτρέποντάς σας να τα λύσετε όποτε θέλετε. Δεν μπορείτε να επιλέξετε τους κανόνες για τους οποίους θέλετε να δοκιμάσετε, αλλά και τους τρεις τύπους αρχείων έχετε μερικές ρυθμίσεις που σας επιτρέπουν να αποφασίσετε τη μορφή της καθαρισμένης εξόδου.

6. JSLint

Το JSLint κυκλοφόρησε για πρώτη φορά το 2002 από τον Douglas Crockford και από τότε δεν έχει χάσει την ορμή, ώστε να μπορείτε να υποθέσετε με ασφάλεια ότι πρόκειται για ένα σταθερό και αξιόπιστο εργαλείο JavaScript.

Το JSLint μπορεί να επεξεργαστεί τον πηγαίο κώδικα JavaScript και το κείμενο JSON και έρχεται με ένα έτοιμη διαμόρφωση που ακολουθεί τις βέλτιστες πρακτικές της JS Ο Κρόκφορντ έγραψε στο βιβλίο του με τίτλο JavaScript: Τα καλά μέρη.

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

7. JSHint

Το JSHint είναι ένα πολύ δημοφιλές πιρούνι του JSLint και χρησιμοποιείται από μεγάλες εταιρείες τεχνολογίας όπως το Facebook, το Twitter και το Medium

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

Μπορείτε όχι μόνο να χρησιμοποιήσετε το JSHint για να ξεσκονίζετε τη βανίλια JavaScript, αλλά και την υποστήριξη για πολλές δημοφιλείς βιβλιοθήκες JS, όπως jQuery, Mootools, Mocha και Node.js.

8. ESLint

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

Με τον καθορισμό των επιλογών αναλυτή, μπορείτε επίσης επιλέξτε ποιο πρότυπο της γλώσσας JS θέλετε να υποστηρίξετε κατά τη διαδικασία χαλάρωσης, πράγμα που σημαίνει ότι όχι μόνο μπορείτε να ελέγξετε τα σενάρια σας από την προεπιλεγμένη σύνταξη ECMAScript 5, αλλά και από τα ECMAScript 6, ECMAScript 7 και JSX.

9. JSCS

Το JSCS ή το JavaScript Code Style είναι ένα pluggable linter στυλ κώδικα για το JavaScript, που ελέγχει τους κανόνες μορφοποίησης κώδικα.

Ο στόχος του JSCS είναι να παράσχει ένα μέσο προγραμματίζουν την τήρηση ενός συγκεκριμένου οδηγού στυλ κωδικοποίησης. Παρόλο που το JSCS δεν ελέγχει σφάλματα και σφάλματα, εξακολουθεί να χρησιμοποιείται από πολλούς σημαντικούς παίκτες της βιομηχανίας τεχνολογίας, όπως το Google, το AirBnB και το AngularJS, καθώς βοηθά τους προγραμματιστές να διατηρούν μια πολύ ευανάγνωστη και σταθερή βάση κώδικα.

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

10. StandardJS

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

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