Todo Tree dans VSCode

N'oubliez plus jamais vos TODO et FIXME ! Utilisez l'extension VSCode Todo Tree pour rassembler toutes les annotations de code comme TODO, FIXME et TEMPORARY dans un tableau de bord facile à suivre.

7 mars 2025 · 3 minutes de lecture

Voir la source

Christophe

Amoureux de Markdown, WSL et Docker ~ Curieux insatiable.

Cet article existe aussi en anglais — lire la version originale.

Traduction automatique

Cette traduction a été produite par une IA. Elle peut contenir des contresens ou des maladresses, en particulier sur les termes techniques. En cas de doute, consultez l'article de référence en anglais — c'est lui qui fait foi.

Cet article a plus d'un an, mais il a été relu le 30 juillet 2026 — son contenu est toujours exact.

Cet article fait partie de la série VSCode — astuces, extensions et raccourcis :

Todo Tree dans VSCode

⚡

TL;DR

Ne perdez plus jamais la trace de vos annotations de code. Cet article présente l'extension « Todo Tree » pour Visual Studio Code, un outil puissant qui parcourt tout votre workspace à la recherche de commentaires comme TODO, FIXME et d'autres tags personnalisés. Elle les organise ensuite dans une vue arborescente pratique, dans la barre latérale, ce qui vous permet de voir d'un coup d'œil toutes vos tâches en attente et de naviguer directement vers le code concerné en un clic. Une extension essentielle pour rester organisé et ne laisser passer aucune tâche.

Quand vous travaillez sur une grosse base de code, vous finirez tôt ou tard par tomber sur des annotations du type @TODO ou // TODO, laissées là par quelqu'un (peut-être vous) comme pense-bête : « Ne pas oublier de (faire quelque chose)... ». Et, à coup sûr, ces todos restent là des mois ou des années parce que, eh oui, le programmeur a oublié qu'ils étaient là.

Personnellement, il m'arrive de travailler sur du code et de commenter l'appel à une méthode ou à un bloc précis. Souvent pendant une session de debug (par exemple sur des scripts Bash sous Linux) mais, attention, il ne faut pas oublier de retirer les commentaires et de remettre le code dans son état d'origine. Dans ce cas, j'ajoute un commentaire comme // TEMPORARY juste avant la première ligne commentée.

Un tableau de bord vous aide à vous souvenir ; un hook, lui, vous arrête. Git - pre-commit-hooks peut refuser un commit qui contient encore un marqueur TEMPORARY.

L'idée derrière l'extension VSCode Todo Tree (la page de téléchargement se trouve ici : https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) est de rassembler ce type d'annotations et d'afficher un tableau de bord avec tous les TODOS, TOFIX, ... et les vôtres aussi.

Une fois l'extension installée, une nouvelle icône apparaît dans votre barre latérale gauche (voir le repère 1. sur l'image ci-dessous). En cliquant dessus, vous obtenez des entrées comme BUG, CHECK, FIXME, TODO, ... et en cliquant sur une entrée, vous êtes directement redirigé vers l'endroit où se trouve le todo dans votre base de code.

Todo Tree dans VSCode

Grâce à ce récapitulatif, vous n'oublierez plus jamais vos todos, vos bidouilles temporaires, les choses qu'il reste à corriger, ...

Je vous recommande la lecture de l'article https://dev.to/koustav/how-a-vs-code-extension-todo-tree-can-make-your-coding-easier-todo-tree-configuration-and-use-cases-11kc pour en savoir plus.

Vraiment une chouette extension pour ne plus jamais oublier vos annotations TODO, TOFIX, TEMPORARY, ...

Si l'idée de faire remonter ce que votre éditeur garde normalement hors de vue vous plaît, jetez aussi un œil à Error Lens : il fait la même chose pour les erreurs et les avertissements, directement dans la zone d'édition. Et une fois que vous aurez réuni quelques extensions indispensables, exporter votre liste d'extensions vous permettra de les réinstaller facilement sur votre prochaine machine.

Cet article fait partie de la série VSCode — astuces, extensions et raccourcis :

🦋 Rejoignez la conversation sur Bluesky

Aimer, partager ou commenter sur Bluesky

Un compte Bluesky gratuit est nécessaire pour aimer, repartager ou commenter. Ce bloc interroge l'API publique de Bluesky directement depuis votre navigateur (sans cookie, sans connexion) — votre adresse IP parvient donc aux serveurs de Bluesky dès que cette section se charge.

Chargement des commentaires…