Résumer plusieurs éditeurs JavaScript utiles

Anglais : Traduction Martin Heller : Grape City Control

Si vous rencontrez des problèmes pendant le processus d'apprentissage ou si vous souhaitez obtenir des ressources d'apprentissage, veuillez rejoindre le groupe d'échange d'apprentissage 343599877, apprenons front-end ensemble !

Il existe de nombreux excellents outils disponibles pour les programmeurs JavaScript. Cet article présentera 10 excellents éditeurs de texte prenant en charge le développement JavaScript, HTML5 et CSS et pouvant utiliser Markdown pour la rédaction de documents. Pourquoi utiliser un éditeur plutôt qu'un IDE pour la programmation JavaScript ? La raison est la vitesse rapide.

La différence essentielle entre un éditeur et un IDE est que non seulement l'IDE peut déboguer et profiler le code, mais qu'il prend également en charge le système de gestion du cycle de vie des applications (ALM). La plupart des éditeurs dont nous discutons ici prennent en charge au moins un système de contrôle de version, généralement Git, et la distinction entre les IDE et les éditeurs est de plus en plus réduite de nos jours.

Parmi ces 10 éditeurs JavaScript, Sublime Text et Visual Studio Code sont les deux premiers. Sublime Text est célèbre pour sa rapidité et sa variété de fonctions d'édition pratiques. Les fonctions et la vitesse de Visual Studio Code sont presque les mêmes que celles de Sublime Text. TextMate se classe troisième. Bien que TextMate ait été classé n°1 il y a deux ans, ses fonctionnalités n'ont pas vraiment suivi.

Vous trouverez très probablement votre éditeur JavaScript préféré dans Sublime Text, Visual Studio Code et Brackets, mais il existe d'autres outils d'édition tels que Atom, BBEdit, Komodo Edit, Notepad++, Emacs et Vim, etc. À savoir . Vous pouvez choisir l'outil d'édition le plus pratique en fonction de votre projet actuel.

Découvrez tous les éditeurs et comparons-les à la fin de l'article.

Sublime Text

Si vous souhaitez un éditeur de texte flexible, puissant et extensible qui s'exécute à la vitesse de l'éclair et prend en charge le passage à d'autres fenêtres pour l'inspection du code, le débogage et le déploiement, vous pouvez envisager d'utiliser Texte sublime.

En plus d'être plus rapide, Sublime Text présente un certain nombre d'avantages remarquables : il couvre plus de 70 types de fichiers, dont JavaScript, HTML et CSS, et plus d'options ; (effectuez une série de modifications à la fois), y compris la sélection de colonnes (sélectionnez une zone rectangulaire du fichier à la fois) et divisez les fenêtres en utilisant des fichiers JSON simples pour une personnalisation complète ; ; basé sur l'API Python Plugin ; un tableau de commande unifié et consultable.

Pour les programmeurs utilisant d'autres éditeurs, Sublime Text prend en charge les packages TextMate (commandes non incluses) et l'émulation Vi/Vim.

Sublime Text est un éditeur de texte hautement configurable et extensible. Il contient plus de 50 grammaires, dont JavaScript, qui peuvent être étendues à l'aide des packages Sublime et des définitions de grammaire TextMate. Vous pouvez installer la syntaxe et la prise en charge de Babel (React) et TypeScript (Angular) en quelques touches.

Sublime Text prend en charge plusieurs fenêtres et fenêtres fractionnées. Chaque projet peut avoir plusieurs espaces de travail, plusieurs vues et plusieurs volets contenant des vues. Utiliser tout l’espace d’écran devient assez simple lorsque vous souhaitez intégrer, déboguer et tester des espaces. Sublime Text prend également en charge la personnalisation de tout : couleurs, polices de texte, raccourcis clavier globaux, taquets de tabulation, raccourcis clavier et extraits de code spécifiques aux fichiers, même règles de coloration syntaxique, etc. Le fichier d'encodage de Sublime Text est par défaut un fichier JSON et la définition du langage est par défaut XML.

Sublime Text dispose d'une communauté active pour la création et la maintenance des packages et plugins Sublime Text. De nombreuses fonctionnalités manquantes dans Sublime Text, notamment les interfaces JSLint et JSHint, la prise en charge de JsFormat, JsMinify, PrettyJSON et Git, sont disponibles via la communauté à l'aide du Package Installer.

Lien du site officiel :

