9 meilleurs éditeurs de code en ligne pour les applications Web

Quelle est la prochaine meilleure chose à coder? L’éditeur de code, bien sûr!


Les éditeurs de code sont la deuxième raison la plus importante des guerres de flamme des programmeurs (la première étant le formatage du code).

Pour certains, Vim est le seul éditeur sensé jamais créé, tandis que pour d’autres, tout ce qui ne correspond pas au monde d’Emacs qui tourne en spirale comme Inception ne convient que pour le ridicule. Si vous cherchez mal l’attention, tout ce que vous avez à faire est d’aller dans une communauté de programmation et de démarrer un fil comme “Pourquoi je pense que X (choisissez n’importe quel éditeur de code populaire) est nul / est le meilleur”, prenez de la bière et détendez-vous.

Les arguments, contre-arguments et insultes continueront de couler dans la discussion toute la nuit, et il faudra plusieurs mois avant que le venin dans le fil se refroidisse.

La question est: pourquoi?

Bien sûr, les êtres humains parviennent à faire grand cas de tout, mais je pense que les éditeurs de code sont particuliers en ce qui concerne les programmeurs. Un programmeur typique passe presque tout son temps (plus de 98%, si je parie) sur l’éditeur de code de son choix. Ils connaissent leur chemin dans l’éditeur – ses forces, ses faiblesses, ses limites, ses caprices et ses joyaux cachés.

Rien n’est plus frustrant que d’avoir à lutter avec l’éditeur lorsque vous écrivez du code (pensez à quel point c’est ennuyeux lorsque vous devez envoyer un e-mail long et urgent sur un nouveau clavier!). Les éditeurs de code réduisent la friction mentale et vous permettent d’être plus productif, c’est pourquoi ils sont si importants et attirent tellement l’attention.

Alors, quel est le meilleur éditeur de code?

Honnêtement, je n’oserai même pas y aller! �� ��

Cependant, si vous êtes dans le développement Web, il y a une alternative à laquelle je veux que vous pensiez – les éditeurs de code en ligne!

En bref, ce sont des éditeurs qui résident entièrement sur un serveur distant et sont accessibles via le navigateur.

Ça a l’air bizarre, à droite?

Je le ressentais aussi lorsque je les ai rencontrés il y a 3-4 ans. Pourquoi diable quelqu’un devrait-il vouloir tout remettre à un stupide navigateur?

Peut-il même rivaliser avec un éditeur de code installé en mode natif?

Transforme que dans la plupart des cas, et en particulier pour le développement Web, la réponse est oui. Maintenant, même si je n’ai pas adopté les éditeurs en ligne comme moyen principal, je me retrouve à les utiliser de plus en plus dans des scénarios spécifiques.

Avant de nous plonger dans les éditeurs de code à utiliser, arrêtons-nous et réfléchissons aux moments où les éditeurs de code en ligne peuvent avoir un sens.

Configuration zéro

Je ne sais pas pour vous, mais configurer mon éditeur préféré à mon goût sur un nouveau système n’est pas quelque chose que j’attends avec impatience. Plugins, thèmes, polices, raccourcis, extraits, paramètres. . . Il y a une liste interminable de choses qui doivent être équilibrées avant que le tout ne devienne utilisable. Il est facile d’oublier quelque chose, mais de s’énerver plus tard lorsque votre flux de travail est interrompu.

En revanche, rien à voir avec un éditeur en ligne une fois la première configuration terminée. Constructions officielles, mises à jour, versions nocturnes, plates-formes prises en charge, architecture système, synchronisation FTP, pipelines CI / CD – rien de tout cela tant que vous avez un navigateur!

Collaboration

Plus souvent qu’autrement, vous devez collaborer avec d’autres développeurs lorsque vous résolvez des problèmes ou déboguez quelque chose.

L’éditeur de code traditionnel n’est pas conçu pour cela – il n’y a pas de place pour l’édition, le commentaire ou la mise en évidence de code simultané, et il est difficile d’ajouter un support pour cela.

Sécurité des données

Maintenant, il va de soi qu’aucun projet n’est aujourd’hui sans contrôle de version, ce qui signifie qu’une copie du code existe à tout moment sur le référentiel. Cela dit, il y a des moments où le contrôle de version n’est pas suffisant:

  • Vous oubliez de pousser les commits nouvellement créés et votre ordinateur portable prend feu.
  • Vous disposez d’autres fichiers et vidages de données importants avec lesquels votre code interagit, bien qu’ils ne fassent pas partie de l’application en direct. Que leur arrive-t-il si votre ordinateur portable prend feu?

(D’accord, on dirait que je suis obsédé par les cahiers qui prennent feu, mais vous comprenez bien, non?!)

Appliquer la discipline

