7 meilleurs éditeurs de code en ligne basés sur un navigateur pour les développeurs Web

Si vous êtes un développeur Web, vous avez très probablement un environnement de développement configuré localement sur votre poste de travail. Vous avez installé votre éditeur de code préféré, les meilleurs packages ajoutés, les extensions chargées et l'ensemble de l'IDE fonctionne exactement comme vous en avez besoin. Mais que faire si vous n'êtes pas à votre machine normale ? Que faire si vous voyagez ou avez été déplacé ou même travaillez à domicile sans ordinateur portable ? Quoi alors ? C'est alors que savoir quels sont les éditeurs de code en ligne peut vraiment sauver la journée. Et plus que cela, peut-être même être conservé dans votre poche arrière pour améliorer votre routine de codage normale.

Abonnez-vous à notre chaîne Youtube

Pourquoi des éditeurs de code en ligne ?

Il existe plusieurs raisons d'envisager l'utilisation d'éditeurs de code en ligne. La vérité, cependant, est que l'utilisation d'un IDE en ligne ne remplacera (très probablement) pas votre IDE installé localement. Alors que de nombreux environnements en ligne sont étonnamment robustes et capables de gérer la plupart du travail que vous leur confiez, ils ne sont tout simplement pas aussi robustes et capables que les installations de bureau. Cela dit, cependant, il y a plusieurs raisons d'envisager d'en utiliser un.

• Vous voyagez et avez besoin d'accéder à votre code n'importe où.
• Vous devez partager des extraits et des sections interactives de code.
• Votre temps est limité et vous avez besoin d'une solution avec une configuration presque nulle.
• Votre budget est limité. Les éditeurs de code en ligne peuvent avoir plus de puissance derrière eux que le poste de travail auquel vous avez accès.
• Votre équipe doit collaborer en temps réel. De nombreux IDE en ligne ont des outils de collaboration intégrés qui fonctionnent sans configuration.

Quelle que soit la raison pour laquelle vous souhaitez ou devez utiliser un IDE en ligne, vous avez le choix parmi une multitude de points forts et de points faibles et remplissant différentes fonctions pour les développeurs Web.

1. Code de lecture

PlayCode est un éditeur de code en ligne agréable et polyvalent. Avec lui, vous pouvez ouvrir plusieurs fichiers qui s'exécutent ensemble dans un seul projet, tout comme vous le feriez avec plusieurs fichiers dans une structure de répertoire typique en utilisant Sublime Text ou VS Code. PlayCode a des modèles prédéfinis pour les utilisateurs, ainsi que des résultats en temps réel et un débogage de console intégré directement dans le navigateur. Les utilisateurs peuvent modifier et travailler sans être connectés pour des correctifs rapides et ainsi de suite, mais également se connecter pour enregistrer le travail et utiliser PlayCode sur plusieurs machines.

Plus d'information

2. Milieu JSF

JSFiddle est un autre éditeur de code en ligne de premier plan qui fonctionne à bien des égards, comme PlayCode. Conçu spécifiquement pour les codeurs JavaScript, JSFiddle n'est pas nécessairement destiné à travailler sur des projets entiers, mais comme le dit la barre d'informations en haut de l'éditeur, il fonctionne mieux pour les "démos pour les documents, les rapports de bogues pour les problèmes Github, la présentation de réponses de code sur Débordement de pile, collaboration de code en direct, hébergement d'extraits de code" ou simplement être un bac à sable pour vous permettre de jouer avec votre code.

Plus d'information

3. CodePen

CodePen est probablement considéré comme l' éditeur de code en ligne des éditeurs de code en ligne. Non seulement cela vous donne les outils de collaboration, d'expérimentation et de partage, mais vous obtenez également des résultats en direct et la possibilité de rechercher dans leur base de données et leur référentiel d'extraits que d'autres auteurs ont mis en place afin que vous puissiez également expérimenter et apprendre de leur travail. . C'est aussi un endroit amusant pour voir ce que certaines personnes font avec le code de manière nouvelle et amusante. De plus, les extraits CodePen sont indexés par Google, et vous vous retrouverez souvent ici lorsque vous cherchez une solution avant de vous diriger vers Stack Overflow – et parfois après, car c'est là que les gens écrivent et partagent souvent des solutions en temps réel.

Plus d'information

4. StackBlitz

StackBlitz est une bonne chose. Nous sommes très impressionnés par ce que cette application offre aux développeurs, car elle regorge d'outils pour vous permettre de démarrer votre projet avec un bon départ. En un seul clic. Si vous regardez l'image ci-dessus, les fichiers et les dépendances et même les URL partageables ont tous été générés avec un seul bouton Démarrer un nouvel espace de travail - Réagir (JavaScript) . Avec la possibilité d'enregistrer, de partager et même de se connecter à votre compte GitHub, StackBlitz mérite un coup d'œil. Au lieu d'être un service de partage d'extraits ou un bac à sable de codage, StackBlitz est un IDE solide pour ceux qui préfèrent les éditeurs de code en ligne.

