codecrumbs Télécharger - codecrumbs Téléchargement du code source

codecrumbs

Code source JAVA

1.0.0

Télécharger

Quoi · Démo · Commencer · Fonctionnalités · Études de cas · Assistance

Vous êtes-vous déjà perdu dans une base de code volumineuse ou inconnue ? Cet outil vous aidera à résoudre ce problème. En outre, cela augmentera votre vitesse de développement et vous donnera plus de connaissances sur l’architecture de votre application.

Si vous aimez ce projet, suivez-moi sur Twitter @bliashenko pour entendre parler des choses que je construis.

Fils de code v2

Découvrez la nouvelle version de ce projet en tant qu'application autonome. En quelques clics, vous pouvez commencer à explorer une base de code de manière plus efficace, créer des guides visuels interactifs et les partager avec d'autres sur votre propre blog ! Voir le guide rapide ici.

Démo

Consultez l'exemple préparé pour la version autonome exécutée ici .

Fils de code v1

Comment ça marche ? Vous exécutez la commande codecrumbs pour une base de code, elle analyse le code source et construit sa représentation visuelle. Notez un commentaire de codecrumb et l'état de la base de code sera reflété par le client visuel dans le navigateur à la volée.
Consultez mon exposé sur React-Finland pour plus de détails.

Commencer

Installer et exécuter

Condition préalable : mettre à jour/installer la version NodeJS pour qu'elle soit >= 8.11.1

Installer codecrumbs globalement ( yarn global add codecrumbs )
Exécutez codecrumbs -d project-src-dir -e project-src-dir/index.js . Modifiez les paramètres en fonction de votre projet : -d est le répertoire avec le code source , -e est le fichier de point d'entrée .
Accédez à http://localhost:2018 dans le navigateur pour le vérifier.

Configuration

Exécutez codecrumbs avec les paramètres CLI ou spécifiez le fichier de configuration statique codecrumbs.config.js (voir exemple ici)

CLI	Fichier de configuration	Description	Exemple
`d`	`projectDir`	Chemin relatif vers le répertoire du code source du projet	`-d src`
`e`	`entryPoint`	Chemin relatif vers le fichier de point d'entrée source du projet (doit être à l'intérieur `dir` )	`-e src/app.js`
`x`	`excludeDir`	Chemin relatif (ou chemins séparés par `,` ) vers les répertoires à exclure	`-x src/doc,src/thirdparty`
`p`	`clientPort`	Port pour le client Codecrumbs (facultatif, par défaut 2018 )	`-p 2019`
`n`	`projectNameAlias`	Alias du nom du projet (facultatif, valeur par défaut identique à `-d` )	`-n my-hello-world`
`C`	-	Chemin d'accès à codecrumbs.config.js (facultatif, par défaut, nous essaierons de trouver le fichier dans PWD)	`-C config/codecrumbs.config.js`
`D`	`debugModeEnabled`	Activer le mode débogage pour les journaux (facultatif, la valeur par défaut est `false` )	`-D`

Caractéristiques

Fil d'Ariane et sentiers

L'interface utilisateur a expliqué :

