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

Ανασκόπηση: Τα 6 καλύτερα IDE JavaScript

Το JavaScript χρησιμοποιείται για πολλά διαφορετικά είδη εφαρμογών σήμερα. Τις περισσότερες φορές, το JavaScript λειτουργεί με HTML5 και CSS για τη δημιουργία διεπαφών ιστού. Αλλά το JavaScript βοηθά επίσης στην κατασκευή εφαρμογών για κινητά και έχει βρει μια σημαντική θέση στο πίσω μέρος με τη μορφή διακομιστών Node.js. Ευτυχώς, τα εργαλεία ανάπτυξης JavaScript - τόσο οι συντάκτες όσο και τα IDE - ανεβαίνουν για να αντιμετωπίσουν τις νέες προκλήσεις.

Γιατί να χρησιμοποιήσετε ένα IDE αντί για ένα πρόγραμμα επεξεργασίας; Ο κύριος λόγος είναι ότι ένα IDE μπορεί να κάνει εντοπισμό σφαλμάτων και μερικές φορές να σχεδιάζει τον κωδικό σας. Τα IDE έχουν επίσης υποστήριξη για συστήματα ALM, που ενσωματώνονται με τα Git, GitHub, Mercurial, Subversion και Perforce για έλεγχο έκδοσης. Αλλά καθώς περισσότεροι συντάκτες προσθέτουν άγκιστρα σε αυτά τα συστήματα, η υποστήριξη ALM γίνεται λιγότερο διαφοροποιητής.

Eclipse 2018 με εργαλεία ανάπτυξης JavaScript

Πίσω στις αρχαίες μέρες, όταν το Java Swing ήταν νέο και συναρπαστικό, μου άρεσε να χρησιμοποιώ το Eclipse για ανάπτυξη Java, αλλά σύντομα μετακόμισα σε άλλα IDE Java. Πριν από πέντε χρόνια πριν, όταν έκανα κάποια ανάπτυξη Android με το Eclipse, βρήκα την εμπειρία εντάξει, αλλά περίεργη. Όταν προσπάθησα να χρησιμοποιήσω το Eclipse Luna με JSDT για ανάπτυξη JavaScript το 2014, εμφανίζει διαρκώς ψευδώς θετικά σφάλματα για έγκυρο κώδικα που πέρασε το JSHint.

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

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

Ευτυχώς, αρκετοί προμηθευτές και έργα ανοιχτού κώδικα έχουν φτάσει στο πιάτο από τότε. Το Eclipse 2018 με JavaScript Development Tools διαθέτει έναν αξιοπρεπή επεξεργαστή JavaScript και έναν εντοπισμό σφαλμάτων που βασίζεται στο Chrome, αλλά δεν γνωρίζει για το TypeScript, το οποίο χρησιμοποιείται από το Angular ή για τα αρχεία ES6 και JSX, τα οποία χρησιμοποιούνται από το React.

Το Eclipse είχε πάντα μια τεράστια αγορά προσθηκών. Για TypeScript, εξετάστε το δωρεάν πρόσθετο TypeScript 1.0.0. Για Angular, TypeScript και ES6, εξετάστε το εμπορικό Angular IDE (από CodeMix, πρώην Webclipse) και για έργα React με αρχεία JSX δοκιμάστε το TypeScript IDE ανοιχτού κώδικα. Εάν προσθέσετε περισσότερα από ένα, θα πρέπει να επιλύσετε τη διαφωνία τους σχετικά με το ποιος πρέπει να επεξεργαστεί αρχεία TypeScript, αλλά αυτό δεν είναι μεγάλη υπόθεση.

Τα εργαλεία CodeMix χρεώνονται με την προσθήκη έξυπνων κώδικα του Visual Studio στο Eclipse. Σε αντίθεση με τις περισσότερες προσθήκες Eclipse, το Angular IDE by CodeMix δεν είναι δωρεάν, αλλά διαθέτει δωρεάν δοκιμή 45 ημερών. Δεδομένου ότι ο Visual Studio Code είναι δωρεάν, θα το θεωρούσα πριν πληρώσω το Angular IDE.

Κόστος: Δωρεάν Γωνιακό IDE από CodeMix, 29 $ (Προσωπικά) ή 48 $ (Εμπορικό) ανά έτος. Πλατφόρμα: Windows, MacOS και Linux.

ActiveState Komodo IDE

