Προγραμματισμός

Κριτική: Οι 10 καλύτεροι συντάκτες JavaScript

Οι προγραμματιστές JavaScript διαθέτουν πολλά καλά εργαλεία για να διαλέξετε - σχεδόν πάρα πολλά για να παρακολουθείτε. Σε αυτό το άρθρο, συζητώ 10 επεξεργαστές κειμένου με καλή υποστήριξη για ανάπτυξη με JavaScript, HTML5 και CSS και για την τεκμηρίωση με το Markdown. Γιατί να χρησιμοποιήσετε ένα πρόγραμμα επεξεργασίας για προγραμματισμό JavaScript αντί για IDE; Με μια λέξη: ταχύτητα.

Η ουσιώδης διαφορά μεταξύ των επιμελητών και των IDE είναι ότι οι IDE μπορούν να εντοπίσουν σφάλματα και μερικές φορές να σχεδιάσουν τον κώδικά σας και τα IDE να υποστηρίζουν συστήματα διαχείρισης κύκλου ζωής εφαρμογών (ALM). Πολλοί από τους συντάκτες που συζητάμε εδώ υποστηρίζουν τουλάχιστον ένα σύστημα ελέγχου εκδόσεων, συχνά το Git, έτσι ώστε το κριτήριο να είναι λιγότερο διαφοροποιημένο μεταξύ των IDE και των εκδοτών από ό, τι στο παρελθόν.

Το Sublime Text και το Visual Studio Code είναι το κορυφαίο μεταξύ των επεξεργαστών JavaScript - Sublime Text για την ταχύτητά του όσο και για τις βολικές δυνατότητες επεξεργασίας και το Visual Studio Code για ακόμη καλύτερες λειτουργίες και ταχύτητα που είναι σχεδόν εξίσου καλή. Οι αγκύλες παίρνουν την τρίτη θέση. Ενώ το TextMate κατατάχθηκε ψηλά στη λίστα μου πριν από λίγα χρόνια, οι δυνατότητές του δεν συμβαδίζουν με τις νέες εξελίξεις.

Πιθανότατα, θα βρείτε τον επεξεργαστή JavaScript της επιλογής σας σε Υψηλό Κείμενο, Visual Studio Code ή Brackets. Αλλά πολλά άλλα εργαλεία — Atom, BBEdit, Komodo Edit, Notepad ++, Emacs και Vim — όλα έχουν κάτι να τους προτείνουν. Ανάλογα με την εργασία που έχετε στη διάθεσή σας, μπορεί να βρείτε κάποιο από αυτά βολικό για να έχετε γύρω σας.

Σχετικό βίντεο: Τι είναι το JavaScript; Ο δημιουργός Brendan Eich εξηγεί

Ο Brendan Eich, δημιουργός της γλώσσας προγραμματισμού JavaScript, εξηγεί πώς χρησιμοποιείται η γλώσσα και γιατί εξακολουθεί να είναι αγαπημένο στους προγραμματιστές για την ευκολία χρήσης του.

Ας δούμε τις επιλογές και να τις συγκρίνουμε στο τέλος.

Υψηλό κείμενο

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

Εκτός από την ταχύτητα, τα πολλά αξιοσημείωτα πλεονεκτήματα του Sublime Text υποστηρίζουν υποστήριξη για περισσότερους από 70 τύπους αρχείων, μεταξύ των οποίων JavaScript, HTML και CSS. σχεδόν άμεση πλοήγηση και άμεση εναλλαγή έργων. πολλαπλές επιλογές (κάντε μια δέσμη αλλαγών ταυτόχρονα), συμπεριλαμβανομένων των επιλογών στηλών (επιλέξτε μια ορθογώνια περιοχή του αρχείου). πολλαπλά παράθυρα (χρησιμοποιήστε όλες τις οθόνες σας) και διαχωρισμένα παράθυρα (εκμεταλλευτείτε την ακίνητη περιουσία της οθόνης σας). Ολοκληρώστε την προσαρμογή με απλά αρχεία JSON. ένα API προσθηκών που βασίζεται σε Python. και μια ενοποιημένη παλέτα εντολών με δυνατότητα αναζήτησης.

