Πώς να αφήσετε τα προβλήματά σας στο Sublime

Το Sublime είναι ένα ελαφρύ πρόγραμμα επεξεργασίας κειμένου και είναι αρκετά δημοφιλές σε πολλούς προγραμματιστές ιστού. Τώρα ξέρω ότι υπάρχουν πολλά εξελιγμένα IDE στην αγορά με intellisense, ολοκλήρωση κώδικα και άλλα. Αλλά αυτή η ανάρτηση είναι για όσους παρέμειναν πιστοί στους αγαπημένους τους συντάκτες κειμένου! Έτσι, εάν χρησιμοποιείτε το Sublime για τα έργα σας, τότε ίσως να απολαύσετε μερικές από τις όμορφες δυνατότητες που προσφέρει. Το χνούδι είναι ένα από αυτά.

Ας ξεκινήσουμε με τον ορισμό του όρου «Linting».

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

Η διαδικασία χνούδι μπορεί να γίνει κατά τη διάρκεια τριών σταδίων ανάπτυξης:

  1. Μέσω του προγράμματος επεξεργασίας σας
  2. Μέσω της διαδικασίας κατασκευής
  3. Χρησιμοποιώντας ένα γάντζο pre-commit στον έλεγχο έκδοσης

Σε αυτήν την ανάρτηση, θα διερευνήσουμε το live linting στο πρόγραμμα επεξεργασίας. Υπάρχουν πολλά δημοφιλή linters εκεί έξω για JavaScript όπως JSHint, JSCS και ESLint. Θα χρησιμοποιώ το ESLint, επειδή το ESLint υποστηρίζει τον κωδικό ES6, είναι πολύ επεκτάσιμο και πολύ εύκολο στη χρήση. Αν σας ενδιαφέρει, μπορείτε να δείτε τις συγκρίσεις μεταξύ των διαφόρων χειμώνων εδώ!

Βήμα 1

Πρέπει πρώτα να εγκαταστήσετε το πακέτο ESLint npm. Η εντολή έχει ως εξής:

npm install -g eslint

Η επιλογή '-g' είναι να εγκαταστήσετε το πακέτο στο παγκόσμιο. Εγκαταστήστε το "npm" εάν δεν το έχετε ήδη εγκαταστήσει. Ένα αρχείο θα ανοίξει στο Sublime ζητώντας σας να κατεβάσετε δύο άλλες προσθήκες. Πρέπει να εγκαταστήσετε αυτά τα πρόσθετα χρησιμοποιώντας το Sublime's Package Control.

Ανοίξτε τον έλεγχο πακέτου χρησιμοποιώντας την εντολή / ctrl + shift + P και επιλέξτε την επιλογή "Control Control: Install Package". Στη συνέχεια, κατεβάστε τα δύο πρόσθετα.

  1. SublimeLinter-eslint
  2. SublimeLinter-contrib-eslint

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

Το πρόσθετο Sublime-contrib-eslint λειτουργεί ως διεπαφή μεταξύ του ESLint και του SublimeLinter. Μπορείτε να ελέγξετε τη διαδικασία εγκατάστασης στον κύριο ιστότοπό τους εάν κολλήσετε οπουδήποτε.

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

Βήμα 2

Φτου! Αυτές ήταν πολλές εγκαταστάσεις. Τώρα, τέλος, μπορείτε να δείτε την απίστευτη εμφάνιση του Linting! Ανοίξτε το αρχείο σας στο Sublime και δείτε τη δύναμη… αλλά περιμένετε τίποτα δεν συνέβη. Γιατί αυτό? Μην ανησυχείς. Έχετε εγκαταστήσει τα πάντα σωστά, αλλά το ESLint από μόνο του δεν κάνει τίποτα. Πρέπει να παρέχετε τη βασική διαμόρφωση και είναι μια πολύ απλή διαδικασία. Δείτε πώς:

  1. Ενεργοποιήστε το τερματικό πρόγραμμα στον αρχικό κατάλογο του έργου σας
  2. Πληκτρολογήστε αυτήν την εντολή
eslint --init

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

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

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