Είμαι χρήστης και θαυμαστής του Komodo IDE από την πρώτη του παρουσίαση το 2001. Αν και τα νεότερα προϊόντα όπως το Visual Studio Code και το WebStorm το έχουν ξεπεράσει σε ορισμένες περιοχές, εξακολουθεί να είναι καλός συντάκτης και IDE.

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

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

Το Komodo διαθέτει λειτουργική μονάδα αναδιαμόρφωσης κώδικα για όλες τις γλώσσες για τις οποίες παρέχει ευφυΐα κώδικα: PHP, Perl, Python, Ruby, Tcl, JavaScript και Node.js. Δυστυχώς, ο «λιγότερο κοινός παρονομαστής» αυτής της προσέγγισης περιορίζει τις δυνατότητες μετονομασίας μεταβλητών και μελών της τάξης και εξαγωγής κώδικα σε μια μέθοδο. Ωστόσο, αυτές είναι μερικές από τις πιο χρήσιμες περιπτώσεις.

Το Komodo IDE διαθέτει επεξεργασία στήλης και πολλαπλές επιλογές. Αυτό παρέχει σχεδόν ισοδυναμία με το Sublime Text και το TextMate όσον αφορά τις μαζικές τροποποιήσεις. Όσο κάνουμε τη σύγκριση, το Komodo είναι περισσότερο IDE, ενώ το Sublime Text είναι πολύ πιο γρήγορο. Και όσο συζητάμε για την απόδοση, η ταχύτητα του Komodo έχει βελτιωθεί αισθητά σε σύγκριση με παλαιότερες εκδόσεις, στο σχέδιο οθόνης, στην αναζήτηση και στον έλεγχο σύνταξης.

Το Komodo IDE έχει πολλά χαρακτηριστικά που δεν διαθέτουν τα περισσότερα ανταγωνιστικά προϊόντα. Το ένα είναι το HTTP Inspector, το οποίο είναι εξαιρετικό για τον εντοπισμό σφαλμάτων επιστροφών Ajax. Ένα άλλο είναι το κιτ εργαλείων Rx (κανονική έκφραση ή regex), το οποίο είναι ένας πολύ καλός τρόπος για να δημιουργήσετε και να δοκιμάσετε κανονικές εκφράσεις για JavaScript, Perl, PHP, Python και Ruby.

Η συνεργασία είναι ένας άλλος διαφοροποιητής του Komodo IDE - σκεφτείτε το ως Έγγραφα Google για κώδικα. Μπορείτε να δημιουργήσετε περιόδους σύνδεσης για ομάδες αρχείων, να προσθέσετε επαφές σε συνεδρίες ως συνεργάτες και, στη συνέχεια, να εργαστείτε μαζί στα ίδια αρχεία ταυτόχρονα, με συγχρονισμό σχεδόν σε πραγματικό χρόνο.

Η συνεργασία δεν αντικαθιστά τον έλεγχο του πηγαίου κώδικα, αλλά είναι ένα χρήσιμο συμπλήρωμα. Το Komodo IDE ενσωματώνει τον έλεγχο πηγαίου κώδικα χρησιμοποιώντας CVS, Subversion, Perforce, Git, Mercurial και Bazaar. Υποστηρίζονται μόνο οι βασικές λειτουργίες ελέγχου έκδοσης. Οι προηγμένες λειτουργίες, όπως η διακλάδωση, πρέπει να γίνουν χρησιμοποιώντας έναν ξεχωριστό πελάτη ελέγχου πηγαίου κώδικα.

Παρόλο που το Komodo δεν διαθέτει το δικό του μορφοποιητή εγγράφων JavaScript, εκμεταλλεύεται τον καλύτερο δωρεάν ανοιχτό κώδικα για αυτόν τον σκοπό. Εκτός του πλαισίου, ο προεπιλεγμένος μορφοποιητής για αρχεία JavaScript είναι το JS Beautifier, αλλά άλλες εννέα επιλογές είναι διαθέσιμες μέσω ενός αναπτυσσόμενου μενού.

Το Komodo IDE υποστηρίζει τον εντοπισμό σφαλμάτων JavaScript από την πλευρά του πελάτη στο Chrome και μπορεί να εντοπίσει σφάλματα Node.js τόσο τοπικά όσο και απομακρυσμένα. Επίσης, εντοπίζει σφάλματα Perl, Python, PHP, Ruby, Tcl και XSLT.

