Review: Les 10 meilleurs éditeurs JavaScript

Les programmeurs JavaScript ont le choix entre de nombreux bons outils, presque trop nombreux à suivre. Dans cet article, je discute de 10 éditeurs de texte avec un bon support pour le développement avec JavaScript, HTML5 et CSS, et pour la documentation avec Markdown. Pourquoi utiliser un éditeur pour la programmation JavaScript au lieu d'un IDE? En un mot: la vitesse.

La différence essentielle entre les éditeurs et les IDE est que les IDE peuvent déboguer et parfois profiler votre code, et que les IDE prennent en charge les systèmes de gestion du cycle de vie des applications (ALM). De nombreux éditeurs dont nous discutons ici prennent en charge au moins un système de contrôle de version, souvent Git, de sorte que ce critère est moins un différenciateur entre les IDE et les éditeurs qu'il ne l'était auparavant.

Sublime Text et Visual Studio Code sont parmi les meilleurs éditeurs JavaScript - Sublime Text pour sa vitesse autant que ses fonctionnalités d'édition pratiques, et Visual Studio Code pour des fonctionnalités encore meilleures et une vitesse presque aussi bonne. Brackets prend la troisième place. Alors que TextMate figurait en haut de ma liste il y a quelques années, ses capacités n'ont pas vraiment suivi les nouveaux développements.

Très probablement, vous trouverez votre éditeur JavaScript de choix dans Sublime Text, Visual Studio Code ou Brackets. Mais plusieurs autres outils - Atom, BBEdit, Komodo Edit, Notepad ++, Emacs et Vim - ont tous quelque chose à recommander. Selon la tâche à accomplir, vous trouverez peut-être l'un d'entre eux à portée de main.

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.

Passons en revue les options et comparons-les à la fin.

Texte sublime

Si vous voulez un éditeur de texte de programmation flexible, puissant et extensible, ultra-rapide et que cela ne vous dérange pas de passer à d'autres fenêtres pour la vérification du code, le débogage et le déploiement, ne cherchez pas plus loin que Sublime Text.

