Critique: Les 6 meilleurs IDE JavaScript

JavaScript est utilisé pour de nombreux types d'applications aujourd'hui. Le plus souvent, JavaScript fonctionne avec HTML5 et CSS pour créer des frontaux Web. Mais JavaScript permet également de créer des applications mobiles, et il a trouvé une place importante sur le back-end sous la forme de serveurs Node.js. Heureusement, les outils de développement JavaScript - éditeurs et IDE - se développent pour relever les nouveaux défis.

Pourquoi utiliser un IDE au lieu d'un éditeur? La raison principale est qu'un IDE peut déboguer et parfois profiler votre code. Les IDE prennent également en charge les systèmes ALM, s'intégrant à Git, GitHub, Mercurial, Subversion et Perforce pour le contrôle de version. Mais à mesure que de plus en plus d'éditeurs ajoutent des hooks à ces systèmes, la prise en charge d'ALM devient de moins en moins un facteur de différenciation.

Eclipse 2018 avec les outils de développement JavaScript

Dans les temps anciens, lorsque Java Swing était nouveau et passionnant, j'aimais utiliser Eclipse pour le développement Java, mais je suis rapidement passé à d'autres IDE Java. Il y a plus de cinq ans, lorsque j'ai fait du développement Android avec Eclipse, j'ai trouvé l'expérience correcte, mais poky. Lorsque j'ai essayé d'utiliser Eclipse Luna avec JSDT pour le développement JavaScript en 2014, il affichait constamment des erreurs faussement positives pour le code valide qui passait JSHint.

Vidéo connexe: Qu'est-ce que JavaScript? Le créateur Brendan Eich explique

Brendan Eich, créateur du langage de programmation JavaScript, explique comment le langage est utilisé et pourquoi il est toujours un favori parmi les programmeurs pour sa facilité d'utilisation.

Heureusement, plusieurs fournisseurs et projets open source se sont mobilisés depuis. Eclipse 2018 avec JavaScript Development Tools possède un éditeur JavaScript décent et un débogueur basé sur Chrome, mais il ne connaît pas TypeScript, qui est utilisé par Angular, ou les fichiers ES6 et JSX, qui sont utilisés par React.

Eclipse a toujours bénéficié d'un énorme marché de plugins. Pour TypeScript, considérez le plugin gratuit TypeScript 1.0.0. Pour Angular, TypeScript et ES6, considérez l'IDE Angular commercial (par CodeMix, anciennement Webclipse), et pour les projets React avec des fichiers JSX, essayez l'IDE TypeScript open source. Si vous en ajoutez plusieurs, vous devrez résoudre leur différend quant à savoir lequel modifier les fichiers TypeScript, mais ce n'est pas un gros problème.

Les outils CodeMix sont facturés comme l'ajout de l'intelligence de Visual Studio Code à Eclipse. Contrairement à la plupart des plugins Eclipse, Angular IDE de CodeMix n'est pas gratuit, mais il dispose d'un essai gratuit de 45 jours. Étant donné que Visual Studio Code est gratuit, je considérerais cela avant de payer pour Angular IDE.

Sans coût; Angular IDE par CodeMix, 29 $ (personnel) ou 48 $ (commercial) par an. Plate-forme: Windows, MacOS et Linux.

IDE ActiveState Komodo

Je suis un utilisateur et un fan de Komodo IDE depuis son introduction en 2001. Bien que des produits plus récents tels que Visual Studio Code et WebStorm l'aient surpassé dans certains domaines, c'est toujours un bon éditeur et IDE.

Komodo IDE fournit l'édition avancée de JavaScript, la coloration syntaxique, la navigation et le débogage, mais il n'inclut pas la vérification du code JavaScript. Pour cela, vous pouvez toujours exécuter JSHint dans un shell.

Komodo prend en charge des dizaines de langages de programmation et de balisage. Avec sa large gamme de supports de programmation et de langage de balisage, y compris la refactorisation, le débogage et le profilage, Komodo IDE est un très bon choix pour le développement de bout en bout dans les langages open source.