Το Komodo IDE διαθέτει πρόγραμμα προβολής DOM που σας επιτρέπει να προβάλετε έγγραφα XML και HTML ως πτυσσόμενα δέντρα. Σας επιτρέπει επίσης να κάνετε αναζητήσεις XPath για να φιλτράρετε το δέντρο.

Οι λειτουργικές μονάδες δημιουργίας προφίλ και δοκιμών μονάδων του Komodo δεν υποστηρίζουν JavaScript. Ωστόσο, το JavaScript και το Node.js υποστηρίζονται από την ενότητα Code Intelligence της Komodo, η οποία εφαρμόζει την περιήγηση κώδικα, την αυτόματη συμπλήρωση και τις επεξηγήσεις κλήσεων.

Το Komodo IDE μπορεί να δημοσιεύσει ομάδες αρχείων μέσω FTP, SFTP, FTPS ή SCP. Το Komodo μπορεί επίσης να συγχρονίσει αρχεία και να εντοπίσει πιθανές διενέξεις δημοσίευσης που θα μπορούσαν να σας κάνουν να αντικαταστήσετε τις αλλαγές άλλων ατόμων.

Συνολικά, το Komodo είναι ένα καλό αλλά όχι μεγάλο JavaScript IDE και ένας καλός αλλά όχι εξαιρετικός επεξεργαστής JavaScript. Ωστόσο, μπορεί να εξυπηρετήσει τις ανάγκες σας, ειδικά εάν εργάζεστε και με Perl, Python, PHP, Ruby, Tcl ή XSLT.

Κόστος: 295 $, συν 87 $ ετησίως για αναβαθμίσεις και υποστήριξη. Πλατφόρμα: Windows (7 ή υψηλότερη), MacOS (10,9 ή υψηλότερη), Linux.

Apache NetBeans

Το NetBeans έχει πολύ καλή υποστήριξη για JavaScript, HTML5 και CSS3 σε έργα ιστού και υποστηρίζει το πλαίσιο Cordova / PhoneGap για τη δημιουργία εφαρμογών για κινητές συσκευές που βασίζονται σε JavaScript. Το NetBeans δεν είναι το ταχύτερο IDE στο μπλοκ, αλλά είναι ένα από τα πιο ολοκληρωμένα. Και, φυσικά, η τιμή είναι σωστή: Το NetBeans διατίθεται δωρεάν με άδεια ανοιχτού κώδικα.

Το πρόγραμμα επεξεργασίας JavaScript του NetBeans παρέχει επισήμανση σύνταξης, αυτόματη συμπλήρωση και αναδίπλωση κώδικα, σχεδόν όπως θα περίμενε κανείς. Οι λειτουργίες επεξεργασίας JavaScript λειτουργούν επίσης για κώδικα JavaScript ενσωματωμένο σε αρχεία PHP, JSP και HTML. Η υποστήριξη jQuery ενσωματώνεται στον επεξεργαστή. Το NetBeans 8.2 έχει νέα ή βελτιωμένη υποστήριξη για Node.js και Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha και Selenium.

Η ανάλυση κώδικα εκτελείται στο παρασκήνιο καθώς επεξεργάζεστε, παρέχοντας προειδοποιήσεις και υποδείξεις. Ο εντοπισμός σφαλμάτων λειτουργεί στο ενσωματωμένο πρόγραμμα περιήγησης WebKit και στο Chrome με εγκατεστημένο το NetBeans Connector. Το πρόγραμμα εντοπισμού σφαλμάτων μπορεί να ορίσει σημεία διακοπής DOM, γραμμής, συμβάντος και XMLHttpRequest και θα εμφανίζει μεταβλητές, ρολόγια και στοίβα κλήσεων. Ένα ενσωματωμένο παράθυρο καταγραφής προγράμματος περιήγησης εμφανίζει εξαιρέσεις, σφάλματα και προειδοποιήσεις του προγράμματος περιήγησης.

Το NetBeans μπορεί να διαμορφώσει και να εκτελέσει δοκιμές μονάδας με το JsTestDriver, ένα αρχείο JAR (αρχείο Java) που μπορείτε να κατεβάσετε δωρεάν. Ο εντοπισμός σφαλμάτων των δοκιμών μονάδας ενεργοποιείται αυτόματα εάν καθορίσετε το Chrome με το NetBeans Connector ως ένα από τα προγράμματα περιήγησης JsTestDriver όταν ρυθμίζετε το JsTestDriver στο παράθυρο Υπηρεσίες.