Για προγραμματιστές που προέρχονται από άλλους συντάκτες, το Sublime Text υποστηρίζει δέσμες TextMate (εξαιρουμένων των εντολών) και προσομοίωση Vi / Vim. Η ανεπίσημη τεκμηρίωση Sublime Text κάνει υποτιμητικές (και λανθασμένες) παρατηρήσεις σχετικά με τους χρήστες του Emacs (μου, για παράδειγμα), αλλά θα τα παραβλέψω. Γιατί υπάρχει ακόμη η ανεπίσημη τεκμηρίωση Sublime Text; Λοιπόν, για ένα πράγμα, η επίσημη τεκμηρίωση είναι λιγότερο από πλήρης - πολύ λιγότερο.

Όταν είπα "σχεδόν άμεση πλοήγηση" νωρίτερα, το εννοούσα. Για παράδειγμα, για να μεταβείτε από την τρέχουσα θέση στην οθόνη στον ορισμό του getResponseHeader Στο ajax.js, τότε μπορώ να πληκτρολογήσω Command-P σε Mac ή Ctrl-P σε υπολογιστή ατζ για να ανοίξετε μια παροδική προβολή στο ajax.js @grh και Enter για να ανοίξετε μια καρτέλα με getResponseHeader επιλεγμένο. Το Sublime Text μπορεί να συμβαδίσει με την πληκτρολόγηση μου. Αισθάνεται τόσο ανταποκρινόμενο όσο μερικοί από τους καλύτερους παλιούς συντάκτες DOS όπως οι Brief και Kedit.

Μόλις επιλέξωgetResponseHeader, Μπορώ να βρω όλες τις χρήσεις της συνάρτησης στο πλαίσιο πληκτρολογώντας Shift-Command-F σε Mac, ή Shift-Ctrl-F σε υπολογιστή και μετά Enter. Μια νέα καρτέλα θα μου δείξει τα αποτελέσματα αναζήτησης με τον όρο αναζήτησης να εμφανίζεται σε κάθε απόσπασμα πέντε γραμμών. Κάνοντας διπλό κλικ σε κείμενο σε πλαίσιο εμφανίζεται το πλήρες περιεχόμενο του αρχείου σε μια νέα καρτέλα.

Κάνοντας κλικ σε ένα όνομα αρχείου στην αριστερή πλαϊνή γραμμή φακέλων εμφανίζεται μια μεταβατική καρτέλα που δείχνει τα περιεχόμενα του αρχείου. Κάνοντας κλικ σε διαφορετικό αρχείο αντικαθιστά αυτή την καρτέλα. Και πάλι, το Sublime Text είναι σε θέση να συμβαδίζει με την πληκτρολόγηση και το κλικ μου. Ομοίως, η πλοήγηση μειωμένου μεγέθους στην επάνω δεξιά γωνία της σελίδας με επιτρέπει να μετακινηθώ μέσα σε ένα αρχείο σχεδόν αμέσως, χωρίς το γενικό κύλισμα. Μακάρι το Microsoft Word να ανταποκρίνεται εξίσου.

Πολλαπλές επιλογές και επιλογές στηλών κάνουν γρήγορη δουλειά για τα είδη ενοχλητικών τροποποιήσεων που απαιτούσαν κανονικές εκφράσεις. Πρέπει να μετατρέψετε μια λίστα λέξεων σε δομή JSON όπου κάθε λέξη περιβάλλεται από διπλά εισαγωγικά και κάθε λέξη που παρατίθεται χωρίζεται από την επόμενη με κόμμα; Χρειάζονται περίπου οκτώ πλήκτρα στο Υψηλό Κείμενο, ανεξάρτητα από το πόσες λέξεις έχετε στη λίστα.

Στο πλαίσιο ανάπτυξης των Windows, χρησιμοποιώ δύο ευρείες οθόνες. Στο MacBook μου, χρησιμοποιώ την οθόνη Retina και μια οθόνη Thunderbolt. Εκτός αν επεξεργάζομαι τη μία οθόνη και εντοπίζω τον εντοπισμό σφαλμάτων στην άλλη, συνήθως θέλω να δω πολλά διαφορετικά αρχεία προέλευσης και διαφορετικές προβολές σε αρχεία προέλευσης ταυτόχρονα. Το Sublime Text υποστηρίζει πολλά παράθυρα, διαχωρισμένα παράθυρα, πολλαπλούς χώρους εργασίας ανά έργο, πολλαπλές προβολές και πολλαπλά παράθυρα που περιέχουν προβολές. Είναι αρκετά απλό να χρησιμοποιώ όλη την οθόνη ακινήτων μου όταν το θέλω και να ενοποιώ όταν χρειάζεται να κάνω χώρο για εντοπισμό σφαλμάτων και δοκιμές.