Visual Studio Code

Visual Studio Code est un éditeur léger et IDE gratuit. Il est publié par Microsoft. . Il contient des composants Visual Studio et peut être mélangé avec le shell open source Atom Electron. Il offre une excellente prise en charge du développement ASP.Net Core à l'aide de C# ; il offre également une excellente prise en charge du développement Node.js via TypeScript et JavaScript. Contrairement à la convention selon laquelle Visual Studio n'est pris en charge que sous Windows, Visual Studio Code peut également s'exécuter sur MacOS et Linux.

Visual Studio Code offre une très bonne complétion du code JavaScript grâce à l'inclusion du compilateur TypeScript et du moteur Salsa. Visual Studio Code envoie le code JavaScript au compilateur TypeScript en arrière-plan pour déduire les types et créer des tables de symboles. Vous pouvez voir les informations sur la méthode hasOwnProperty dans la zone en bas de l’image de l’écran.

La même table de symboles permet à IntelliSense de vous fournir une excellente liste contextuelle d'options tout au long du processus de saisie d'expression. Vous bénéficiez des fonctionnalités suivantes : fermeture automatique après remplissage, option de remplissage automatique, liste automatique des méthodes après la saisie et liste automatique des paramètres dans les méthodes. Vous pouvez améliorer IntelliSense en ajoutant une référence au fichier d.ts de DefinitelyTyped. Visual Studio Code vous fournira ces fonctionnalités à mesure que vous identifierez les problèmes courants tels que l'utilisation de __dirname à partir des variables intégrées de Node.js.

Visual Studio Code est un éditeur léger et gratuit et un IDE pour le développement Node.js et ASP.Net. Il combine les technologies Microsoft telles que le compilateur TypeScript, le compilateur Roslyn .Net et le shell Electron utilisé par Atom. Visual Studio Code est disponible pour les plateformes Windows, MacOS et Linux.

Le support Git de Visual Studio Code est très bon et facile à utiliser. Le débogueur Visual Studio Code offre une excellente expérience de débogage pour le développement Node.js et ASP.Net. Visual Studio Code dispose de très bons outils HTML, CSS, Less, Sass et JSON, cet outil est basé sur la même technologie que les outils de développement Internet Explorer F12. De plus, Visual Studio Code offre une intégration personnalisable avec des exécuteurs de tâches externes tels que gulp et jake.

Visual Studio Code dispose d'un solide écosystème de plug-ins, tel que la prise en charge d'Angular et de React. Il est recommandé d'utiliser Visual Studio Code lors de la création d'applications à l'aide de frameworks et de bibliothèques JavaScript et TypeScript.

Lien du site officiel :

Adresse de téléchargement :

Brackets

Brackets est un éditeur open source gratuit, originaire d'Adobe, conçu pour JavaScript, HTML et CSS fournit de meilleurs outils et technologies Web ouvertes associées. Les supports eux-mêmes sont écrits en JavaScript, HTML et CSS. En plus de la fonctionnalité intégrée, Brackets dispose d'un gestionnaire d'extensions permettant d'étendre de nombreux langages et outils utilisés par les développeurs front-end. Brackets ne fonctionne pas aussi vite que Sublime Text et TextMate, mais mis à part les pauses lors du chargement ou de la mise à jour du contenu du programme depuis le réseau, il fonctionne toujours très rapidement.

Brackets offre non seulement un excellent support pour JavaScript, CSS, HTML et Node.js, mais il possède également d'autres fonctionnalités intéressantes, telles que l'édition CSS en ligne liée aux identifiants HTML. De plus, Brackets dispose d'une interface utilisateur simple et d'un aperçu en temps réel des pages Web lors de l'édition. Pour un éditeur de code gratuit, Brackets est un excellent choix.

L'extension Brackets est également écrite en JavaScript et peut également appeler des modules Node.js. Contrairement à la plupart des éditeurs qui affichent les fichiers ouverts dans des onglets, Brackets affiche une liste de fichiers de travail au-dessus de l'arborescence des fichiers.

La fonction de saisie semi-automatique JavaScript de Brackets est très bonne, remplissant automatiquement les parenthèses fermantes de diverses parenthèses et le menu déroulant automatique des mots-clés, variables et méthodes après avoir tapé $ dans les méthodes jQuery. Les supports peuvent contrôler le débogueur Node.js et redémarrer Node à partir d'un élément de menu. Les supports facilitent l'ajout d'extensions avec des fonctionnalités supplémentaires (telles que la prise en charge de TypeScript et JSX, l'intégration Bower et l'intégration Git).