Όταν κάνετε εντοπισμό σφαλμάτων σε μια εφαρμογή ιστού στο Chrome με το NetBeans Connector και επεξεργάζεστε CSS από το Chrome Developer Tools, οι αλλαγές θα καταγράφονται από το NetBeans και θα αποθηκεύονται στα αρχεία CSS. Ωστόσο, εάν τα αρχεία CSS δημιουργήθηκαν από φύλλα στυλ Less ή Sass, θα πρέπει να ενημερώσετε με μη αυτόματο τρόπο το φύλλο προέλευσης, επειδή τα αρχεία CSS είναι απλώς μεταγλωττισμένα αποτελέσματα.

Στο ενσωματωμένο πρόγραμμα περιήγησης WebKit και στο Chrome με εγκατεστημένο το NetBeans Connector, μπορείτε να χρησιμοποιήσετε την οθόνη δικτύου NetBeans για να δείτε κεφαλίδες αιτήσεων, απαντήσεις και στοίβες κλήσεων για επικοινωνίες REST. Για επικοινωνίες WebSocket, εμφανίζονται και οι κεφαλίδες και τα πλαίσια κειμένου. Συνολικά, το NetBeans παρέχει μια ελαφρώς καλύτερη εμπειρία εντοπισμού σφαλμάτων με το Chrome από ό, τι έχετε στο Firefox με το Firebug.

Το NetBeans ενσωματώνει τον έλεγχο πηγαίου κώδικα με Git, Subversion, Mercurial και CVS. Η υποστήριξη Git αυξάνεται από ένα γραφικό Diff viewer και από ένα σύστημα ραφιών στο IDE. Το NetBeans χρωματίζει τους κωδικούς της κατάστασης Git των αρχείων, σας επιτρέπει να βλέπετε το ιστορικό αναθεωρήσεων για κάθε αρχείο και σας δείχνει πληροφορίες αναθεώρησης και συγγραφέα για κάθε γραμμή αρχείων ελεγχόμενης έκδοσης. Το NetBeans έχει παρόμοιες ενσωματώσεις με Subversion, Mercurial και CVS, αλλά δοκίμασα μόνο το Git.

Το NetBeans ενσωματώνει την παρακολούθηση ζητημάτων με τους Jira και Bugzilla. Στο παράθυρο εργασιών NetBeans, μπορείτε να αναζητήσετε εργασίες, να αποθηκεύσετε αναζητήσεις, να ενημερώσετε εργασίες και να επιλύσετε εργασίες στο καταχωρημένο αποθετήριο εργασιών. Το NetBeans διαθέτει επίσης ενοποίηση διακομιστή ομάδας για ιστότοπους που χρησιμοποιούν την υποδομή Kenai.

Από όσο μπορώ να προσδιορίσω, το NetBeans δεν διαθέτει προφίλ JavaScript, παρόλο που μπορεί να σχεδιάσει εφαρμογές Java και λειτουργικές μονάδες EJB. Και ενώ το NetBeans μπορεί να κάνει refactor Java και PHP, δεν μπορεί να κάνει refactor JavaScript.

Συνολικά, το NetBeans είναι ένας αξιοπρεπής υποψήφιος για ανάπτυξη JavaScript, HTML5 και CSS3 από την πλευρά του πελάτη, ειδικά εάν κάνετε επίσης ανάπτυξη Java, PHP ή C ++ στον διακομιστή. Εάν δεν έχετε τον προϋπολογισμό για το WebStorm και δεν σας αρέσει η Microsoft, θα διαπιστώσετε ότι η NetBeans κάνει τη δουλειά, αρκεί να μην βιάζεστε.

Κόστος: Δωρεάν. Πλατφόρμα: Windows, Solaris, MacOS, Linux.

Microsoft Visual Studio 2017

Στην πλήρη κριτική μου για το Visual Studio 2017 συζήτησα το προϊόν στο σύνολό του, με λίγες μόνο αναφορές στη JavaScript. Θα αντιστρέψω την έμφαση εδώ.

Συνολικά, το Visual Studio 2017 εξυπηρετεί πολύ καλά ως JavaScript IDE, αν και είναι καλύτερο. Net IDE και δεν είναι τόσο καλό όσο το WebStorm για JavaScript. Ενώ εξυπηρετεί επίσης πολύ καλά ως πρόγραμμα επεξεργασίας JavaScript, είναι ένας καλύτερος επεξεργαστής C # και δεν είναι τόσο καλός ή τόσο γρήγορος όσο το Sublime Text για JavaScript.

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