Μπορείτε να προσαρμόσετε τα πάντα σχετικά με το Sublime Text: το συνδυασμό χρωμάτων, τη γραμματοσειρά κειμένου, τις συνδέσεις καθολικών κλειδιών, τη καρτέλα σταματά, τις δεσμεύσεις και τα αποσπάσματα κλειδιών για συγκεκριμένο αρχείο, ακόμη και τους κανόνες επισήμανσης σύνταξης. Οι προτιμήσεις κωδικοποιούνται ως αρχεία JSON. Οι ορισμοί που αφορούν τη γλώσσα είναι αρχεία προτιμήσεων XML. Υπάρχει μια ενεργή κοινότητα γύρω από το Sublime Text που δημιουργεί και συντηρεί πακέτα και προσθήκες Sublime Text. Πολλές δυνατότητες που αρχικά πίστευα ότι δεν υπήρχε το Sublime Text - συμπεριλαμβανομένων των διεπαφών JSLint και JSHint, JsFormat, JsMinify, PrettyJSON και Git - αποδεικνύονται διαθέσιμες μέσω της κοινότητας, χρησιμοποιώντας το Package Installer.

Ένας από τους λόγους για την εξαιρετική απόδοση του Sublime Text είναι ότι είναι αυστηρά κωδικοποιημένο. Ένας άλλος λόγος είναι ότι το Υψηλό Κείμενο δεν είναι IDE και δεν χρειάζεται τα γενικά λογιστικά βιβλία ενός IDE.

Από την άποψη ενός προγραμματιστή, αυτό είναι ένα δύσκολο συμβιβασμό. Εάν βρίσκεστε σε έναν σφιχτό δοκιμαστικό βρόχο ανάπτυξης με "κόκκινο, πράσινο, refactor", τότε ένα IDE που έχει δημιουργηθεί για επεξεργασία, δοκιμή, refactor και κάλυψη κώδικα παρακολούθησης θα σας βοηθήσει περισσότερο. Αν κάνετε κριτικές κώδικα ή σημαντικές τροποποιήσεις, από την άλλη πλευρά, θα θέλετε το πιο γρήγορο και πιο αποτελεσματικό πρόγραμμα επεξεργασίας που μπορείτε να βρείτε. Αυτός ο συντάκτης μπορεί κάλλιστα να είναι Sublime Text.

Κόστος: Απεριόριστη δωρεάν δοκιμή. 70 $ ανά χρήστη για επαγγελματική ή προσωπική άδεια. Πλατφόρμες: Windows, MacOS και Linux.

Κωδικός Visual Studio

Το Visual Studio Code είναι ένας δωρεάν ελαφρύς επεξεργαστής και IDE από τη Microsoft. Διαθέτει στοιχεία του Visual Studio, αναμεμιγμένο με το ανοιχτό κέλυφος Atom Electron, παρέχοντας εξαιρετική υποστήριξη για ανάπτυξη ASP.Net Core με C # και για ανάπτυξη Node.js με TypeScript και JavaScript. Σπάζοντας με το ιστορικό μοτίβο της Microsoft που υποστηρίζει μόνο το Visual Studio σε Windows, το Visual Studio Code εκτελείται επίσης σε MacOS και Linux. Το παρακάτω στιγμιότυπο οθόνης λήφθηκε σε MacOS.

Το Visual Studio Code έχει εκπληκτικά καλή ολοκλήρωση κώδικα JavaScript, χάρη στην συμπερίληψη του μεταγλωττιστή TypeScript και του κινητήρα Salsa. Το Visual Studio Code στέλνει τον κώδικα JavaScript στον μεταγλωττιστή TypeScript στο παρασκήνιο για να συμπεράνει τους τύπους και να δημιουργήσει έναν πίνακα συμβόλων. Μπορείτε να δείτε τα αποτελέσματα στο πλαίσιο κοντά στο κάτω μέρος της εικόνας της οθόνης που δείχνει τις πληροφορίες για τοhasOwnProperty μέθοδος.

