Cursor, GitHub Copilot, v0 de Vercel... Quels outils utilises-tu pour développer ? - RÉPONDEUR #5

Saison 2 • Épisode 9 17:44

"Vous êtes bien sur le répondeur de Human Coders !"

Aujourd’hui, on a le choix parmi un tas d’outils pour développer. Mais lesquels choisir, et comment ?

Dans cet épisode, nos invité·e·s ont beaucoup parlé d’éditeurs de code utilisant l’IA comme Cursor, ou encore IDX de Google qui permet de coder directement dans un navigateur web. Un outil vraiment pratique utilisant Gemini et qui permet de coder sur n’importe quelle machine sans réinstallation.

Mais c’est pas tout ! Il y a aussi Tabnine, un assistant à base d’IA qui peut t’aider à coder. Ou encore Figma, qui s’est démocratisé ces dernières années. C’est devenu un outil incontournable pour réaliser des maquettes.

Et Storybook, tu connais ? C’est un projet JS qui permet de créer de la documentation technique et textuelle... Sinon, si tu cherches un moyen de générer des applications et des interfaces utilisateur de A à Z avec l’IA, alors v0 by Versel est parfait pour toi.

Nos invité·e·s nous parle aussi de Webstorm, Zed, Github Copilot…

L’épisode idéal pour te faire découvrir les outils que tu vas adopter pour le début d’année !

•• TIMECODES ••

00:00:00 Introduction
00:01:56 Camille Roux
00:04:14 Gérôme Grignon
00:08:51 Julien Moulin
00:12:27 Jean-Philippe Baconnais
00:17:11 Conclusion

•• NOS FORMATIONS ••

https://www.humancoders.com/formations

•• GUESTS ••

Gérôme Grignon, Frontend Software Engineer chez Lucca
https://fr.linkedin.com/in/gerome-grignonhttps://x.com/GeromeDEV

Julien Moulin, Formateur NestJS chez Human Coders
https://fr.linkedin.com/in/moulin-julienhttps://www.humancoders.com/formateurs/julien-moulin

Jean-Philippe Baconnais, Consultant Zenika et organisateur des Human Talks de Nanteshttps://twitter.com/JPhi_Baconnais
https://www.linkedin.com/in/jean-philippe-baconnais-931544116/https://bsky.app/profile/jeanphi-baconnais.gitlab.io

Camille Roux, directeur associé de Human Coders
https://www.linkedin.com/in/camilleroux/https://x.com/CamilleRouxhttps://bsky.app/profile/camilleroux.com

Sommaire de l'épisode
00:00:00 Introduction
00:01:56 Camille Roux
00:04:14 Gérôme Grignon
00:08:51 Julien Moulin
00:12:27 Jean-Philippe Baconnais
00:17:11 Conclusion
Transcription de l'épisode

Matthieu Segret : Bonjour à toutes et à tous, je suis Matthieu et vous êtes bien sur le répondeur des Human Coders. Je suis content d'être avec vous dans cette nouvelle édition de ce podcast où l'on va parler techno, pratiques de dev ou de sujets plus généraux, mais toujours en lien avec l'informatique.

Le concept de ce podcast est assez simple : dans chaque épisode, je vous pose une question et vous pouvez me répondre par vocal. Pour ce cinquième épisode du podcast, j'aimerais vous parler des outils que j'utilise au quotidien pour développer. J'ai par exemple travaillé dans le passé avec de nombreux éditeurs de code comme RubyMine de JetBrains, Sublime Text, Atom ou encore VS Code. Je pensais d'ailleurs que VS Code allait m'accompagner encore quelques années quand Camille m'a fait découvrir Cursor, un éditeur de code basé sur VS Code intégrant une assistance par IA. Un peu comme Copilot, l'outil m'aide dans l'autocomplétion, le refactoring, la génération et l'explication de mon code. L'ergonomie est très bien pensée et son utilisation m'est devenue indispensable au quotidien. Je me demande vraiment comment je faisais avant.