L'édition rapide, l'enregistrement rapide des documents, l'ouverture rapide des fichiers et l'aperçu en temps réel contribuent tous à simplifier l'édition des applications Web, vous permettant ainsi de vous concentrer sur le codage ou la conception. Les supports présentent également certains inconvénients, par exemple certaines extensions Brackets sont difficiles à configurer, pas aussi facilement que les packages Emacs ou les plugins Vim.

Lien du site officiel : http://brackets.io/

Adresse de téléchargement :

Atom

Atom 1.15.0 est une version gratuite sur GitHub Éditeur open source et programmable pour les plateformes Windows, MacOS et Linux, il est intégré à l'application GitHub et propose de nombreux packages et thèmes.

Le code source d'Atom est sur GitHub, il est écrit en CoffeeScript et intégré à Node.js. Atom est une version spéciale du navigateur 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.

Les performances sont très bonnes lorsque Atom ne se met pas à jour automatiquement. Il possède des fonctionnalités intéressantes telles que la recherche floue, la recherche et le remplacement rapides d'éléments, plusieurs curseurs et sélections, plusieurs volets, des extraits de code, le pliage de code et la possibilité d'importer la syntaxe et les thèmes TextMate. Atom peut installer deux utilitaires de ligne de commande : Atom, pour lancer l'éditeur depuis le shell et APM, pour gérer les packages d'Atom ;

Komodo Edit

Komodo Edit est une version gratuite et réduite de Komodo IDE d'ActiveState, qui est un éditeur multilingue sympa.

Si vous aimez Komodo IDE mais que vous ne pouvez pas vous le permettre, alors Komodo Edit sera un bon choix pour vous. Komodo Edit n'est pas un IDE, vous devez donc effectuer le contrôle du code en dehors de l'éditeur.

Il ne fournit pas de fonction de collecte de code en temps réel. Si vous développez de manière indépendante et ne partagez pas de code avec d'autres personnes, il n'y aura aucun problème. Il ne fournit pas non plus d'inspecteur HTTP. Komodo Edit a les mêmes capacités d'édition que l'IDE Komodo, mais manque de refactorisation de code, de débogage, de tests unitaires, d'intégration de contrôle de code source et d'autres fonctionnalités conviviales pour l'IDE.

Dans tous les cas, Komodo Edit peut répondre gratuitement à vos besoins d'édition JavaScript et fournit des langages de balisage pour l'édition HTML, CSS, Python, Perl, Ruby, Tcl et d'autres programmations.

Notepad ++

Notepad ++ est un éditeur de code source et un bloc-notes open source Windows gratuit, idéal pour éditer du JavaScript. Il prend en charge environ 50 langages de programmation et de balisage. En plus de ses multiples fenêtres d'édition de documents, il dispose d'une arborescence d'espace de travail, d'onglets de liste de fonctionnalités et d'onglets de mappage de documents. Ses temps de chargement sont suffisamment rapides et ses performances sont suffisamment solides pour que vous ne vous sentiez pas ralenti.