Komodo dispose d'un module de refactoring de code pour tous les langages pour lesquels il fournit l'intelligence de code: PHP, Perl, Python, Ruby, Tcl, JavaScript et Node.js. Malheureusement, la nature du «plus petit dénominateur commun» de cette approche limite les capacités à renommer les variables et les membres de classe, et à extraire du code dans une méthode. Néanmoins, ce sont quelques-uns des cas les plus utiles.

Komodo IDE a à la fois l'édition de colonnes et plusieurs sélections. Cela fournit une quasi-parité avec Sublime Text et TextMate en ce qui concerne les modifications en masse. Tant que nous faisons la comparaison, Komodo est plus un IDE, tandis que Sublime Text est beaucoup plus rapide. Et tant que nous discutons des performances, la vitesse de Komodo s'est sensiblement améliorée par rapport aux anciennes versions, en matière de dessin d'écran, de recherche et de vérification de la syntaxe.

Komodo IDE a plusieurs fonctionnalités qui manquent à la plupart des produits concurrents. L'un est son inspecteur HTTP, qui est excellent pour le débogage des rappels Ajax. Un autre est sa boîte à outils Rx (expression régulière ou regex), qui est un excellent moyen de créer et de tester des expressions régulières pour JavaScript, Perl, PHP, Python et Ruby.

La collaboration est un autre différenciateur de l'IDE Komodo - pensez-y comme Google Docs pour le code. Vous pouvez créer des sessions pour des groupes de fichiers, ajouter des contacts à des sessions en tant que collaborateurs, puis travailler ensemble sur les mêmes fichiers en même temps, avec une synchronisation en temps quasi réel.

La collaboration ne remplace pas le contrôle du code source, mais c'est un complément utile. Komodo IDE intègre le contrôle du code source à l'aide de CVS, Subversion, Perforce, Git, Mercurial et Bazaar. Seules les opérations de contrôle de version de base sont prises en charge. Les opérations avancées, telles que le branchement, doivent être effectuées à l'aide d'un client de contrôle de code source distinct.

Bien que Komodo ne dispose pas de son propre formateur de documents JavaScript, il profite du meilleur logiciel open source gratuit à cet effet. Prêt à l'emploi, le formateur par défaut pour les fichiers JavaScript est JS Beautifier, mais neuf autres options sont disponibles via un menu déroulant.

Komodo IDE prend en charge le débogage de JavaScript côté client dans Chrome et peut déboguer Node.js à la fois localement et à distance. Il débogue également Perl, Python, PHP, Ruby, Tcl et XSLT.

Komodo IDE dispose d'un visualiseur DOM qui vous permet d'afficher des documents XML et HTML sous forme d'arbres réductibles. Il vous permet également d'effectuer des recherches XPath pour filtrer l'arborescence.

Les modules de profilage de code et de test unitaire de Komodo ne prennent pas en charge JavaScript. Cependant, JavaScript et Node.js sont tous deux pris en charge par le module Code Intelligence de Komodo, qui implémente l'exploration de code, la saisie semi-automatique et les info-bulles.

Komodo IDE peut publier des groupes de fichiers via FTP, SFTP, FTPS ou SCP. Komodo peut également synchroniser les fichiers et détecter les conflits de publication potentiels qui pourraient vous amener à écraser les modifications d'autres personnes.

Dans l'ensemble, Komodo est un bon mais pas grand IDE JavaScript, et un bon éditeur JavaScript mais pas génial. Cependant, cela peut bien répondre à vos besoins, surtout si vous travaillez également avec Perl, Python, PHP, Ruby, Tcl ou XSLT.

Coût: 295 $, plus 87 $ par an pour les mises à niveau et l'assistance. Plate-forme: Windows (7 ou supérieur), MacOS (10.9 ou supérieur), Linux.

Apache NetBeans