Un autre outil qui m'a pas mal servi ces derniers temps est le Live Share de VS Code, également disponible dans Cursor. Il permet de pouvoir faire du pair programming à distance. On peut non seulement faire une édition de code à plusieurs, mais également partager son terminal et son serveur web. On s'en sert pas mal avec Camille quand on souhaite développer à deux à distance. Je pourrais citer plein d'autres outils que j'utilise au quotidien comme iTerm et Oh My Zsh pour personnaliser le terminal, Docker, GitHub Desktop, Arc pour la navigation web, ou le DevTools de Chromium bien sûr.

Je vous propose dans ce cinquième épisode de nous parler des outils que vous utilisez dans votre quotidien de développeur. Lesquels vous servent, par exemple, pour développer, débugger, partager votre code, vous organiser ou encore faire des maquettes ? Est-ce que vous avez une anecdote ou une expérience sympa à nous raconter sur ce sujet ? Vous êtes bien sur le répondeur des Human Coders, laissez-nous un message après le bip.

Camille Roux : Salut Matthieu, c'est Camille, ton associé. Je voulais te parler de la stack que j'utilise pour développer. Je suis développeur Ruby et Ruby on Rails à l'origine, donc j'ai été un grand fan de RubyMine pendant très longtemps. Ces dernières années, je me suis retrouvé à faire plus souvent du TypeScript et du JavaScript, donc j'ai migré sur VS Code qui était un peu plus approprié.

On en a pas mal parlé dans un épisode précédent, mais je trouve que ces derniers temps l'écosystème a beaucoup changé, notamment avec l'arrivée des IA. D'abord avec Copilot qui s'intègre à VS Code, puis avec des IDE dédiés comme Cursor que j'utilise depuis plus de six mois maintenant. Ça a vraiment changé radicalement ma façon de développer. Je surveille aussi de très près deux autres éditeurs qui sont un peu dans la même vibe : Zed et Windsurf. Ils sont tout jeunes par rapport à Cursor, mais je suis très curieux de voir ce qu'ils vont devenir et comment ça va évoluer. C'est vraiment impressionnant et ça m'aide réellement au quotidien.

À part ça, j'ai une stack assez classique : Zsh, Oh My Zsh, je suis sur Mac avec iTerm. En navigateur, j'utilise Arc. J'adore ce navigateur, l'interface est radicalement différente des autres. Ça repose sur Chromium, donc on n'est pas perdus, mais j'aime beaucoup pouvoir être en plein écran, changer facilement d'un profil à l'autre sans avoir quinze fenêtres ouvertes. J'aime aussi la façon dont ils gèrent les onglets qui sont mis à gauche, ce qui laisse beaucoup d'espace. C'est assez innovant. Voilà, j'ai fait un petit peu le tour des outils que j'utilise au quotidien, une stack assez basique si ça peut inspirer du monde. Je te souhaite une excellente journée. Ciao Matthieu !

Design, documentation et IA dans le quotidien d'un ingénieur frontend

Gérôme Grignon : Salut Matthieu, c'est Gérôme Grignon. On m'a dit que tu cherchais des outils pour t'aider dans ton travail de développeur, ça tombe bien, j'ai une liste à te conseiller. Je suis Frontend Software Engineer chez Lucca, un éditeur de solutions RH, et on met beaucoup l'accent sur l'expérience développeur, à la fois grâce à des outils grand public mais aussi des outils internes qu'on a développés nous-mêmes.

Mon travail commence souvent par un travail de design et pour cela, j'utilise Figma. Figma est très connu pour réaliser des maquettes. C'est un outil très puissant mais qui peut être un peu brut quand on commence. Chez Lucca, on a l'avantage d'avoir toute une équipe de designers qui maîtrisent bien cet outil et ils maintiennent tout un design system et des librairies de composants. Cela permet d'utiliser toutes ces librairies et tous ces tokens, ce qui me facilite grandement la vie. On utilise toujours les bonnes couleurs et les mêmes visuels.