Cela pourrait tout aussi bien être contesté devant le tribunal des droits des développeurs (si une telle chose existe), mais la vérité est que les développeurs sacrifient rarement leurs caprices pour le bien commun.

Par exemple, un passionné de Sublime Text inconditionnel embrassera à jamais tous les excellents éditeurs de JetBrains et trouvera toutes les occasions de souligner sa nature gourmande en mémoire et ses performances plus lentes.

Il en va de même pour les onglets par rapport aux espaces (ou même les onglets à deux espaces par rapport aux onglets à quatre espaces) – vous êtes naïf si vous pensez que les programmeurs de votre équipe ne verrouillent pas les klaxons.

Dans de tels cas, un éditeur en ligne est une aubaine – vous décidez des paramètres des projets (même comment le code doit être formaté), et il refusera simplement d’accepter le travail jusqu’à ce qu’il respecte toutes les normes. Dur sur l’individu, peut-être, mais idéal pour le projet!

À l’heure actuelle, je suis à court de cas d’utilisation, alors passons à quelle option avons-nous en ce qui concerne les éditeurs de code en ligne, en particulier pour le développement Web.

JSFiddle

Tandis que JSFiddle ne peut pas remplacer un éditeur de texte à part entière, il fait un sacré bon travail de gestion de scripts frontaux uniques.

C’est tellement populaire que Q&Un site comme StackOverflow prend déjà en charge l’intégration de liens JSFiddle directement dans leur plateforme.