activez le commutateur "Codecrumbs" pour avoir une arborescence de codecrumbs sur le schéma (la liste déroulante contient une configuration supplémentaire)
choisissez la piste de codecrumbs "actuelle" à afficher (peut être soit une piste, soit toutes les autres pistes de code "simples")
sélectionnez la connexion entre deux étapes (le code de deux codecrumbs sera ouvert dans "Sidebar" sous l'onglet "Crumbs")
définissez d'autres options dans les listes déroulantes pour configurer le comportement du diagramme (afficher les blocs de code, les détails, etc.)

Comment y arriver ?

Laissez le fil d'Ariane dans le code en écrivant un commentaire : //cc:[parameters;] .

cc (signifie "CodeCrumb") est un préfixe utilisé par l'analyseur ; consultez un exemple de paramètres dans le tableau ci-dessous :

Exemple	Description	Cas d'utilisation
`//cc:remember place`	fil d'Ariane simple, `remember place` est le titre de notre premier fil d'Ariane	Marquer un endroit important pour ne pas oublier où il se trouvait
`//cc:here is bug;well, seems like a bug in logic`	un simple fil d'Ariane, `well, seems like a bug in logic` : les détails du fil d'Ariane, séparés par `;`	Ajouter des informations supplémentaires, sera rendu dans des popups
`//cc:signin#3;enable route`	piste de fil d'Ariane, `signin` est l' ID de piste , `#3` est le numéro d'ordre de l'étape , `enable route` est un titre décrivant l'étape.	Une séquence de fils de code, utilisée pour décrire un flux de données (par exemple, connexion d'un utilisateur, soumission d'un formulaire, etc.).
`//cc:signin#1;firebase sign in;+2;do call to firebase with credentials`	fil d'Ariane, `+2` est le nombre de lignes à surligner, séparées par `;`	Utilisez le nombre de lignes pour mettre en évidence le code lié au fil d'Ariane

Remarque : la version actuelle ne prend en charge que les commentaires sur une seule ligne.

Astuce : vous pouvez utiliser l'identifiant de suivi sans numéro d'étape (par exemple //cc:groupname#;test ) uniquement pour regrouper le fil d'Ariane, vous pourrez toujours ajouter des numéros d'étape plus tard lorsque vous connaîtrez l'ordre correct.

Intégration multi-bases de code

Vous pourriez être intéressé à étudier les connexions entre plusieurs bases de code (sous-modules), codecrumbs le prend en charge. Démarrez simplement le codecrumbs plusieurs fois (une fois pour chaque base de code), tout sera synchronisé dans une seule image dans l'onglet du navigateur. Pour contrôler une interface utilisateur de diagramme, sélectionnez-la en cliquant dessus.

Par exemple, pour une application client-serveur, accédez au répertoire source de votre code serveur et exécutez codecrumbs -e your-server-src/index.py -d your-server-src , idem pour le client codecrumbs -e src-client/index.js -d src-client .

Remarque : les bases de code peuvent être situées où vous le souhaitez ( pas besoin de les avoir comme un mono-dépôt, etc.), exécutez simplement codecrumbs pour le répertoire dont vous avez besoin.

Prise en charge multilingue

La version actuelle prend en charge les langages de programmation suivants :

C#
C++
Fortran
Go
Haskell
Java
JavaScript
Kotlin
PHP
Python
Ruby
TypeScript

Veuillez déposer un problème pour prendre en charge une autre langue que vous souhaiteriez avoir.

Dépendances

Remarque : Dans la version actuelle, seuls [JavaScript, TypeScript] proposent cette fonctionnalité.

L'interface utilisateur a expliqué :

activer le commutateur "Dépendances"
sélectionnez la connexion entre les modules (tous les fichiers impliqués seront ouverts dans la « Barre latérale », afin que vous puissiez voir « ce qui est importé » et « sa mise en œuvre »)

Organigramme

Remarque : Dans la version actuelle, seul JavaScript propose cette fonctionnalité.

js2flowchart est utilisé dans la barre latérale pour dessiner un organigramme pour le code du fichier sélectionné.

Soutien

Tout soutien est très apprécié ! ? ? ❤️ Si vous aimez ce projet, s'il vous plaît, mettez un et tweetez à ce sujet . Merci!

S'il vous plaît, pensez à faire un don financier, cela contribuera au développement de fonctionnalités plus intéressantes ! Nous vous remercierons en incluant votre nom/logo de votre entreprise ici ☺️ . N'hésitez pas à me contacter pour en discuter.

Commanditaires

Développement pris en charge par 0+X

Bailleurs de fonds

Contribuer

Lorsque vous contribuez à ce référentiel, veuillez d'abord discuter de la modification que vous souhaitez apporter par problème, par courrier électronique ou par toute autre méthode avec le propriétaire de ce référentiel avant d'apporter une modification. Les idées et suggestions sont les bienvenues. Pour démarrer l'environnement de développement, clonez le dépôt et exécutez :