Pour documenter tout ce design system, on utilise Storybook. C'est un projet JS qui permet de créer de la documentation technique. On peut y importer nos composants — on utilise Angular donc tous nos composants Angular du design system sont dedans. Ça permet aussi de faire de la documentation textuelle. Par exemple, Anne-Laure vient de mettre à jour la documentation pour toute la partie formulation et le ton qu'on doit utiliser dans les messages d'erreur de nos applications pour avoir quelque chose de cohérent.

Côté développement, en IDE, j'utilise WebStorm depuis des années, c'est mon petit chouchou. Je pense que c'est important de trouver l'outil qui nous apporte l'expérience développeur qui nous correspond. Il y a Visual Studio Code qui est aussi très connu pour le développement front, mais il demande d'ajouter beaucoup de plugins pour arriver à l'expérience qu'on a avec WebStorm. C'est un choix, il faut trouver ce qui nous correspond. N'hésitez pas à tester WebStorm parce que, depuis assez récemment, il est gratuit en usage non commercial.

Sur la place de l'IA, elle est grandissante dans mon travail. Déjà pour moi, c'est l'usage de GitHub Copilot qui me sert de "petite main" dès que j'ai besoin de tâches simples, pour l'autocomplétion. J'ai la chance d'avoir un compte gratuit grâce à mes contributions open source. Quand j'ai besoin d'aller sur des choses un peu plus complexes, que ce soit du layout ou de la logique, j'utilise deux applications pour ça : v0 de chez Vercel et le tout nouveau Bolt.new qui a été créé par StackBlitz. Ils permettent d'explorer deux types de problématiques, soit du layout pour tester rapidement des choses, soit de la logique pour éviter d'avoir une énième dépendance dans nos projets.

Enfin, pour l'intégration et le déploiement, chez Lucca on utilise GitHub Actions. On utilise aussi ClickBuild, un outil interne qui nous permet de créer des scripts et d'avoir des choses intéressantes qu'on peut réutiliser dans nos projets. Chez Lucca, on a décidé d'investir dans l'expérience développeur pour créer les outils qui nous manquaient, par exemple un outil en ligne de commande qui permet d'initialiser tout notre environnement de travail. On arrive le premier jour, on n'attend pas deux semaines pour avoir un environnement qui fonctionne : en moins d'une heure, tout est OK sur le poste de travail. On a aussi tout un système de génération d'environnements à la volée qui nous aide pour avoir des espaces de démo pour nos commerciaux ou des espaces de formation pour nos clients. On a aussi créé l'équivalent de Backstage, un espace de documentation que l'on crée nous-mêmes pour répondre à nos propres besoins.

Plugins VS Code, automatisation et LLM locaux

Julien Moulin : Salut Matthieu, c'est Julien, formateur NestJS (entre autres) chez Human Coders. Je vais te parler un petit peu de ma stack développeur. Pour ma part, j'adore Mac et les environnements Mac. J'ai tout testé, Linux, Windows, mais Mac je trouve ça vraiment super simple et hyper "mignon" à utiliser. Quand on fait des lignes de code toute la journée, un environnement un peu mignon, ça ne fait pas de mal.

Au niveau des logiciels, pour écrire du code, je suis sur VS Code "sous stéroïdes" avec beaucoup de plugins. Je pourrais citer Auto Close Tag, Auto Rename Tag, et tous les plugins qui permettent, quand on est sur un framework, d'avoir les autocomplétions, les checks de version ou de code. J'utilise aussi Code Metrics pour avoir la complexité cyclomatique sur les fonctions, Codealis qui fait à peu près la même chose, et toutes les petites aides pour le web comme les aides CSS ou l'organisation des CSS avec CSS Alphabetize.

J'ai pu essayer Cursor mais comme j'utilise aussi des plugins IA sur mon VS Code, je suis plutôt habitué à ça. Pour l'IA, j'utilise l'extension Tabnine avec des modèles pré-entraînés. Très récemment, je me suis mis à installer des LLM sur ma machine avec LM Studio, ce qui est plutôt pas mal au niveau sécurité. J'utilise une extension que je teste en ce moment, qui s'appelle Continue, et qui permet de faire à peu près la même chose que Tabnine ou Copilot mais sur un LLM local.