Pour que les choses démarrent rapidement, JSFiddle propose des plaques de départ au début; ce qui signifie que si vous souhaitez obtenir une démonstration de, disons, React, a commencé, tout ce que vous avez à faire est de cliquer sur le bouton correspondant et de commencer à écrire le code. Une fois que vous appuyez sur Enregistrer, le «violon» est enregistré, vous obtenez une URL permanente (consultez ce stupide violon que j’ai créé: https://jsfiddle.net/tuqd76c4/ et notez que vous pouvez apporter vos modifications et appuyez sur Enregistrer pour créer un nouveau version de cette URL).

Voici ce qui fait de JSFiddle une plateforme viable pour le développement Web frontal:

  • Gratuit à utiliser (pas de frais cachés ou de fonctionnalités freemium). JSFiddle se prend en charge par le biais d’annonces (au moins au moment de la rédaction), et vous pouvez voir une annonce Adobe dans le coin inférieur gauche de la capture d’écran ci-dessus.
  • Fonctionnalités de collaboration de code – idéal pour construire des concepts ensemble, des interviews, etc..
  • Plusieurs dispositions, tailles de police, thèmes clairs / sombres, etc..
  • Formatage du code (rangement), prise en charge à venir des linters (CSS et JS), et plus encore.

Et maintenant, sanglot, sanglot, pour les mauvaises choses:

  • JSFiddle est un éditeur purement frontal. Il n’y a aucun moyen de coder et d’exécuter votre langue backend préférée.
  • Il n’y a aucun concept de fichiers et de dossiers ici (ou de téléchargements, d’ailleurs). Tout ce que vous avez, c’est un seul espace pour le code, peu importe sa quantité.
  • JSFiddle ne peut pas être utilisé pour héberger du code sur votre serveur. Le code doit être sur JSFiddle et est public tout le temps.
  • Il n’y a aucun moyen de construire un pipeline CI / CD, d’utiliser Git, etc..

Cela dit, JSFiddle a son point fort et brille lorsque vous avez besoin de préparer des preuves de concept et de collaborer à la vitesse de la lumière. C’est et restera une identité majeure chez les éditeurs en ligne.

CodeSandbox

CodeSandbox peut être considéré comme une version beaucoup plus puissante et complète de JSFiddle. Fidèle à son nom, CodeSandbox offre une expérience complète d’éditeur de code et un environnement en bac à sable pour le développement frontal.

CodeSandbox est une véritable puissance et un produit doux et sucré. Je serais à court de papier si j’essaie d’énumérer tous ses avantages, mais voici quelques fonctionnalités de tueur:

  • Support NPM: Oui, vous pouvez ajouter à peu près n’importe quel package disponible sur npm.
  • Fichiers, dossiers, modules: Vous pouvez diviser votre code en plusieurs fichiers, ajouter / supprimer des images du dossier public et créer / importer des modules comme bon vous semble. Le flux de travail reflète celui d’un bundle de modules moderne, vous n’avez donc pas besoin de configurer (presque) quoi que ce soit.
  • Prise en charge de TypeScript, rechargement à chaud, exportation GitHub, hébergement de fichiers statiques, etc..
  • Il est construit sur Éditeur monégasque, la même bête qui alimente le favori VSCode éditeur. Cela apporte des fonctionnalités puissantes telles que «Aller à», «Rechercher des références» et la refactorisation nécessaire à portée de main!
  • Prise en charge des extraits de code pour Emmet
  • DevTools intégrés, linting, superpositions d’erreurs, frameworks de test (Jest), raccourcis clavier, etc..
  • Cli puissant pour importer directement des projets locaux dans CodeSandbox.

Bien que la version gratuite de CodeSandbox ne prenne pas en charge le code privé, vous pouvez obtenir cette fonctionnalité (et augmenter les limites de taille dans l’ensemble) en les aidant à Patreon pour aussi peu que 5 $ par mois (payez ce que vous voulez, jusqu’à 50 $ par mois).

CodeAnywhere

Un problème avec la plupart des éditeurs de code de cette liste (du moins jusqu’à présent) est qu’ils s’attendent à ce que vous conserviez le code sur leurs serveurs à tout moment, ou vous demandent de synchroniser régulièrement le code via la ligne de commande.

Pas si avec CodeAnywhere.

À son apogée, CodeAnywhere a deux fonctionnalités qui se démarquent pour moi:

  • Images de conteneurs prédéfinies pour plus de 72 langages de programmation et frameworks. Cela signifie que vous pouvez provisionner un nouvel environnement de développement directement depuis l’éditeur! Bien sûr, le code est automatiquement hébergé sur le conteneur nouvellement créé et les fichiers sont servis directement à partir de là.
  • Connectez-vous à tout. Oui, littéralement n’importe quoi. Vous n’êtes pas obligé de stocker votre code sur les serveurs de CodeAnywhere. Que votre code réside sur FTP, sur des plateformes de partage de fichiers comme Dropbox, Amazon S3 ou sur des plateformes de contrôle de version sophistiquées comme GitHub, vous pouvez facilement configurer CodeAnywhere pour lire et écrire sur cette source, en utilisant l’éditeur de code uniquement pour. . . Eh bien, l’édition de code. ��

Une dernière chose que je voudrais souligner: si vous n’êtes pas à l’aise avec Git en ce qui concerne l’affichage de l’historique et des différences, CodeAnywhere peut vous donner un soupir de soulagement. L’éditeur utilise son système de comparaison pour comparer les fichiers, ce qui vous permet de comparer deux fichiers sur deux révisions (une révision est créée chaque fois que vous enregistrez un fichier).

Il y a cependant un léger problème avec les révisions – la version gratuite vous permet de ne conserver qu’une seule révision, tandis que le plus petit plan payant autorise 20 révisions au maximum. De manière générale, ce n’est pas un problème car vous voulez rarement regarder au-delà de la dernière 20e révision, mais comme la plupart des programmeurs ont l’habitude de cliquer sur Enregistrer plusieurs fois par minute, cela peut devenir douloureux..

Tout compte fait, CodeAnywhere est une offre solide et agréable pour ceux qui veulent passer au Cloud et y rester. �� Étant donné que ses pouvoirs s’étendent au-delà du code frontal, à mon avis, il est fortement recommandé!

StackBlitz

Si vous êtes principalement dans le front-end et que vous ne pouvez pas vous éloigner de l’interface VSCode, StackBlitz a été créé juste pour vous.

Vous ne voyez rien de spécial? Je ne l’ai pas fait non plus jusqu’à ce que je fasse défiler un peu et clique sur le bouton angulaire. Boom!

Devinez quoi, ce n’est pas délibérément créé pour ressembler à VSCode – il est construit sur l’éditeur VSCode! À tel point que vous pouvez installer des extensions, rechercher dans les dossiers et organiser les fichiers exactement comme vous l’attendiez d’une instance VSCode standard.

Mais attendez, il y a plus!

Vous avez peut-être remarqué ou non:

  • Toutes les applications créées sur StackBlitz sont également déployées automatiquement sur leurs serveurs! Ainsi, cette application de jouet angulaire que je viens de créer est hébergée automatiquement sur https://angular-yvyi2j.stackblitz.io/. Très probablement, l’URL fonctionne toujours (mais se chargera lentement, cependant, comme vous vous y attendriez lors d’un hébergement gratuit)!
  • Vous pouvez créer et partager le projet. Pendant le partage, vous contrôlez mieux ce que les autres peuvent faire.
  • Vous pouvez vous connecter à un référentiel GitHub et également laisser le code être tiré / poussé directement à partir de là. Ou vous pouvez simplement télécharger le projet sous forme de fichier zip dans le bon sens.

Mais attendez, il y a plus!

Sérieusement! ��

Voici la liste des fonctionnalités officielles proposées par StackBlitz:

  • Prise en charge native de Firebase (ce que je n’utilise pas personnellement, mais bon, c’est une aubaine pour ceux qui ne veulent pas plonger dans les profondeurs troubles du backend)
  • Intellisense, recherche de projet
  • Rechargement à chaud pendant la frappe
  • Importer des packages npm
  • Modifier hors ligne lorsqu’il n’est pas connecté!

StackBlitz est plein de (belles) surprises quand il s’agit de lever les obstacles au développement et au déploiement Web. L’intégration de VSCode dans votre site Web n’est plus un rêve!

AWS Cloud9

Cloud9 était sans doute le premier IDE basé sur un navigateur qui offrait des fonctionnalités sérieuses et prenait l’idée du navigateur en tant qu’éditeur grand public. Pas étonnant qu’Amazon l’ait acquis plus tard, et aujourd’hui, Cloud 9 fait partie des offres AWS.

Si vous êtes même connecté à distance (ou intéressé) à la plate-forme AWS, Cloud9 est l’endroit où se termine votre recherche d’un éditeur parfait (d’accord, presque parfait). Voyons pourquoi:

  • Il n’y a pas de frais supplémentaires pour l’utilisation de Cloud9. Vous pouvez connecter Cloud9 à une instance de calcul AWS existante / nouvelle et vous ne payez que pour cette instance. Il est également possible de se connecter à un serveur tiers via SSH – exactement sans frais! ��
  • Prise en charge de première classe pour les applications AWS Serverless (débogage, etc.)
  • Accès direct du terminal à AWS depuis l’éditeur (honnêtement, un terminal à onglets décent dans l’éditeur est ce qui me manque encore dans VSCode)
  • Plus de 40 langages de programmation pris en charge (Go, C ++, Ruby, Node, Python, PHP, Java … faites votre choix)

Les fonctionnalités de collaboration dans Cloud9 sont également souhaitables, ce qui permet d’effectuer des examens / entretiens de manière transparente.

Une autre fonctionnalité tueur est une lecture de style vidéo des modifications apportées à un fichier, ce qui rend le processus de révision une joie:

Mon conseil?

Si vous êtes dans AWS, alors n’attendez pas et prenez Cloud9 tout de suite. Et si vous n’êtes pas encore sur le cloud, mais que vous avez pensé à bouger, adoptez AWS et intégrez Cloud9 dans votre flux de travail. Vous ne pouvez pas prendre une meilleure décision de toute façon!

CodeEnvy

CodeEnvy est un puissant éditeur de cloud qui utilise des conteneurs Docker pour vous permettre d’exécuter des environnements de développement préconfigurés et isolés. Il est construit sur l’IDE cloud Eclipse Che open source et offre une tonne d’évolutivité et d’options DevOps.

Au moment de l’écriture, CodeEnvy a été acquis par RedHat (qui, de manière amusante, a lui-même été acquis par Oracle!).

Gitpod

Gitpod est une version rafraîchissante des éditeurs de code cloud (ou des IDE, si vous voulez) qui vise à garder votre code toujours testé et à jour. En d’autres termes, il est profondément intégré à GitHub, et chaque fois que vous ajoutez du code, il exécute vos tests et vos pipelines CI / CD pour vous assurer que le code est toujours à 100% d’intégrité.

Cela vaut la peine de vérifier si vous aimez l’expérience VSCode et que vous voulez quelque chose qui prend en charge tous les principaux langages et frameworks back-end / front-end (Django, Rails, Revel, vous l’appelez).

Theia

Si vous êtes un fan SOLID inconditionnel et un architecte logiciel Theia IDE va titiller votre os de séparation des préoccupations. C’est un IDE de code codé TypeScript (cinq points pour le style tout de suite!) Qui a un front-end et un backend parfaitement séparés. Le front-end s’exécute dans un navigateur, tandis que le backend peut être n’importe où – machine locale ou cloud!

Mais ce n’est pas tout – le front-end peut être exécuté comme une application Electron avec un environnement de navigateur entièrement fonctionnel et isolé, vous donnant l’apparence d’une application de bureau native si vous en avez envie.

Codeur

Bien que leur site Web ne le dise pas clairement, Codeur est un environnement VSCode intégré à un serveur qui peut être exécuté localement ou dans le cloud. La configuration recommandée consiste à exécuter l’EDI en tant que serveur dans le cloud et à y accéder localement via le navigateur. Il existe des images Docker prédéfinies pour des configurations sans tracas et un plan d’entreprise si vous avez besoin d’assistance ou si vous avez des besoins différents..

Conclusion

Cela couvre plus ou moins tous les IDE et éditeurs de code là-bas au moment de l’écriture. J’ai omis deux types d’offres dans cette liste: celles qui se concentrent uniquement sur des interviews et n’ont pas d’environnements à part entière (sauf notre JSFiddle classique bien-aimé, bien sûr), et celles qui ne semblaient pas offrir quelque chose substantiel et avait un peu plus qu’une page d’accueil élégante.

Si vous pensez que quelque chose mérite d’être ici, faites-le moi savoir et je vous en serai reconnaissant! ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map