Avec la coloration et le pliage de la syntaxe, des fonctionnalités modifiables (y compris l'édition en mode colonne et les expressions régulières, la prise en charge de la recherche et du remplacement) et une quantité décente de complétion de fonctions et d'indices de paramètres, Notepad++ peut facilement devenir l'éditeur de code de choix pour JavaScript. Cependant, il ne s'agit pas encore d'un éditeur JavaScript complet et il ne peut pas générer de code, effectuer des opérations telles que le refactoring et naviguer rapidement dans de grands projets.

BBEdit

BEdit 11.0.3 est un éditeur de texte, HTML uniquement pour Mac, il prend en charge environ 35 langages de programmation et de balisage, communauté La version fournit également prise en charge de nombreuses autres langues via le site Web BBEdit. La version sous licence et la version communautaire disposent toutes deux d'une coloration syntaxique ; la version sous licence possède également un certain nombre de fonctionnalités de saisie semi-automatique, principalement pour les noms de fonctions, les noms de variables et un petit nombre de mots-clés et de balises. La version sous licence s'intègre également aux systèmes de contrôle de version Git, Perforce et Subversion.

BBEdit 11 est une réécriture majeure du produit. Cette version est plus rapide qu'avant et peut également très bien gérer les fichiers Ginormous. Il dispose d'une fonction d'extraction pour copier les résultats de la sélection ou de la recherche dans un nouveau tampon, ainsi que d'une fonction de coupe. BBEdit peut éditer et exécuter des scripts Perl, Python, Ruby et Shell, ainsi que vérifier la syntaxe des scripts Perl et Python.

La prise en charge de BBEdit pour HTML et Markdown est en fait meilleure que sa prise en charge pour JavaScript. Vous pouvez installer trois outils de ligne de commande pour BBEdit : un pour l'éditeur, un pour le moteur de comparaison et le dernier pour la recherche multimédia.

TextMate

TextMate était principalement utilisé pour écrire Ruby on Rails sur MacBook, mais maintenant TextMate est devenu moins important et, en même temps, Sublime Text a progressivement gagné en popularité.

TextMate n'est pas un IDE, mais il fournit des fonctionnalités telles que des packages, des extraits de code, des macros et des systèmes de portée qui manquent aux IDE spécifiques à un langage. TextMate propose désormais des bundles JavaScript et jQuery simples qui fournissent un bel ensemble d'outils pour générer rapidement du code JavaScript et jQuery. Pour les fonctionnalités de type IDE, vous pouvez utiliser la version intégrée au shell de TextMate, mais ne vous attendez pas à une refactorisation de code, à des tests unitaires ou de régression automatisés de TextMate. Si Grunt est correctement configuré, TextMate peut automatiser les tests JavaScript.

TextMate dispose d'un onglet de préférences Bundles à partir duquel des bundles supplémentaires peuvent être téléchargés et installés. Les sources du bundle sont en fait le code source du produit qui réside dans un référentiel GitHub.

Emacs

Emacs et ses dérivés sont issus du MIT AI Lab depuis le début des années 1970. Emacs a commencé comme une macro dans l'éditeur de texte TECO et s'est progressivement développé pour devenir un langage indépendant. L'Emacs par défaut installé sur MacOS est la version 22.1.1, qui ne prend pas en charge l'interface graphique. Vous pouvez facilement installer XEmacs, Aquamacs (GUI pour MacOS) et les versions plus récentes de GNU Emacs. Emacs est un éditeur JavaScript. Le mode par défaut pour éditer JavaScript est dans le package js. L'utilisation d'Emacs peut obtenir une meilleure coloration syntaxique et un meilleur peluchage.

Emacs utilise le package mode js2 et utilise la saisie semi-automatique ac-js2. Dans Emacs, vous pouvez utiliser le mode série pour obtenir une interaction JavaScript, HTML et CSS du navigateur en temps réel.

Vim (et variantes)

Vi (interface visuelle) a été initialement écrit par Bill Joy pour Unix. Depuis 1976, il a progressivement évolué d'Ed à Ex. Vim est une version améliorée, gratuite et open source de Vi ; la version 7.3 est installée par défaut sur Mac OS X.

Vous pouvez facilement installer une version plus récente de Vim, MacVim (GUI pour MacOS) ou tout ce qui est disponible pour votre plateforme. Vim est un éditeur JavaScript et les suggestions contenues dans son fichier readme vim-plug sont plutôt bonnes.

C'est à vous de décider quel éditeur utiliser.

Que vous vous concentriez sur JavaScript côté client ou sur Node.js, il existe de nombreuses options.

Si vous recherchez un éditeur de texte de programmation JavaScript puissant et rapide prenant en charge de nombreux autres langages, vous pouvez choisir Sublime Text.

Si vous souhaitez un éditeur JavaScript gratuit et rapide, compatible avec l'IDE et prenant en charge ASP.Net et C#, Visual Studio Code est un excellent choix.

Brackets et Atom sont deux nouveaux éditeurs de texte gratuits. Brackets est un éditeur très proche d'un IDE pour le développement Node.js, et Atom est hautement intégré au client de bureau GitHub.

Sous Windows, Notepad++ est rapide, efficace et gratuit. Sur MacOS, BBEdit est un outil HTML rapide, cool et gratuit en édition limitée pour l'intégration du contrôle de version. TextMate est toujours un excellent éditeur rapide, complet et extensible, mais son développement a été lent.

Si vous préférez utiliser des langages de script open source, Komodo Edit est un bon choix. Si vous aimez un éditeur personnalisé, Emacs ou Vim peuvent répondre à vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!