7 é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’EDI fonctionne exactement comme vous en avez besoin. Mais que faire si vous n’êtes pas à votre machine normale? Que se passe-t-il si vous voyagez ou avez été déplacé ou même travaillez de chez vous sans ordinateur portable? Et alors? C’est quand savoir quels éditeurs de code en ligne sont là 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.

Pourquoi les é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 probablement pas votre IDE installé localement. Bien que de nombreux environnements en ligne soient incroyablement robustes et capables de gérer la plupart du travail que vous leur lancez, ils ne sont tout simplement pas aussi robustes et capables que les installations de bureau. Cela dit, cependant, il existe 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 de code 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 entre des tonnes, chacune avec des forces et des faiblesses différentes et qui remplissent différentes fonctions pour les développeurs Web.

1. PlayCode

PlayCode est un bel éditeur de code en ligne tout usage. 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 propose 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 obtenir des correctifs rapides et ainsi de suite, mais aussi se connecter pour enregistrer le travail et utiliser PlayCode sur toutes les machines.

2. JSFiddle

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 conçu pour travailler sur des projets entiers, mais comme le dit la barre d’informations en haut de l’éditeur lui-même, il fonctionne mieux pour les «démos pour les documents, les rapports de bogues pour les problèmes Github, la présentation des 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.

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 référentiel d’extraits que d’autres auteurs mettent en place afin que vous puissiez expérimenter et apprendre de leur travail, aussi . 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 de CodePen sont indexés par Google, et vous vous retrouverez souvent à plusieurs reprises ici lorsque vous chercherez une solution avant de vous diriger vers Stack Overflow – et parfois après parce que c’est là que les gens écrivent et partagent souvent des solutions en temps réel.

4. StackBlitz

StackBlitz est une bonne chose. Nous sommes très impressionnés par ce que cette application offre aux développeurs, car elle est remplie d’outils pour vous permettre de démarrer votre projet avec un démarrage rapide. 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 vous connecter à votre compte GitHub, StackBlitz mérite un coup d’œil. Au lieu d’être un service de partage d’extraits de code 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 aller sans dire, il est basé sur VS Code. Vous exécutez donc essentiellement l’EDI 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 (quoique légèrement lente à la charge, mais cela est normal dans les plans gratuits). Lisez-le, et nous pensons que vous conviendrez que cela, de tous les éditeurs de code en ligne, mérite d’être examiné longuement et attentivement.

5. AWS Cloud9

En tant que « adopteur » précoce de Cloud9 il y a des 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 certainement un IDE en ligne solide et complet, et le texte d’information sur leur site Web fait un excellent travail pour expliquer exactement pourquoi cela vaut le coup d’œil.

6. JSBin

Si vous avez déjà vu ou utilisé PasteBin, JSBin sera familier. Il est similaire dans sa structure, son style et son utilité, 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 sans fioritures. Et si c’est ce dont vous avez besoin, vous ne pouvez vraiment pas vous améliorer.

7. WordPress Theme Editor

WordPress n’est peut-être pas la première chose à laquelle vous pensez en ce qui concerne 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 des références avec WordPress. L’emplacement principal pour cela se trouve dans la zone Apparence – Éditeur de thème, mais il apparaît également dans n’importe quelle zone widgetisée (comme le widget HTML personnalisé) ou dans le personnalisateur de thème dans l’onglet CSS personnalisé. Bien que ce ne soit certainement pas 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.

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. par exemple Dreamweaver ou Notepad++
Ce n’est pas leur travail. La plupart. Ce qu’ils peuvent faire, cependant, est de fournir un moyen solide et simple de modifier le code, de partager des extraits, de faire des sauvegardes et d’expérimenter de nouvelles fonctionnalités dans un emplacement sûr et sécurisé en temps réel. Entre des IDE complets comme StackBlitz, des services de partage d’extraits de code comme JSBin et même des éditeurs de code en ligne de qualité de vie comme l’intégration WordPress CodeMirror, si vous n’avez jamais joué avec l’édition en ligne, il n’y a pas de meilleur moment pour commencer.