Comment j’ai construit un outil de rapport de couverture TypeScript – Meilleure programmation

Online Coding Courses for Kids

Maintenant, quand je clique sur un fichier, je veux aller sur une page de détails et voir le code source et ce qui n’est pas exactement couvert

Pour atteindre la page de détails, j’ai besoin d’un éditeur de code qui prend en charge:

  1. Mode lecture seule
  2. Un surligneur de syntaxe
  3. Affiche les numéros de ligne
  4. Permet d’annoter des lignes de code spécifiques
  5. Met en surbrillance le numéro de ligne

J’ai regardé autour de moi et je l’ai cloué sur deux options: Codemirror et Ace.
Au départ, je suis allé pour ce dernier, mais les annotations n’étaient pas simples à mettre en œuvre – j’ai donc décidé d’aller pour le premier.

Il y a un autre problème: comme nous créons des pages HTML statiques, je dois importer le JavaScript via le et ne peut pas compter sur React pour tout ce qui n’est pas du balisage.

À ce stade, j’ai accidentellement remplacé tous les fichiers source par les fichiers de couverture générés, perdant 1/3 de ce que j’ai fait (heureusement, j’ai commis 2/3 de ce que j’ai fait).
Apprenez de mes erreurs: continuez à vous engager.

Pour inclure Codemirror, je dois ajouter quelques actifs à la page (quelques actifs JS et un actif CSS jusqu’à présent) – rappelez-vous que je n’utilise que React pour la génération de balisage statique.

Maintenant, je dois annoter le code source. Je vais le faire en deux étapes:

1. Créez un

 element with the annotations (all the  in the code), using the  component.