Outre la rapidité, les nombreux atouts remarquables de Sublime Text couvrent la prise en charge de plus de 70 types de fichiers, parmi lesquels JavaScript, HTML et CSS; navigation presque instantanée et changement de projet instantané; sélections multiples (faites un tas de changements en même temps), y compris les sélections de colonnes (sélectionnez une zone rectangulaire du fichier) fenêtres multiples (utilisez tous vos moniteurs) et fenêtres fractionnées (profitez de votre espace d'écran); personnalisation complète avec de simples fichiers JSON; une API de plugin basée sur Python; et une palette de commandes unifiée et consultable.

Pour les programmeurs provenant d'autres éditeurs, Sublime Text prend en charge les bundles TextMate (hors commandes) et l'émulation Vi / Vim. La documentation non officielle de Sublime Text fait des remarques désobligeantes (et incorrectes) sur les utilisateurs d'Emacs ( moi , par exemple), mais je les négligerai. Pourquoi la documentation non officielle de Sublime Text existe-t-elle même? Eh bien, d'une part, la documentation officielle est loin d'être complète - encore moins.

Quand j'ai dit «navigation presque instantanée» plus tôt, je le pensais. Par exemple, pour passer de l'emplacement actuel à l'écran à la définition de getResponseHeaderdans ajax.js, je peux taper Commande-P sur un Mac ou Ctrl-P sur un PC, puis ajouvrir une vue transitoire dans ajax.js, puis @grhet Entrée pour ouvrir un onglet avec getResponseHeadersélectionné. Sublime Text est capable de suivre ma frappe. Il se sent aussi réactif que certains des meilleurs anciens éditeurs DOS tels que Brief et Kedit.

Une fois que j'ai sélectionné  getResponseHeader, je peux trouver toutes les utilisations de la fonction en contexte en tapant Shift-Command-F sur un Mac, ou Shift-Ctrl-F sur un PC, puis Entrée. Un nouvel onglet me montrera les résultats de la recherche avec le terme de recherche encadré dans chaque extrait de code de cinq lignes. Un double-clic sur le texte encadré fait apparaître le contexte complet du fichier dans un nouvel onglet.

En cliquant sur un nom de fichier dans la barre latérale de gauche Dossiers, un onglet transitoire affiche le contenu du fichier. Cliquer sur un autre fichier remplace cet onglet. Là encore, Sublime Text est capable de suivre ma frappe et mes clics. De même, la navigation de taille réduite en haut à droite de la page me permet de me déplacer dans un fichier presque instantanément, sans la surcharge de défilement. J'aimerais que Microsoft Word soit aussi réactif.

Les sélections multiples et les sélections de colonnes permettent de traiter rapidement les types de modifications ennuyeuses qui nécessitaient des expressions régulières. Avez-vous besoin de transformer une liste de mots en une structure JSON où chaque mot est entouré de guillemets doubles et chaque mot entre guillemets est séparé du suivant par une virgule? Il faut environ huit frappes dans Sublime Text, quel que soit le nombre de mots que vous avez dans la liste.

Sur ma boîte de développement Windows, j'utilise deux écrans larges. Sur mon MacBook, j'utilise l'écran Retina plus un écran Thunderbolt. À moins que je ne modifie sur un écran et que je débogue sur l'autre, je souhaite généralement voir simultanément de nombreux fichiers sources différents et différentes vues dans les fichiers source. Sublime Text prend en charge plusieurs fenêtres, fenêtres fractionnées, plusieurs espaces de travail par projet, plusieurs vues et plusieurs volets contenant des vues. C'est assez simple d'utiliser tout mon écran lorsque je le souhaite et de consolider lorsque j'ai besoin de faire de la place pour le débogage et les tests.

Vous pouvez tout personnaliser à propos de Sublime Text: le jeu de couleurs, la police du texte, les raccourcis clavier globaux, les taquets de tabulation, les raccourcis clavier et extraits de code spécifiques au fichier, et même les règles de coloration syntaxique. Les préférences sont codées sous forme de fichiers JSON. Les définitions spécifiques à la langue sont des fichiers de préférences XML. Il existe une communauté active autour de Sublime Text qui crée et maintient des packages et des plugins Sublime Text. De nombreuses fonctionnalités dont je pensais au départ que Sublime Text manquait - y compris les interfaces JSLint et JSHint, JsFormat, JsMinify, PrettyJSON et Git - se sont avérées disponibles via la communauté, en utilisant le programme d'installation de package.

L'une des raisons de l'excellente performance de Sublime Text est qu'il est étroitement codé. Une autre raison est que Sublime Text n'est pas un IDE et n'a pas besoin des frais généraux de comptabilité d'un IDE.

Du point de vue du développeur, c'est un compromis délicat. Si vous êtes dans une boucle de développement étroite axée sur les tests de «rouge, vert, refactor», alors un IDE configuré pour éditer, tester, refactoriser et suivre la couverture du code vous aidera le plus. Si vous effectuez des révisions de code ou des modifications majeures, par contre, vous aurez besoin de l'éditeur le plus rapide et le plus efficace que vous puissiez trouver. Cet éditeur pourrait bien être Sublime Text.

Coût: essai gratuit illimité; 70 $ par utilisateur pour une licence professionnelle ou personnelle. Plates-formes: Windows, MacOS et Linux.

Code Visual Studio

Visual Studio Code est un éditeur léger gratuit et un IDE de Microsoft. Il a des composants de Visual Studio, mélangés avec le shell Atom Electron open source, fournissant un excellent support pour le développement ASP.Net Core avec C # et pour le développement Node.js avec TypeScript et JavaScript. Rompant avec le modèle historique de Microsoft consistant à ne prendre en charge que Visual Studio sous Windows, Visual Studio Code fonctionne également sur MacOS et Linux. La capture d'écran ci-dessous a été prise sur MacOS.

Visual Studio Code a une finition de code JavaScript incroyablement bonne, grâce à l'inclusion du compilateur TypeScript et du moteur Salsa. Visual Studio Code envoie votre code JavaScript au compilateur TypeScript en arrière-plan pour déduire des types et créer une table de symboles. Vous pouvez voir les résultats dans la boîte près du bas de l'image à l'écran qui montre les informations pour la  hasOwnProperty méthode.

La même table de symboles permet à IntelliSense de vous proposer d'excellentes listes d'options contextuelles pour l'achèvement du code tout au long de la saisie d'une expression. Vous obtenez une fermeture automatique des parenthèses, des options de complétion automatique des mots, des listes de méthodes automatiques après la saisie .et des listes de paramètres automatiques dans une méthode. Vous pouvez améliorer IntelliSense en ajoutant des références aux fichiers d.ts à partir de  DefinitelyTyped, et Visual Studio Code vous proposera de le faire pour vous lorsqu'il reconnaît des problèmes courants, tels que l'utilisation de  __dirname, qui est une variable intégrée Node.js.

Le support Git est très bon et assez simple à utiliser. Le débogueur Visual Studio Code fournit une excellente expérience de débogage pour le développement Node.js (et le développement ASP.Net). Visual Studio Code dispose de très bons outils pour HTML, CSS, Less, Sass et JSON, qui sont basés sur la même technologie qui alimente les outils de développement Internet Explorer F12. En outre, il dispose d'une intégration personnalisable avec des exécuteurs de tâches externes tels que  gulp et  jake.

Visual Studio Code a attiré un solide écosystème de plugins, par exemple pour prendre en charge Angular et React. C'est maintenant l'éditeur que je recommande lorsque j'écris des tutoriels sur la création d'applications avec des frameworks et des bibliothèques JavaScript et TypeScript.

Coût: open source gratuit. Plate-forme: Windows, MacOS et Linux.

Supports

Brackets est un éditeur open source gratuit, originaire d'Adobe, conçu pour fournir de meilleurs outils pour JavaScript, HTML et CSS, ainsi que pour les technologies Web ouvertes associées. Brackets lui-même est écrit en JavaScript, HTML et CSS, et les développeurs utilisent Brackets pour créer des Brackets. En plus des fonctionnalités intégrées, Brackets dispose d'un gestionnaire d'extensions et des extensions sont disponibles pour de nombreux langages et outils utilisés par les développeurs frontaux. Brackets n'est pas aussi rapide que Sublime Text ou TextMate, mais c'est toujours assez rapide, à l'exception des pauses pour charger ou mettre à jour le contenu du programme à partir du Web.

Brackets prend en charge JavaScript, CSS, HTML et Node.js. Il dispose également de fonctionnalités intéressantes telles que l'édition en ligne du CSS lié à un ID HTML (Quick Edit). De plus, Brackets propose une interface utilisateur propre et un aperçu en direct des pages Web que vous modifiez. C'est un très bon choix pour un éditeur de code gratuit.

La saisie semi-automatique JavaScript dans les crochets est très bonne, avec la fermeture automatique des parenthèses, des crochets angulaires et des crochets, ainsi que des menus déroulants automatiques pour les mots-clés, les variables et les méthodes, y compris les méthodes jQuery après la saisie $. Les parenthèses peuvent contrôler le débogueur Node.js et redémarrer Node à partir d'un élément de menu. Il est facile d'ajouter des extensions pour des fonctionnalités supplémentaires telles que la prise en charge de TypeScript et JSX, l'intégration Bower et l'intégration Git.

La modification rapide, les documents rapides, l'ouverture rapide et l'aperçu en direct contribuent tous à rationaliser l'édition d'applications Web et vous permettent de vous concentrer sur ce que vous codez ou concevez. Par contre, certaines extensions Brackets peuvent être difficiles à configurer, mais pas aussi compliquées que les packages Emacs ou les plugins Vim.

Coût: open source gratuit. Plateformes: Windows, MacOS, Linux. 

Atome

Atom est un éditeur de programmation gratuit, open source et piratable de GitHub pour Windows, MacOS et Linux qui s'intègre à l'application GitHub et propose des milliers de packages et de thèmes. Je me débrouille avec quelques packages communautaires, ainsi que les packages et thèmes de base.

Pas étonnant, vu son origine, la source Atom est hébergée sur GitHub. Il est écrit en CoffeeScript et intégré à Node.js. Atom est une variante spécialisée de Chromium conçue pour être un éditeur de texte plutôt qu'un navigateur Web; chaque fenêtre Atom est essentiellement une page Web rendue localement. L'équipe Atom développe Atom en Atom.

Les performances d'Atom sont plutôt bonnes lorsqu'il ne se met pas à jour. Il est complet prêt à l'emploi, avec un chercheur flou, une recherche et un remplacement rapides dans tout le projet, plusieurs curseurs et sélections, plusieurs volets, des extraits, le pliage de code et la possibilité d'importer des grammaires et des thèmes TextMate. Atom peut installer deux utilitaires de ligne de commande: Atom pour démarrer l'éditeur à partir d'un shell et APM pour gérer les packages d'Atom, dans l'esprit de NPM pour Node.js. Je me retrouve souvent à utiliser Atom lors de la navigation dans les référentiels que j'ai clonés à partir de GitHub, car l'application GitHub comprend un élément de menu contextuel pour le faire.

Coût: open source gratuit. Plateformes: Windows, MacOS, Linux.

Komodo Modifier

Komodo Edit, la version gratuite à fonctionnalités réduites d'ActiveState de Komodo IDE, est un très bon éditeur multilingue. Tout ce que j'avais à dire sur Komodo IDE en tant qu'éditeur (voir «Review: Les 6 meilleurs IDE JavaScript») s'applique à Komodo Edit.