Ο ίδιος πίνακας συμβόλων επιτρέπει στο IntelliSense να σας προσφέρει εξαιρετικές αναδυόμενες λίστες επιλογών για ολοκλήρωση κώδικα καθ 'όλη τη διάρκεια της πληκτρολόγησης μιας έκφρασης. Λαμβάνετε αυτόματο κλείσιμο παρενθέσεων, αυτόματες επιλογές συμπλήρωσης λέξεων, αυτόματες λίστες μεθόδων μετά την πληκτρολόγηση ., και αυτόματες λίστες παραμέτρων μέσα σε μια μέθοδο. Μπορείτε να βελτιώσετε το IntelliSense προσθέτοντας αναφορές σε αρχεία d.ts απόΣίγουρα πληκτρολογημένο, και ο Visual Studio Code θα προσφέρει κάτι τέτοιο για εσάς όταν αναγνωρίζει κοινά προβλήματα, όπως η χρήση του__dirname, η οποία είναι μια ενσωματωμένη μεταβλητή Node.js.

Η υποστήριξη Git είναι πολύ καλή και αρκετά απλή στη χρήση. Το πρόγραμμα εντοπισμού σφαλμάτων κώδικα Visual Studio παρέχει μια εξαιρετική εμπειρία εντοπισμού σφαλμάτων για ανάπτυξη Node.js (και ανάπτυξη ASP.Net). Το Visual Studio Code έχει πολύ καλά εργαλεία για HTML, CSS, Less, Sass και JSON, το οποίο βασίζεται στην ίδια τεχνολογία που τροφοδοτεί τα εργαλεία προγραμματιστή του Internet Explorer F12. Επιπλέον, έχει προσαρμόσιμη ενσωμάτωση με εξωτερικούς εκτελεστές εργασιών όπωςχαψιά καιΤζέικ.

Το Visual Studio Code έχει προσελκύσει ένα ισχυρό οικοσύστημα προσθηκών - για παράδειγμα, για υποστήριξη του Angular and React. Είναι τώρα ο συντάκτης που προτείνω όταν γράφω σεμινάρια σχετικά με τη δημιουργία εφαρμογών με πλαίσια JavaScript και TypeScript και βιβλιοθήκες.

Κόστος: Δωρεάν ανοιχτού κώδικα. Πλατφόρμα: Windows, MacOS και Linux.

Αγκύλες

Το Brackets είναι ένας δωρεάν επεξεργαστής ανοιχτού κώδικα, αρχικά από την Adobe, σχεδιασμένος για να παρέχει καλύτερα εργαλεία για JavaScript, HTML και CSS, καθώς και σχετικές τεχνολογίες ανοιχτού ιστού. Τα ίδια τα αγκύλια είναι γραμμένα σε JavaScript, HTML και CSS και οι προγραμματιστές χρησιμοποιούν αγκύλες για να δημιουργήσουν αγκύλες. Εκτός από τις ενσωματωμένες δυνατότητες, το Brackets διαθέτει διαχειριστή επεκτάσεων και οι επεκτάσεις είναι διαθέσιμες για πολλές από τις γλώσσες και τα εργαλεία που χρησιμοποιούν οι προγραμματιστές front-end. Οι αγκύλες δεν είναι τόσο γρήγορες όσο το Sublime Text ή το TextMate, αλλά είναι ακόμα αρκετά γρήγορο εκτός από παύσεις για φόρτωση ή ενημέρωση περιεχομένου προγράμματος από τον ιστό.

Οι αγκύλες έχουν καλή υποστήριξη για JavaScript, CSS, HTML και Node.js. Έχει επίσης ωραίες δυνατότητες, όπως η ενσωματωμένη επεξεργασία CSS που σχετίζεται με ένα αναγνωριστικό HTML (Γρήγορη επεξεργασία). Επιπλέον, το Brackets διαθέτει μια καθαρή διεπαφή χρήστη και μια ζωντανή προεπισκόπηση για ιστοσελίδες που επεξεργάζεστε. Είναι μια πολύ καλή επιλογή για έναν δωρεάν επεξεργαστή κώδικα.