De plus, et nous ne pouvons pas laisser cela de côté, il est basé sur VS Code. Donc, vous exécutez essentiellement l'IDE et l'éditeur de code le plus populaire dans votre navigateur, et chaque projet dispose de son propre espace serveur. Vous pouvez mettre à niveau si vous le souhaitez, mais même la version gratuite fonctionne bien (bien que légèrement lente à charger, mais il faut s'y attendre des plans gratuits). Lisez-le, et nous pensons que vous conviendrez que cela, de tous les éditeurs de code en ligne, vaut la peine d'être examiné de près.

Plus d'information

5. AWS Cloud9

En tant qu'un des premiers utilisateurs de Cloud9 il y a quelques années, alors qu'il s'agissait d'un projet open source sur c9.io , nous recommandons fortement ce produit. En fait, il offre une expérience très similaire à StackBlitz ci-dessus. Lorsque Amazon a acquis C9, ils l'ont connecté à leur cloud dans le cadre de leur suite de services AWS. AWS Cloud9 est définitivement un IDE en ligne solide et complet, et le texte de présentation informatif sur leur site Web explique très bien pourquoi cela vaut le coup d'œil.

AWS Cloud9 est un environnement de développement intégré (IDE) basé sur le cloud qui vous permet d'écrire, d'exécuter et de déboguer votre code avec un simple navigateur. Il comprend un éditeur de code, un débogueur et un terminal. Cloud9 est livré avec des outils essentiels pour les langages de programmation populaires, notamment JavaScript, Python, PHP, etc., vous n'avez donc pas besoin d'installer de fichiers ou de configurer votre machine de développement pour démarrer de nouveaux projets. Étant donné que votre IDE Cloud9 est basé sur le cloud, vous pouvez travailler sur vos projets depuis votre bureau, votre domicile ou n'importe où à l'aide d'une machine connectée à Internet. Cloud9 offre également une expérience transparente pour le développement d'applications sans serveur, vous permettant de définir facilement des ressources, de déboguer et de basculer entre l'exécution locale et à distance d'applications sans serveur. Avec Cloud9, vous pouvez rapidement partager votre environnement de développement avec votre équipe, ce qui vous permet de programmer et de suivre les entrées de chacun en temps réel.

Plus d'information

6. JSBin

Si vous avez déjà vu ou utilisé PasteBin, JSBin vous sera familier. Sa structure, son style et son utilité sont similaires, JSBin est principalement un site pour partager du code. Nous pensons qu'il est certainement préférable d'enregistrer un compte ici pour rester connecté. La raison en est que JSBin enregistre automatiquement votre progression sur tout code avec lequel vous travaillez. Même si vous essayez simplement de voir ce que font les extraits, vous ne perdrez pas votre travail. JSBin est un éditeur simple et pragmatique. Et si c'est ce dont vous avez besoin, vous ne pouvez vraiment pas faire mieux.

Plus d'information

7. Éditeur de thème WordPress

WordPress n'est peut-être pas la première chose à laquelle vous pensez concernant les éditeurs de code en ligne. Mais c'est certainement quelque chose à considérer. Dans WordPress 4.9, WP Core a été mis à jour pour inclure CodeMirror. La mise en évidence de la syntaxe et les avertissements d'erreur pour toutes les modifications apportées dans les zones de code sont désormais la référence avec WordPress. L'emplacement principal pour cela se trouve dans la zone Apparence - Éditeur de thème , mais il apparaît également dans toute zone widgetisée (telle que le widget HTML personnalisé ) ou dans le personnalisateur de thème dans l'onglet CSS personnalisé . Bien qu'il ne s'agisse certainement pas d'un IDE complet, nous pouvons absolument recommander l'éditeur WP CodeMirror comme moyen de vérifier les erreurs et de mettre à jour des extraits de code sans traiter avec FTP et divers systèmes de gestion de fichiers.

Plus d'information

Conclusion avec les éditeurs de code en ligne

La plupart des éditeurs de code en ligne ne remplaceront pas votre environnement de développement local. Ce n'est pas leur travail. Principalement. Ce qu'ils peuvent faire, cependant, est de fournir un moyen simple et solide d'éditer du code, de partager des extraits de code, d'effectuer des sauvegardes et d'expérimenter de nouvelles fonctionnalités dans un endroit sûr et sécurisé en temps réel. Entre les IDE complets comme StackBlitz, les services de partage d'extraits comme JSBin et même les éditeurs de code en ligne de qualité de vie comme l'intégration de WordPress CodeMirror, si vous n'avez jamais joué avec l'édition en ligne, il n'y a pas de meilleur moment pour commencer.

Quels sont vos éditeurs de code en ligne préférés ?

Article présenté image par Fernandodiass / shutterstock.com