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 de la guerre des flammes 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 en spirale en spirale d'Emacs n'est que ridicule. Si vous cherchez vraiment à attirer l'attention, tout ce que vous avez à faire est d'aller dans une communauté de programmation et de démarrer un fil de discussion comme «Pourquoi je pense que X (choisissez n'importe quel éditeur de code populaire) est nul / est le meilleur», prenez une bière et détendez-vous.
Les arguments, les contre-arguments et les insultes continueront à affluer dans et hors de la discussion toute la nuit, et il faudra plusieurs mois avant que le venin du fil ne se refroidisse.
La question est: pourquoi?
Bien sûr, les êtres humains réussissent à faire un gros problème avec tout, mais je pense que les éditeurs de code sont particuliers quand il s'agit de programmeurs. Un programmeur typique passe presque tout son temps (plus de 98%, si je devais parier) sur l'éditeur de code de son choix. Ils connaissent l'éditeur - ses forces, ses faiblesses, ses limites, ses bizarreries 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 courrier électronique long et urgent sur un nouveau clavier!). Les éditeurs de code réduisent les frictions mentales et vous permettent d'être plus productif, c'est pourquoi ils sont si importants et attirent autant d'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 réfléchissiez - éditeurs de code en ligne! Vous pouvez également les appeler des éditeurs de code basés sur le cloud.
Ne confondez pas l'éditeur de code avec un environnement de développement intégré (IDE). Les deux sont deux choses différentes et en tant que développeur, vous devez être familier avec ces IDE multilingue.
En un mot, ce sont des éditeurs qui résident entièrement sur un serveur distant et sont accessibles via le navigateur.
Cela semble bizarre, non?
Je l'ai ressenti aussi quand je les ai rencontrés il y a 3-4 ans. Pourquoi diable quelqu'un voudrait-il tout remettre à un navigateur stupide?
Peut-il même rivaliser avec un éditeur de code installé nativement?
En fait, 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 support 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, faisons une pause et réfléchissons au moment 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 tout ne devienne utilisable. Il est facile d'oublier quelque chose, pour être ennuyé plus tard lorsque votre flux de travail est interrompu.
En revanche, il n'y a 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 n'a d'importance tant que vous avez un navigateur!
Collaboration
Plus souvent qu'autrement, vous devez collaborons avec d'autres développeurs pour résoudre des problèmes ou déboguer quelque chose.
L'éditeur de code traditionnel n'est pas conçu pour cela - il n'y a pas de place pour l'édition, les commentaires ou la mise en évidence simultanés du code, et il est difficile d'en ajouter une prise en charge.
La sécurité des données
Désormais, il est acquis qu'aucun projet aujourd'hui n'est sans contrôle de version, ce qui signifie qu'une copie du code existe sur le référentiel à tout moment. Cela dit, il y a des moments où le contrôle de version ne suffit pas:
- Vous oubliez de pousser les commits nouvellement créés et votre ordinateur portable prend feu.
- Vous avez 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, non ?!)
Faire respecter 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é inconditionnel de Sublime Text embrassera pleinement l'un des 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 contre les espaces (ou même les onglets à deux espaces contre les onglets à quatre espaces) - vous êtes naïf si vous pensez que les programmeurs de votre équipe ne verrouillent pas les cornes.
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 adhère à toutes les normes. Dure sur l'individu, peut-être, mais super pour le projet!
À l'heure actuelle, je n'ai plus de cas d'utilisation, alors voyons quelle option nous avons en matière d'éditeurs de code en ligne, en particulier pour le développement Web.
JSFiddle
Tandis que JSFmilieu ne peut pas remplacer un éditeur de texte à part entière, il fait un sacré bon travail de gestion de scripts frontaux uniques.
Il est si populaire que les sites de questions-réponses comme StackOverflow prennent déjà en charge l'intégration de liens JSFiddle directement dans leur plate-forme.
Pour que les choses démarrent rapidement, JSFiddle propose des passe-partout au départ; ce qui signifie que si vous voulez obtenir une démo de, disons, React, démarré, tout ce que vous avez à faire est de cliquer sur le bouton approprié et de commencer à écrire le code. Une fois que vous appuyez sur Enregistrer, le «violon» est enregistré, vous obtenez une URL permanente (Découvrez ce violon stupide 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 plate-forme viable pour le développement Web frontal:
- Utilisation gratuite (pas de frais cachés ni de fonctionnalités freemium). JSFiddle se prend en charge grâce à des publicités (au moins au moment de la rédaction), et vous pouvez voir une publicité Adobe en bas à gauche de la capture d'écran ci-dessus.
- Fonctionnalités de collaboration de code - idéales pour construire des concepts ensemble, des entretiens, etc.
- Plusieurs mises en page, tailles de police, thèmes clairs / sombres, etc.
- Mise en forme du code (rangement), prise en charge prochaine des linters (CSS et JS), etc.
Et maintenant, sanglotez, sanglotez, pour les mauvaises choses:
- JSFiddle est un éditeur purement frontal. Il n'y a aucun moyen de coder et d'exécuter votre langage backend préféré.
- Il n'y a pas de concept de fichiers et de dossiers ici (ou de téléchargements, d'ailleurs). Tout ce que vous avez, c'est un espace unique pour le code, quelle que soit la 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 créer un pipeline CI / CD, d'utiliser Git, etc.
Cela dit, JSFiddle a son sweet spot et brille lorsque vous avez besoin de fournir des preuves de concept et de collaborer à la vitesse de la lumière. C'est et restera une identité majeure parmi les éditeurs en ligne.
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 gardiez le code sur leurs serveurs à tout moment, ou vous obligent à 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 conteneur prédéfinies pour plus de 72 langages et frameworks de programmation. 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 à n'importe quoi. 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 plates-formes de partage de fichiers telles que Dropbox, Amazon S3 ou sur des plates-formes de contrôle de version sophistiquées telles que 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 j'ai envie de souligner: si vous n'êtes pas à l'aise avec Git en ce qui concerne la visualisation de l'histoire et des différences, CodeAnywhere pourrait vous sentir comme un soupir de soulagement. L'éditeur utilise son système de différences pour comparer les fichiers, ce qui vous permet de comparer deux fichiers sur deux révisions quelconques (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 au maximum 20 révisions. 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 Save plusieurs fois par minute, cela peut devenir douloureux.
Au final, CodeAnywhere est une offre solide et agréable pour ceux qui souhaitent passer au cloud et y rester. 🙂 Étant donné que ses pouvoirs vont au-delà du code frontal, à mon avis, il est fortement recommandé!
CodeSandbox
bac à sable de code 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 sandbox pour le développement front-end.
CodeSandbox est une véritable centrale électrique et un produit sucré et sucré. Je manquerais de papier si j'essayais d'énumérer tous ses avantages, mais voici quelques fonctionnalités qui tue:
- 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 bundler 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 Editeur Monaco, 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 d'extraits de code pour Emmet
- DevTools intégrés, linting, superpositions d'erreur, 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).
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 n'ai pas fait trop jusqu'à ce que je fasse défiler un peu vers le bas et clique sur le bouton Angular. 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 comme vous l'attendiez d'une instance VSCode normale.
Mais attendez, il y a plus!
Vous avez peut-être remarqué ou non que:
- 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 (se chargera lentement, cependant, comme vous vous en doutez lorsqu'elle est hébergée gratuitement)!
- Vous pouvez bifurquer et partager le projet. Tout en partageant, vous contrôlez plus précisément ce que les autres peuvent faire.
- Vous pouvez vous connecter à un référentiel GitHub et également laisser le code être directement extrait / poussé à partir de là. Ou vous pouvez simplement télécharger le projet sous forme de fichier zip de la bonne manière.
Mais attendez, il y a plus!
Sérieusement! 😀
Voici la liste des fonctionnalités officielles offertes 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 projets
- Rechargement à chaud à mesure que vous tapez
- Importer des packages npm
- Modifiez hors ligne lorsque vous n'êtes pas connecté!
StackBlitz est plein de (belles) surprises lorsqu'il s'agit d'éliminer les obstacles du développement et du déploiement Web. Intégrer 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 reprenait l'idée du navigateur comme éditeur grand public. Pas étonnant qu'Amazon l'ait acquis plus tard, et aujourd'hui, Cloud9 fait partie des offres AWS.
Si vous êtes même attaché à distance (ou intéressé par) la plate-forme AWS, Cloud9 est l'endroit où votre recherche d'un éditeur parfait (d'accord, presque parfait) se termine.
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 - sans aucun frais! 🙂
- Prise en charge de premier ordre des applications AWS Serverless (débogage, etc.)
- Accès direct au terminal à AWS depuis l'éditeur (honnêtement, un éditeur décent, le terminal à onglets 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, permettant de mener des révisions / entretiens de manière transparente.
Une autre fonctionnalité qui tue est une lecture de style vidéo des modifications apportées à un fichier, ce qui rend le processus de révision un plaisir:
Mon conseil?
Si vous aimez AWS, n'attendez pas et prenez Cloud9 tout de suite. Et si vous n'êtes pas encore sur le cloud mais que vous envisagez de faire un pas, adoptez AWS et intégrez Cloud9 dans votre flux de travail. Vous ne pouvez pas prendre une meilleure décision de toute façon!
Gitpod
GitpodGenericName 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 s'assurer que le code est toujours à 100% d'intégrité.
Vaut le détour 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 inconditionnel de SOLID et un architecte logiciel de pointe, le Théia IDE chatouillera votre os de séparation des soucis. C'est un IDE de code codé TypeScript (cinq points pour le style tout de suite!) Qui a un frontal 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 frontal peut être exécuté comme une application Electron avec un environnement de navigateur isolé entièrement fonctionnel, vous donnant l'apparence d'une application de bureau native si vous en avez envie.
GitHub Codespaces
Espaces de codes GitHub fournit des machines virtuelles performantes pour exécuter des codes afin de développer des applications Web. En utilisant Visual Studio Code qui comprend un éditeur et un écosystème complet, vous trouverez plus facile de travailler dans le navigateur.
Essayez le dernier environnement de développement pour les projets, ainsi que des images prédéfinies. Vous bénéficierez d'une faible latence dans diverses régions en faisant évoluer vos machines virtuelles jusqu'à 64 Go de RAM et 32 cœurs. Commencez à coder avec les environnements standardisés, les spécifications matérielles, les paramètres de l'éditeur, les extensions et les exigences d'exécution.
Vous pouvez isoler les dépendances entre les projets avec docker-compose et les conteneurs. De plus, prévisualisez facilement les modifications que vous avez apportées dans le navigateur et partagez les ports publics et privés avec vos coéquipiers. Vous pouvez également modifier ou ajouter même des détails ringards comme les espaces, les onglets, la lumière, l'obscurité, l'embellissement, la beauté, la solarisation, le Monokai et bien d'autres.
Les débutants qui veulent tenter leur chance peuvent utiliser GitHub Codespaces gratuitement avec des avantages limités, mais vous aurez suffisamment de fonctionnalités pour continuer. Si vous êtes une équipe ou une entreprise, vous pouvez commencer à utiliser GitHub Codespaces à 40 $/utilisateur/an.
JetBrains
Obtenez en quelques secondes des environnements de développement de cloud spatial frais, reproductibles, prêts à l'emploi et automatisés et commencez à coder avec JetBrains IDE – Espace. C'est la solution unique pour les projets logiciels et les équipes en prenant la responsabilité du cycle de développement complet à partir des pipelines CI/CD et en hébergeant les référentiels Git jusqu'aux packages de publication.
L'espace est la machine virtuelle dédiée avec le conteneur Docker. Vous pouvez installer toutes les bibliothèques et outils essentiels dont vous avez besoin dans le projet. Simplifiez et accélérez la onboarding expérience en partageant et en reproduisant les espaces de travail de codage quand vous le souhaitez.
Permettez aux nouveaux arrivants de commencer à développer un code instantanément sans perdre de temps à développer une machine locale. Vous obtiendrez un IDE complet prêt à l'emploi chaque fois que vous aurez besoin de commencer à écrire le code, à le déboguer et à l'exécuter en quelques secondes pour tester la sortie. JetBrains offre une plate-forme centralisée pour gérer les environnements de développement.
Tout ce que vous faites et chaque ressource que vous utilisez est suivi en un seul endroit. Vous pouvez également intégrer assez facilement les ressources dans le pipeline de développement. Selon votre projet, vous pouvez choisir le type de machine virtuelle préférable pour s'adapter à la taille du projet. L'espace économisera vos ressources en hibernant l'espace de travail de codage afin que vous puissiez commencer à travailler dessus après la pause.
Commencez votre balade aujourd'hui et découvrez gratuitement la beauté de cette bête.
CodeTasty
CodeTasty est un IDE cloud extensible, intelligent et moderne avec de nombreuses fonctionnalités supplémentaires que vous allez adorer. Il vous aide à écrire du code propre et lisible plus intelligemment en temps réel dans votre langue préférée.
Obtenez l'éditeur de code pour avoir une expérience fluide avec la compilation intégrée, la complétion de code, les outils de détection d'erreurs et bien plus encore. Ne vous inquiétez pas de la configuration ; levez-vous et commencez à travailler sur les projets juste devant vous.
Vous aurez la même sensation que de travailler avec votre bureau lorsque vous éditez vos codes dans le cloud tout en bénéficiant des mêmes performances et de la même vitesse. CodeTasty comprend les besoins de chaque développeur ; et par conséquent, vous permet d'installer autant d'extensions que vous le souhaitez pour augmenter votre productivité. De plus, il prend en charge plus de 40 langues et des centaines de lignes de code dans un seul fichier.
Essayez CodeTasty gratuitement pour obtenir un espace de travail sandbox, 2 espaces de travail FTP/SSH, une collaboration, une option de terminal et 2 collaborateurs. Vous pouvez également commencer avec un forfait payant de 4 $/mois et avoir la possibilité de réviser vos codes avant de courir.
Replit
Apprendre, écrire et créer du code avec Répéterest un IDE gratuit, intégré au navigateur et collaboratif qui prend en charge plus de 50 langues sans passer beaucoup de temps dans les configurations. Vous pouvez commencer à coder dans votre langue sur n'importe quel appareil, système d'exploitation et plate-forme.
Invitez vos coéquipiers, collègues ou amis à modifier le code dans Google docs. Vous pouvez importer votre code dans GitHub pour exécuter et collaborer avec les référentiels GitHub sans aucune configuration. Que vous soyez à l'aise avec C++, Python, CSS ou HTML, vous pouvez écrire le code et le modifier sur une seule plateforme.
De plus, dès que vous êtes prêt avec le code, il est instantanément mis en ligne dans le monde. Si vous souhaitez également en savoir plus sur le code, Replit compte plus de trois millions de technologues, de créatifs, de programmeurs passionnés, etc. Avec une collaboration en temps réel avec vos équipes, votre équipe sera plus productive. De plus, vous pouvez créer des applications, des bots, etc., à l'aide de plugins lors du codage. L'outil vous aide également à développer vos projets directement depuis votre navigateur.
Créez un compte et commencez à coder maintenant.
PaizaCloud
Créez des applications Web dans votre navigateur avec PaizaCloud IDE. Il s'agit d'un environnement de développement Web pour Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress, etc.
PaizaCloud vous permet d'écrire vos codes de manière transparente sans vous soucier de la configuration de l'environnement. Ouvrez simplement le navigateur et votre environnement sera prêt en trois secondes. Que vous utilisiez la version Mac, iPad, OS ou Windows, vous pouvez utiliser le même environnement dans tous les navigateurs.
De plus, vous pouvez utiliser des shells Linux pour configurer plus facilement et de manière plus flexible des environnements de développement basés sur le Web. Vous pouvez également publier les services idéaux pour votre portefeuille, comme les services d'hébergement, en passant au plan de base.
Exécutez des commandes, gérez des fichiers, modifiez des codes et bien plus encore dans le navigateur lui-même. PaizaCloud élimine le besoin d'ajouter des commandes telles que vim, ssh, etc., pour modifier des fichiers ou se connecter. Au lieu de cela, vous pouvez facilement et efficacement faire fonctionner les serveurs comme si vous exécutiez un ordinateur de bureau.
Faites un essai routier avec le plan gratuit avec 2 cœurs et 2 Go de mémoire. Ou profitez de la durée de vie illimitée du serveur avec 9.80 $/mois et obtenez un espace disque supplémentaire de 1 Go.
Conclusion
Cela couvre plus ou moins tous les IDE et éditeurs de code au moment de l'écriture. J'ai omis deux types d'offres dans cette liste: celles qui se concentrent uniquement sur interviews et n'ont pas d'environnements à part entière (sauf notre classique bien-aimé JSFiddle, bien sûr), et ceux qui ne semblaient pas offrir quelque chose de substantiel et n'avaient guère plus qu'une page d'accueil élégante.
Si vous avez besoin de quelque chose de léger pour le développement Web, vous pouvez explorer ces éditeurs de code.