Η αυτόματη συμπλήρωση JavaScript σε αγκύλες είναι πολύ καλή, με αυτόματο κλείσιμο παρενθέσεων, αγκύλες γωνίας και αγκύλες, καθώς και αυτόματα αναπτυσσόμενα μενού για λέξεις-κλειδιά, μεταβλητές και μεθόδους, συμπεριλαμβανομένων των μεθόδων jQuery μετά την πληκτρολόγηση $. Οι αγκύλες μπορούν να ελέγξουν το πρόγραμμα εντοπισμού σφαλμάτων Node.js και να επανεκκινήσουν τον κόμβο από ένα στοιχείο μενού. Είναι εύκολο να προσθέσετε επεκτάσεις για πρόσθετες λειτουργίες, όπως υποστήριξη TypeScript και JSX, ενσωμάτωση Bower και ενσωμάτωση Git.

Η Γρήγορη Επεξεργασία, τα Γρήγορα Έγγραφα, το Γρήγορο Άνοιγμα και η Ζωντανή Προεπισκόπηση συμβάλλουν στη βελτιστοποίηση της επεξεργασίας εφαρμογών ιστού και σας επιτρέπουν να εστιάζετε σε αυτό που κωδικοποιείτε ή σχεδιάζετε. Στο κάτω μέρος, ορισμένες επεκτάσεις αγκυλών μπορεί να είναι δύσκολο να διαμορφωθούν, αλλά όχι τόσο περίπλοκες όσο τα πακέτα Emacs ή τα πρόσθετα Vim.

Κόστος: Δωρεάν ανοιχτού κώδικα. Πλατφόρμες: Windows, MacOS, Linux.

Ατομο

Το Atom είναι ένας δωρεάν, ανοιχτής πηγής, επεξεργαστής προγραμματισμού με δυνατότητα εισβολής από το GitHub για Windows, MacOS και Linux που ενσωματώνεται στην εφαρμογή GitHub και διαθέτει χιλιάδες πακέτα και θέματα. Παίρνω με μερικά πακέτα κοινότητας, καθώς και τα βασικά πακέτα και θέματα.

Δεν προκαλεί έκπληξη, δεδομένης της προέλευσής του, η πηγή Atom φιλοξενείται στο GitHub. Είναι γραμμένο σε CoffeeScript και ενσωματώνεται στο Node.js. Το Atom είναι μια εξειδικευμένη παραλλαγή του Chromium που έχει σχεδιαστεί για να είναι πρόγραμμα επεξεργασίας κειμένου και όχι ως πρόγραμμα περιήγησης ιστού. κάθε παράθυρο Atom είναι ουσιαστικά μια τοπική ιστοσελίδα. Η ομάδα Atom αναπτύσσει το Atom στο Atom.

Η απόδοση του Atom είναι αρκετά καλή όταν δεν ενημερώνεται. Διατίθεται πλήρως έξω από το κουτί, με ένα ασαφές εύρημα, γρήγορη αναζήτηση και αντικατάσταση σε όλο το χρόνο, πολλούς δρομείς και επιλογές, πολλαπλά παράθυρα, αποσπάσματα, αναδίπλωση κώδικα και δυνατότητα εισαγωγής γραμματικών και θεμάτων TextMate. Το Atom μπορεί να εγκαταστήσει δύο βοηθητικά προγράμματα γραμμής εντολών: το Atom για να ξεκινήσει το πρόγραμμα επεξεργασίας από ένα κέλυφος και το APM για τη διαχείριση των πακέτων του Atom, στο πνεύμα του NPM για το Node.js. Βρίσκομαι πολύ χρησιμοποιώντας το Atom κατά την περιήγηση σε αποθετήρια που κλωνοποίησα από το GitHub, επειδή η εφαρμογή GitHub περιλαμβάνει ένα στοιχείο μενού περιβάλλοντος για να το κάνω αυτό.

Κόστος: Δωρεάν ανοιχτού κώδικα. Πλατφόρμες: Windows, MacOS, Linux.

Επεξεργασία Komodo

Το Komodo Edit, η δωρεάν έκδοση μειωμένης λειτουργικότητας του ActiveState του Komodo IDE, είναι ένας πολύ καλός πολυγλωσσικός επεξεργαστής. Όλα όσα έπρεπε να πω για το Komodo IDE ως συντάκτης (βλ. «Κριτική: Τα 6 καλύτερα JavaScript IDE») ισχύουν για το Komodo Edit.