À mort le dead-code ! Knip est la solution.

Si les outils de lint et de tests sont désormais légion, il reste un sujet qui passe souvent entre les mailles du filet : la détection du dead code.

Tu sais, ces exports orphelins, ces dépendances fantômes qui traînent dans ton package.json, ces fichiers entiers que plus personne n’utilise mais que personne n’ose supprimer “au cas où”.

C’est là qu’entre en scène Knip : un outil rapide, efficace, et surtout très complet.

Mise en place

Le principe de Knip est simple : il parcourt ton code TypeScript (ou JavaScript) et identifie tout ce qui n’est plus utilisé.

Mais contrairement à un simple “unused import” dans ton IDE, Knip va beaucoup plus loin :

• Exports inutilisés : une variable ou fonction exportée mais jamais importée ailleurs.
• Fichiers orphelins : des fichiers entiers qui ne sont référencés nulle part.
• Dépendances fantômes : des packages dans ton package.json que tu n’utilises plus.
• Types non utilisés : interfaces, types, enums exportés pour rien.
• Membres de classes et d’enums : même au sein d’une classe ou d’un enum, Knip détecte les membres inutilisés.
• Duplicatas : des exports dupliqués au sein d’un namespace.

Pour l’installer, rien de plus simple :

pnpm create @knip/config

Et pour le lancer :

npx knip

Il te sort ensuite un rapport complet, classé par catégorie, avec le fichier et la ligne concernés.

Unused files (3)
backend/src/domain/common/HttpStatusCode.ts                                  
backend/src/domain/datetime/index.ts                                         
frontend/test/wrapper.tsx                                                    

Unused dependencies (1)
isbot                                    package.json:3:6          

Unlisted dependencies (2)
infra  backend/src/domain/BaseRepository.ts:1:15                
infra  backend/src/infra/routes/examples/dtos/ExampleDto.ts:2:15

Unused exports (2)
BaseRepository         class     backend/src/domain/BaseRepository.ts:10:23                     
chunk                  function  backend/src/domain/dynamo/Table.ts:73:17                       

Attention, il se peut que tu trouves des éléments remontés par l’outil mais qui sont réellement utilisés.

La documentation est d’ailleurs très transparente sur le sujet des faux positifs. Elle explique en détail pourquoi certaines détections peuvent être erronées, et comment les gérer.

Si tu as un cas particulier, tu peux toujours configurer Knip via un fichier knip.json :

{
  "$schema": "https://unpkg.com/knip@6/schema.json",
  "entry": ["src/index.ts"],
  "project": ["src/**/*.ts"],
  "ignore": ["src/generated/**"],
  "ignoreDependencies": ["@types/node"]
}

Une fois que tu es sûr que tout est bien configuré et que tous les retours sont effectivement du code à supprimer, tu peux tout fixer en un seul coup via la commande :

knip --fix

Une tonne de plugins

L’écosystème JavaScript est immense avec ses galaxies de frameworks, meta-frameworks et librairies à n’en plus finir, mais Knip gère ça très bien. Il s’intègre à peu près à tout ce qui est un minimum utilisé.

La liste complète des plugins est impressionnante : Next.js, Astro, Vitest, Storybook, Tailwind, ESLint, Prettier, Playwright… Il y en a plus de 170.

Le fonctionnement est simple : à partir du moment où la dépendance est présente dans ton package.json, le plugin correspondant est automatiquement activé.

Un graphe de dépendances dans ton IDE

Knip s’intègre à ton éditeur via des extensions, et c’est peut-être la fonctionnalité que j’aime le plus.

L’extension te permet de :

• Localiser tous les endroits où un export est importé dans le projet.
• Avoir une vue complète des dépendances (exports + imports) du fichier ouvert.
• Naviguer rapidement entre les fichiers liés.

Quand je fais du frontend, je passe mon temps à chercher où un composant est utilisé. Avec cette vue dédiée, c’est franchement plus facile !

Knip dans ta CI

Ce serait dommage de nettoyer tout ton dead code pour en retrouver quelques semaines plus tard. La bonne nouvelle, c’est que Knip s’intègre très bien dans une CI/CD.

Tu peux par exemple ajouter un step dans ta pipeline GitHub Actions :

- name: Check for dead code
  run: npx knip

Si Knip détecte du code mort, il renvoie un code de sortie non-nul et ta pipeline échoue. Simple, efficace.

Tu peux aussi utiliser l’option --reporter json pour exploiter les résultats dans un outil de reporting, ou bien encore --reporter markdown pour générer un commentaire directement sur ta pull request.

Conclusion

Comme souvent, il existe d’autres outils qui font tout ou partie de ce travail (depcheck, ts-prune…). Mais ce qui me plaît particulièrement ici, c’est qu’il adresse tous les aspects du dead code JavaScript en un seul endroit : exports, fichiers, dépendances, types.

Ma prochaine cible, c’est le CSS. Comment détecter les règles qui sont inutilisées, que ce soit en flaguant les classes entières, comme le ferait PurgeCSS, ou en détectant les règles qui sont écrasées par une autre ? J’ai pas encore trouvé l’outil parfait mais on va chercher :) !

D’ailleurs, si tu utilises déjà Knip ou un outil similaire, ton retour d’expérience m’intéresse !