Οδηγός χρήσης του SublimeLinter για προγραμματιστές

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

Σε αυτό το σεμινάριο, θα δούμε πώς να εγκαταστήσετε και να ρυθμίσετε το SublimeLinter. Ας ξεκινήσουμε.

Ξεκινώντας

Ο ευκολότερος τρόπος για να εγκαταστήσετε το SublimeLinter 4 είναι μέσω του Control Packet SublimeText. Από τότε στο SublimeLinter 3, καθε linter πρέπει να εγκατασταθεί χωριστά. Αυτό επιτρέπει στο SublimeLinter να τρέχει πιο αποτελεσματικά μόνο με την εκτέλεση του linters που έχουμε εγκαταστήσει.

Εφόσον χρησιμοποιώ HTML, CSS, JS και PHP τις περισσότερες φορές στα έργα μου, θα ήθελα να εγκαταστήσω linters για αυτές τις γλώσσες. Στο Έλεγχος Συσκευασίας, Εγκαθιστώ το SublimeLinter μαζί με τα ακόλουθα πρόσθετα:

• SublimeLinter-html-τακτοποιημένο
• SublimeLinter-stylelint
• SublimeLinter-eslint
• SublimeLinter-php

Στη συνέχεια, για να λειτουργήσουν αυτά τα πρόσθετα, πρέπει επίσης να εγκαταστήσουμε το linter για τις γλώσσες, οι οποίες είναι HTML Tidy, CSSLint, JSHint και PHP CLI.

Για όσους από εσάς χρησιμοποιείτε το OSX, το Tidy και το PHP είναι προεγκατεστημένα στο σύστημα. Για επαλήθευση, εκτελέστε τις ακόλουθες δύο εντολές διαδοχικά.

 τακτοποίηση - έκδοση php - έκδοση 

Αυτές οι εντολές θα σας δείξουν την έκδοση Tidy και PHP που έχετε. Μπορείτε να προχωρήσετε στη χρήση τους σε Υψηλή Κείμενο.

Εάν βρίσκεστε σε Windows ή Linux ή δεν έχετε εγκατεστημένα, μπορείτε να ακολουθήσετε τις παρακάτω οδηγίες.

Εγκατάσταση του HTML Tidy

Για να εγκαταστήσετε το HTML Tidy:

• Στο OSX, εκτελέστε αυτήν την εντολή στο Terminal παρασκευάστε το homebrew / dupes / tidy
• Στο Linux, χρησιμοποιήστε αυτήν την εντολή sudo apt-get εγκαταστήστε τακτοποιημένο.
• Στα Windows, μπορείτε να πάρετε το πρόγραμμα εγκατάστασης EXE από το TidyBatchFiles.

Εγκατάσταση PHP CLI

• Οι χρήστες OSX μπορούν να εγκαταστήσουν την PHP στο σύστημα με χτύπημα-s http://php-osx.liip.ch/install.sh | bash-s 5.5 εντολή. Αυτό θα εγκαταστήσει την PHP 5.5, η οποία είναι η τελευταία έκδοση, κατά τη στιγμή της γραφής.
• Linux οι χρήστες μπορούν να ακολουθήσουν αυτό το ολοκληρωμένο φροντιστήριο από την DigitalOcean.
• Για χρήστες Windows, μπορείτε να κατεβάσετε εδώ το πρόγραμμα εγκατάστασης.

Εγκατάσταση του Styleint

Στη συνέχεια, θα εγκαταστήσουμε το γραμματοκιβώτιο CSS που ονομάζεται Stylelint και θα μας επιτρέψει να ελέγξουμε και να εφαρμόσουμε τις βέλτιστες πρακτικές στα αρχεία CSS. Οι παρακάτω οδηγίες μπορούν να ακολουθηθούν και στις τρεις πλατφόρμες: OSX, Windows και Linux. Υποθέτω ότι έχετε ήδη εγκαταστήσει το Node.js με τον NPM.

Για να εγκαταστήσετε το Stylelint, εκτελέστε:

 npm install -g stylelint 

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

Εγκατάσταση του ESLint

Θα εγκαταστήσουμε επίσης το ESLint, ένα σύγχρονο και εξαιρετικά διαμορφωμένο linter για JavaScript. Αυτό θα μας βοηθήσει να επιβάλουμε βέλτιστες πρακτικές καθώς και να εντοπίζουμε τυχόν λάθη κατά τη σύνταξη του JavaScript. Η εγκατάσταση του ESLint απαιτεί επίσης το Node.js με το NPM.

Για να το εγκαταστήσετε, εκτελέστε.

 npm install -g eslint 

Ομοίως, θα πρέπει να προσθέσετε τη διαμόρφωση ESLint στο έργο σας ή να χρησιμοποιήσετε την προκαθορισμένη διαμόρφωση όπως eslint-config-recommended.

Είμαστε όλοι έτοιμοι. Μπορούμε να ξεκινήσουμε λιπαντικό HTML, CSS, JS και PHP στο SublimeText χρησιμοποιώντας το SublimeLinter 4.

Νέες λειτουργίες στο SublimeLinter 4

Το SublimeLinter 4 φέρνει μερικά νέα χαρακτηριστικά και ένα εύκολα αντιληπτό είναι ο πίνακας που εμφανίζει όλα τα σφάλματα των ανοιγμένων αρχείων. Εάν βρίσκεστε στο Mac, πατήστε Command + Ctrl + A. Στα Windows και στο Linux, μπορείτε να πατήσετε Ctrl + K, Ctrl + A.

Το πλήκτρο Hot θα εμφανίσει μια λίστα με σφάλματα, όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης.

Χρησιμοποιήστε το ↑ και ↓ για να περιηγηθείτε στη λίστα και η σελίδα θα μεταβεί στην ακριβή γραμμή όπου εμφανίστηκε το σφάλμα.

Καλύτερη οπτική

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

Πολύ ρυθμιζόμενο

Το SublimeLinter 4 είναι πλέον πιο διαμορφωμένο από ποτέ. Για παράδειγμα, τώρα μπορούμε να το προσαρμόσουμε “στυλ” σε κάθε μία από τις διαστάσεις της γραμμής. Αυτό μας επιτρέπει να ρυθμίζουμε χωριστά τις εικόνες, το χρώμα, τη λειτουργία χνούδι, τη διαδρομή και τις μεταβλητές περιβάλλοντος για κάθε στρώση.

Περαιτέρω αναφορά

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

• Επίσημο Έγγραφο SublimeLinter
• Lint στο λογισμικό και τον προγραμματισμό - WikiPedia
• Υπερυψωμένα αποθέματα