NetBeans a un très bon support pour JavaScript, HTML5 et CSS3 dans les projets Web, et il prend en charge le framework Cordova / PhoneGap pour créer des applications mobiles basées sur JavaScript. NetBeans n'est pas l'EDI le plus rapide du bloc, mais c'est l'un des plus complets. Et, bien sûr, le prix est juste: NetBeans est disponible gratuitement sous une licence open source.

L'éditeur JavaScript NetBeans fournit la coloration syntaxique, l'auto-complétion et le pliage de code, à peu près comme vous vous y attendez. Les fonctionnalités d'édition JavaScript fonctionnent également pour le code JavaScript intégré dans les fichiers PHP, JSP et HTML. Le support jQuery est intégré à l'éditeur. NetBeans 8.2 a un support nouveau ou amélioré pour Node.js et Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha et Selenium.

L'analyse du code s'exécute en arrière-plan lorsque vous modifiez, fournissant des avertissements et des conseils. Le débogage fonctionne dans le navigateur WebKit intégré et dans Chrome avec le connecteur NetBeans installé. Le débogueur peut définir des points d'arrêt DOM, ligne, événement et XMLHttpRequest, et il affichera les variables, les montres et la pile d'appels. Une fenêtre de journal de navigateur intégrée affiche les exceptions, erreurs et avertissements du navigateur.

NetBeans peut configurer et effectuer des tests unitaires avec JsTestDriver, un fichier JAR (archive Java) que vous pouvez télécharger gratuitement. Le débogage des tests unitaires est automatiquement activé si vous spécifiez Chrome avec NetBeans Connector comme l'un des navigateurs JsTestDriver lorsque vous configurez JsTestDriver dans la fenêtre Services.

Lorsque vous déboguez une application Web dans Chrome avec le connecteur NetBeans et que vous modifiez le CSS à partir des outils de développement Chrome, les modifications seront capturées par NetBeans et enregistrées dans les fichiers CSS. Cependant, si vos fichiers CSS ont été générés à partir de feuilles de style Less ou Sass, vous devrez mettre à jour manuellement la feuille source car les fichiers CSS sont simplement une sortie compilée.

Dans le navigateur WebKit intégré et dans Chrome avec le connecteur NetBeans installé, vous pouvez utiliser le moniteur réseau NetBeans pour afficher les en-têtes de demande, les réponses et les piles d'appels pour les communications REST. Pour les communications WebSocket, les en-têtes et les blocs de texte sont affichés. Dans l'ensemble, NetBeans offre une expérience de débogage légèrement meilleure avec Chrome que dans Firefox avec Firebug.

NetBeans intègre le contrôle du code source avec Git, Subversion, Mercurial et CVS. La prise en charge de Git est augmentée par une visionneuse graphique de Diff et par un système de rayonnage dans l'EDI. NetBeans code en couleur le statut Git des fichiers, vous permet d'afficher l'historique des révisions pour chaque fichier et vous montre les informations de révision et d'auteur pour chaque ligne de fichiers contrôlés par version. NetBeans a des intégrations similaires avec Subversion, Mercurial et CVS, mais je n'ai testé que Git.

NetBeans intègre le suivi des problèmes avec Jira et Bugzilla. Dans la fenêtre des tâches NetBeans, vous pouvez rechercher des tâches, enregistrer des recherches, mettre à jour des tâches et résoudre des tâches dans votre référentiel de tâches enregistré. NetBeans a également une intégration de serveur d'équipe pour les sites qui utilisent l'infrastructure Kenai.

Pour autant que je sache, NetBeans ne dispose d'aucun profilage JavaScript, bien qu'il puisse profiler des applications Java et des modules EJB. Et bien que NetBeans puisse refactoriser Java et PHP, il ne peut pas refactoriser JavaScript.

Dans l'ensemble, NetBeans est un candidat décent pour le développement JavaScript, HTML5 et CSS3 côté client, surtout si vous effectuez également du développement Java, PHP ou C ++ sur le serveur. Si vous n'avez pas le budget pour WebStorm et n'aimez pas Microsoft, vous constaterez que NetBeans fait le travail, tant que vous n'êtes pas très pressé.

Sans coût. Plateforme: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