En termes d'automatisation, j'aime bien utiliser n8n qui permet d'automatiser des tâches. Quand je fais deux ou trois fois la même chose, je me dis que c'est automatisable, et n8n permet d'enchaîner des scripts Bash ou Zsh. En parlant de Zsh, j'utilise évidemment Oh My Zsh. Pour le reste, j'ai des logiciels comme Arc pour le browser, Perplexity que j'utilise pas mal en ce moment pour rechercher plus vite sur Internet, Evernote pour organiser mes idées et Postman pour tester mes API. C'est une stack assez classique finalement, avec des outils largement répandus, mais c'est celle que j'aime utiliser.

Coder dans le cloud avec Google IDX et GitLab Duo

Jean-Philippe Baconnais : Salut Matthieu, c'est Jean-Phi, consultant chez Zenika à Nantes et co-organisateur des Human Talks sur Nantes. Je vais te citer deux outils qui m'accompagnent au quotidien dans des contextes différents : les projets IDX et GitLab Duo.

Le premier, IDX, est un projet de Google ouvert à tout le monde depuis la dernière Google Cloud Next en 2024. C'est un CDE (Cloud Development Environment), un outil qui permet d'avoir un contexte de développement dans le cloud. C'est assez intéressant de pouvoir développer sans rien avoir sur son ordi. J'ai pu ressusciter un vieux MacBook de 2007 sur lequel je ne pouvais plus faire de mise à jour d'OS. J'ai mis ChromeOS dessus, j'ai un navigateur, et en me connectant sur le site IDX, je peux développer sur mes projets GitHub. IDX ouvre une instance de VS Code dans laquelle on fait notre développement comme d'habitude. On peut configurer des extensions et la configuration va être sauvegardée dans le projet. Si tu viens sur mon projet, tu vas avoir directement les extensions que j'ai trouvées intéressantes, des linters ou des plugins. Sur IDX, on a aussi l'IA de Google, Gemini, qui est disponible directement dans VS Code pour nous aider sur nos projets. Pour le moment, c'est gratuit donc c'est intéressant à utiliser.

Le deuxième outil, c'est GitLab Duo. J'ai pas mal de projets perso ou open source sur GitLab et ils ont fait un projet d'IA qui va un peu plus loin. On a un chat disponible dans l'interface de GitLab.com et dans les différents plugins d'IDE. Le chat répond à nos questions, nous explique le code qu'on voit à l'écran ou dans des Merge Requests amenées par d'autres personnes. Il va nous aider à générer des tests, proposer du refactoring, etc. C'est directement intégré dans la plateforme, on n'a pas besoin de switcher d'onglet.

L'IA de GitLab Duo va aussi être proposée dans les issues ou les Merge Requests. Si on prend une issue avec plein de commentaires, on peut demander à l'IA de nous faire un résumé. Quand on crée une Merge Request, on peut lui demander de générer une description par rapport aux fichiers modifiés. Enfin, pour la sécurité, si j'ai une faille qui arrive sur mon projet, l'IA va pouvoir m'aider à l'expliquer et à la résoudre.

Matthieu Segret : Merci encore pour vos messages. J'espère que vous avez eu autant de plaisir que moi à les écouter. Si vous avez aimé ce podcast, n'hésitez pas à liker ou à nous suivre sur Spotify ou Apple Podcast. Nous construisons ce podcast avec vous, donc n'hésitez pas à nous proposer des idées pour les prochains sujets ou encore à participer aux prochains épisodes sur humancoders.com/podcast. D'ici là, prenez soin de vous et je vous dis à bientôt dans un prochain épisode !

Informations sur l'épisode
Date de publication
Saison
2
Épisode
9
Durée
17:44
Formateur·rice·s
Série
Human Coders Podcast