Μπορείτε εύκολα να εισαγάγετε αποσπάσματα και να περιβάλλετε την επιλογή σας με τον κατάλληλο κώδικα, όπως κωδικοποίηση HTML ή URL των μεταβλητών συμβολοσειρών. Εκτός από τα JavaScript, HTML και CSS, μπορείτε να επεξεργαστείτε αρχεία Markdown και να δείτε το Markdown που αποδίδεται και μπορείτε να εργαστείτε με TypeScript.

Επιπλέον, μπορείτε φυσικά να κωδικοποιήσετε σε οποιαδήποτε γλώσσα .Net, σε C ++ και σε Python. Και όπως συνέβη για το Visual Studio για μεγάλο χρονικό διάστημα, μπορείτε να εργαστείτε με βάσεις δεδομένων απευθείας από το IDE. Το Visual Studio είναι ιδιαίτερα ισχυρό όταν εργάζεστε με βάσεις δεδομένων SQL Server. Μπορείτε να ξεφύγετε χρησιμοποιώντας το Visual Studio αντί για το SQL Server Management Studio για την πλειονότητα των λειτουργιών βάσης δεδομένων που θέλετε να κάνετε ως προγραμματιστής.

Το Visual Studio 2017 υποστηρίζει τον εντοπισμό σφαλμάτων σε σχεδόν οποιοδήποτε πρόγραμμα περιήγησης που θέλετε να το ρίξετε, συμπεριλαμβανομένων προγραμμάτων περιήγησης σε κινητές συσκευές και εξομοιωτές. Διαθέτει επίσης δύο προγράμματα περιήγησης: το απλό εσωτερικό πρόγραμμα περιήγησης ιστού, το οποίο είναι (έκπληξη!) Μια έκδοση του Internet Explorer και το Page Inspector, το οποίο σας δείχνει τη σελίδα που αποδίδεται μαζί με όλες τις πηγές και τα στυλ. Παρόλο που ο Επιθεωρητής σελίδας κάνει πολλά δυνητικά χρονοβόρα, αντίστροφης μηχανικής πράγματα για να ρυθμιστεί για μια σελίδα, αφού είστε σε αυτήν, μπορείτε να μείνετε εκεί χωρίς να χρειάζεται να κάνετε ζογκλίσματα στο Visual Studio, το πρόγραμμα περιήγησης και τα εργαλεία προγραμματιστή του προγράμματος περιήγησης .

Η απόδοση του Visual Studio 2017 είναι συνήθως πολύ καλή αν του δώσετε αρκετή μνήμη και ισχύ CPU, αλλά τείνει να απαιτεί σημαντικούς πόρους. Το Visual Studio 2017 διαθέτει εξαιρετική διάγνωση απόδοσης για εφαρμογές, αλλά σε γενικές γραμμές δεν είναι τόσο χρήσιμα για τον συνηθισμένο κώδικα JavaScript, ο οποίος συνήθως εκτελείται βαθιά μέσα σε ένα πρόγραμμα περιήγησης. Το Visual Studio έχει συγκεκριμένο χρονισμό λειτουργίας JavaScript, αποκρίσεις UI HTML και εργαλεία μνήμης JavaScript, αλλά ισχύουν μόνο για έργα Universal Windows Platform που βασίζονται σε JavaScript και όχι σε έργα web που τυχαίνει να χρησιμοποιούν JavaScript.

Το Visual Studio 2017 περιλαμβάνει εξαιρετική επεξεργασία εφαρμογών Node.js, IntelliSense, προφίλ, ενοποίηση NPM, υποστήριξη TypeScript, εντοπισμό σφαλμάτων τοπικά και απομακρυσμένα (Windows, MacOS, Linux) και εντοπισμός σφαλμάτων σε εφαρμογές Azure Web και υπηρεσίες Azure Cloud. Έχει επίσης υποστήριξη για CSS, HTML, JavaScript, TypeScript, CoffeeScript και λιγότερα. Αυτό περιλαμβάνει την εκτέλεση του JSHint καθώς πληκτρολογείτε, επιτρέποντάς σας να ελαχιστοποιήσετε αρχεία JavaScript από ένα μενού περιβάλλοντος και να συντάξετε αυτόματα αρχεία CoffeeScript κατά την αποθήκευση, δείχνοντας μια παράλληλη προεπισκόπηση του παραγόμενου JavaScript.