Dans mon examen complet de Visual Studio 2017, j'ai discuté du produit dans son ensemble, avec seulement quelques références à JavaScript. Je vais inverser l'accent ici.

Dans l'ensemble, Visual Studio 2017 sert très bien d'EDI JavaScript, bien qu'il s'agisse d'un meilleur IDE .Net et qu'il n'est pas aussi bon que WebStorm pour JavaScript. Bien qu'il serve également très bien d'éditeur JavaScript, c'est un meilleur éditeur C #, et ce n'est pas aussi bon ou aussi rapide que Sublime Text pour JavaScript.

Comme vous pouvez le voir dans la capture d'écran ci-dessous, Visual Studio 2017 fait du bon travail avec la coloration de la syntaxe JavaScript et le pliage de code. Il fait également un bon travail avec la navigation dans le code JavaScript: cliquez avec le bouton droit sur une fonction ou un nom de membre, et vous pouvez facilement accéder à la définition ou trouver toutes les références. Lorsque vous avez terminé de regarder la définition, vous pouvez appuyer sur la flèche de retour en haut de l'interface pour revenir là où vous étiez.

Vous pouvez facilement insérer des extraits et entourer votre sélection d'un code approprié, tel que le codage HTML ou URL de variables de chaîne. Outre JavaScript, HTML et CSS, vous pouvez modifier les fichiers Markdown et voir le Markdown rendu, et vous pouvez travailler avec TypeScript.

De plus, vous pouvez bien sûr coder dans n'importe quel langage .Net, en C ++ et en Python. Et comme cela a été le cas pour Visual Studio depuis longtemps, vous pouvez travailler avec des bases de données directement depuis l'EDI. Visual Studio est particulièrement puissant lorsque vous travaillez avec des bases de données SQL Server. Vous pouvez vous en sortir en utilisant Visual Studio au lieu de SQL Server Management Studio pour la majorité des opérations de base de données que vous souhaitez effectuer en tant que développeur.

Visual Studio 2017 prend en charge le débogage dans à peu près tous les navigateurs que vous souhaitez lui lancer, y compris les navigateurs sur les appareils mobiles et dans les émulateurs. Il dispose également de deux navigateurs propres: le navigateur Web interne simple, qui est (surprise!) Une version d'Internet Explorer, et l'inspecteur de page, qui vous montre la page rendue avec toutes les sources et tous les styles. Bien que l'inspecteur de page fasse beaucoup de choses potentiellement chronophages et d'ingénierie inverse pour se configurer pour une page, une fois que vous y êtes, vous pouvez y rester sans avoir à jongler avec Visual Studio, le navigateur et les outils de développement du navigateur. .

Les performances de Visual Studio 2017 sont généralement assez bonnes si vous lui donnez suffisamment de mémoire et de puissance de processeur, mais il a tendance à nécessiter des ressources importantes. Visual Studio 2017 propose d'excellents diagnostics de performances pour les applications, mais dans l'ensemble, ils ne sont pas très utiles pour le code JavaScript ordinaire, qui s'exécute généralement profondément dans un navigateur. Visual Studio a une synchronisation des fonctions JavaScript spécifiques, une réactivité de l'interface utilisateur HTML et des outils de mémoire JavaScript, mais ils s'appliquent uniquement aux projets de plateforme Windows universelle basés sur JavaScript, pas aux projets Web qui utilisent JavaScript.

Visual Studio 2017 comprend une excellente édition d'applications Node.js, IntelliSense, le profilage, l'intégration NPM, la prise en charge de TypeScript, le débogage local et à distance (Windows, MacOS, Linux) et le débogage sur Azure Web Apps et Azure Cloud Services. Il prend également en charge CSS, HTML, JavaScript, TypeScript, CoffeeScript et Less. Cela inclut l'exécution de JSHint au fur et à mesure de la frappe, vous permettant de réduire les fichiers JavaScript à partir d'un menu contextuel et la compilation automatique des fichiers CoffeeScript lors de l'enregistrement, en affichant un aperçu côte à côte du JavaScript généré.