Tu souhaites te lancer dans l’apprentissage d’un nouveau langage, framework, tu n’as pas envie d’installer d’éditeur de code sur ton ordinateur, ou tu souhaites simplement partager un bout de code avec une personne. L’éditeur de code en ligne est la solution.
Aujourd’hui il est possible de coder quasiment sans matériel, tout est en ligne. Tu n’as pas besoin d’installer un éditeur de code ou d’IDE sur ton ordinateur. Tu trouves tout en ligne et notamment des éditeurs de code en ligne.
Ils proposent de nombreuses fonctionnalités et sont très pratique notamment pour le travail collaboratif. Du fait qu’ils soient entièrement en ligne, tout le monde peut y avoir accès à tout moment et partout dans le monde. Il devient alors très facile de partager un bout de code à quelqu’un.
Peu importe le langage que tu utilises, ou que tu souhaites apprendre, tu trouveras un éditeur en ligne pour (PHP, Python, Java, HTML, JS, …). Ils offrent aussi la possibilité de coder avec de nombreux frameworks (surtout JS). Tu peux alors concentrer ton apprentissage du framework sans te soucier de toute la configuration à faire en amont.
Dans cet article, je t’ai fait un TOP 9 des meilleurs éditeurs de code en ligne.
Mais d’abord, voyons ensemble pourquoi utiliser un éditeur de code en ligne.
Pourquoi utiliser un éditeur de code en ligne ?
C’est vrai, pourquoi utiliser un éditeur de code en ligne si on en a déjà un d’installer sur notre ordinateur ?
Pour plusieurs raisons.
Pour plus de flexibilité
Parfois, on souhaite utiliser une nouvelle technologie, apprendre un nouveau langage, un nouveau framework. Cela demande souvent des plugins pour faciliter le développement (coloration syntaxique, auto complétion, etc …). Avec un éditeur de code en ligne, tu n’as pas besoin de changer la configuration de ton éditeur de code actuel.
Tu peux ainsi te lancer directement sur une nouvelle techno sans perdre de temps et avec toute la configuration nécessaire.
Pour une meilleure collaboration
Je pense que c’est l’un des plus gros points fort des éditeurs de code en ligne, la collaboration. En effet, lorsque tu es développeur, tu auras souvent besoin des autres pour avancer. Soit pour résoudre un problème, soit pour partager un bout de code, soit pour faire du peer programming.
Les éditeurs de code « classique », ne sont pas très performant pour dans la collaboration. Il est souvent compliqué de partager son code avec quelqu’un. Visual Studio Code essaye de rattraper la chose avec son plugin : Visual Studio Live Share qui permet la modification simultanée de code à plusieurs.
Les éditeurs de code permettent ainsi de partager un bout de code en ligne avec une simple URL. Ainsi ton collègue peut continuer à travailler dessus, etc …
Rien à payer
Le dernier avantage d’un éditeur de code est qu’ils sont gratuits. Certains éditeurs de code « classiques » sont extrêmement performant mais sont payant. C’est notamment le cas de la suite JetBrains. Des IDE puissants mais qui ont un cout (une centaine d’euros à l’année).
Les éditeurs de code en ligne ont l’avantage d’être gratuit.
Maintenant que tu connais l’intérêt d’utiliser un éditeur de code en ligne, voici mon TOP 9
CodePen
Surement l’un des éditeurs de code en ligne les plus utilisés et les plus populaires. CodePen te permets d’éditer du code HTML, CSS et JS en ligne.
Il se divise en 3 colonnes (HTML / CSS / JS). Tu écris ton code dans chaque partie et tu peux voir le résultat directement dans la partie basse.
Avec son thème sombre, il est plutôt agréable à utiliser. Beaucoup de personne l’utilise pour montrer des créations qu’ils réalisent. Par exemple, tu peux créer un menu hyper design, avec de belles animations, l’enregistrer et le publier à d’autres.
Si tu as besoin du jQuery ou d’autres librairies, aucun souci, tu peux les ajouter facilement depuis une liste déroulante.
Je m’inspire souvent de code que je trouve sur CodePen dans mes projets.
Il n’y a pas besoin de se connecter ou de créer de compte pour commencer à l’utiliser.
JSFiddle
Le deuxième éditeur de code le plus populaire.
JSFiddle, reprend les mêmes principes que CodePen. Un écran séparé en quatre parties. Cette fois ci, découpé en carrés équivalent.
Dans le même principe que CodePen, tu peux facilement rajouter des librairies externes pour tester des bouts de code.
Je vois très régulièrement des personnes qui postent un bout de code créé avec JSFiddle sur Stackoverflow. En effet, lorsque tu es bloqué sur une partie de ton code, et pour que les gens puissent t’aider correctement, tu peux réécrire ce bout de code sur JSFiddle et le partager via une URL, puis la poster sur Stackoverflow en expliquant le contexte aux gens.
Ainsi il est beaucoup plus facile de comprendre le problème et de pouvoir t’aider.
Tu peux retrouver un exemple ici : https://stackoverflow.com/questions/31553389/how-to-get-current-value-of-a-bootstrap-dropdown?rq=1
Tu vois que dans la réponse donnée, la personne met un lien (sur « DEMO ») qui renvoie sur JsFiddle avec le bout de code en question.
CodeShare.io
Un éditeur de code en ligne que je trouve très utile. Non pas par ces langages proposés ou ces fonctionnalités de folies mais plutôt par son aspect collaboratif.
CodeShare.io est une sorte de Skype du code. Il permet de faire une réunion avec des collègues pour partager du code. Chaque participant active sa caméra, comme dans une vraie réunion et l’écran principal n’est pas une fenêtre de discussion mais un éditeur de code.
Il devient donc très pratique d’expliquer du code à une personne, de donner un petit cours ou une formation, etc …
Stackblitz, le roi des frameworks JS
Avec l’émergence du JS, beaucoup de développeurs se lancent dans l’aventure des framework JS : Angular, React, VueJS, …
Il n’est pas toujours simple d’initialiser un nouveau projet lorsque l’on débute. Il faut souvent installer des choses, ajouter des extensions, des plugins, régler les petites erreurs, …
Stackblitz, propose de commencer directement à coder avec toute la base nécessaire. C’est extrêmement pratique quand tu veux simplement t’initier à un framework sans trop te prendre la tête et te concentrer sur l’essentiel : le code.
Lorsque tu arrives sur l’accueil de Stackblitz, plusieurs choix s’offrent à toi (Angular, React, Vue, Ionic, React, TypeScript, …). Tu as simplement à en choisir un et c’est parti, tout est prêt pour commencer.
CodeSandbox.io
Dans la même lignée que Stackblitz : CodeSandBox.io
On retrouve ici le même principe. Tu choisis ta technologie, ton Framework et c’est parti pour coder. Les mêmes frameworks JS sont présent mais CodeSandBox proposent un peu plus de technologies que Stacblitz.
On retrouve là aussi la séparation de l’écran en 3 parties. A gauche, l’explorateur de fichiers, au milieu le code avec les différents onglets et à droite, le navigateur pour avoir le rendu.
Tu as la possibilité de récupérer l’URL fournit pour l’ouvrir dans un nouvel onglet de ton navigateur pour avoir un rendu sur une page en taille réelle.
Gitpod
Gitpod est un éditeur de code en ligne que je trouve super intéressant et très complet. Son principal atout est de pouvoir se connecter à Github.
Tu connecte ton Github avec Gitpod, tu choisis le repository que tu souhaites éditer et tu peux ainsi modifier ton projet.
C’est très pratique si tu ne travailles pas avec ton ordinateur habituel ou que tu as besoin de faire une correction rapide sur ton repo.
Son interface ressemble exactement à celle de VS code. Ainsi, si tu à l’habitude de l’utiliser, tu auras tout tes repères.
Une fois que tu as fini tes modifications, tu as un invité de commande en partie basse qui te permettra de taper toute tes lignes de commande Git. Tu peux ainsi commiter et envoyer les modifications sur ton repo.
La version gratuite est suffisante si tu modifie uniquement des repo publics. Il faudra passer à une version payante pour les repos privés et une utilisation plus longue (50 heures par mois en gratuit).
Glot.io
La simplicité avant tout
Glot.io est un éditeur de code en ligne très simple à utiliser avec de nombreux langages.
Lorsque tu arrives sur l’interface as le choix entre plus de 35 langages différents, ce qui est énorme. Tu choisi ton langage et tu accèdes à une page assez basique avec en partie haute le code et en partie basse le résultat.
Tu écris ton bout de code, tu test, tu vois le résultat direct. Simple, facile, efficace.
Glot.io offre la possibilité de pouvoir enregistrer ton code et ainsi pouvoir le partager via une URL.
HTMLed.it
Cet éditeur de code en ligne est dans un style un peu « old shcool » mais très pratique notamment lorsque l’on débute avec le HTML.
Avec HTMLed.it tu ne pourras faire que du HTML mais du beau HTML.
Il se divise en 2 parties, à gauche le rendu et à droite le HTML. Il La coloration syntaxique est plutôt bien faite. De plus, dans la partie gauche, tu retrouves un éditeur de texte, qui lorsque tu écris dedans, ajoute le HTML dans la partie droite. Je trouve ça très pratique pour créer des pages HTML rapidement et t’aider à construire un élément quand tu n’es pas encore très à l’aise avec le HTML (comme les tableaux par exemple).
Il offre une fonctionnalité « Nettoyer », qui te permet de retirer tous les éléments inutiles de ta page : balise vide, balise avec un seul espace, commentaires, … Tu as aussi la possibilité de supprimer les classes et ID, …
Un bon éditeur de code en ligne pour débuter rapidement dans le HTML.
Editeur de code en ligne : l’essentiel à retenir
Si tu souhaites te lancer rapidement dans l’apprentissage d’un nouveau langage, d’un framework ou d’une technologie, utilise un éditeur de code en ligne.
Ils ont l’avantage d’être rapide à utiliser, ne pas se prendre la tête avec la configuration ou les plugins à ajouter et d’être collaboratif. Ils ont bien évolué avec le temps et sont aujourd’hui très puissant.
Bien sûr, ils ne remplaceront pas un vrai éditeur de code ou un IDE mais ils offrent suffisamment de fonctionnalités pour te lancer à tes débuts.
Les éditeurs de code sont nombreux sur le web et ont chacun des fonctionnalités différentes. Choisi celui qui te convient en fonction de tes besoins du moment.
Si tu as l’habitude d’en utiliser un autre, dis-le-nous dans les commentaires.
