codecrumbs

Was · Demo · Erste Schritte · Funktionen · Fallstudien · Support

Haben Sie sich jemals in einer großen oder unbekannten Codebasis verirrt? Dieses Tool wird Ihnen helfen, dieses Problem zu lösen. Außerdem erhöht es Ihre Entwicklungsgeschwindigkeit und vermittelt mehr Wissen über Ihre Anwendungsarchitektur.

Wenn Ihnen dieses Projekt gefällt, folgen Sie mir auf Twitter @bliashenko, um mehr über die Dinge zu erfahren, die ich baue.

Codecrumbs v2

Schauen Sie sich die neue Version dieses Projekts als eigenständige Anwendung an. Mit nur wenigen Klicks können Sie eine Codebasis effizienter erkunden, interaktive visuelle Leitfäden erstellen und diese in Ihrem eigenen Blog mit anderen teilen! Die Kurzanleitung finden Sie hier.

Demo

Schauen Sie sich hier das vorbereitete Beispiel für die Standalone-Version an .

Codecrumbs v1

Wie funktioniert es? Sie führen codecrumbs -Befehl für eine Codebasis aus, er analysiert den Quellcode und erstellt seine visuelle Darstellung. Schreiben Sie einen Codecrumb-Kommentar auf, und der Status der Codebasis wird vom visuellen Client im Handumdrehen im Browser angezeigt.

Weitere Informationen finden Sie in meinem Vortrag bei React-Finland.

Fangen Sie an

Installieren und ausführen

Voraussetzung: NodeJS Version auf >= 8.11.1 aktualisieren/installieren

1. codecrumbs global installieren ( yarn global add codecrumbs )
2. Führen Sie codecrumbs -d project-src-dir -e project-src-dir/index.js aus. Ändern Sie die Parameter entsprechend Ihrem Projekt: -d ist das Verzeichnis mit dem Quellcode , -e ist die Einstiegspunktdatei .
3. Gehen Sie im Browser zu http://localhost:2018, um es auszuprobieren.

Konfiguration

Führen Sie Codecrumbs mit CLI-Parametern aus oder geben Sie die statische Konfigurationsdatei codecrumbs.config.js an (siehe Beispiel hier)

CLI	Konfigurationsdatei	Beschreibung	Beispiel
d	projectDir	Relativer Pfad zum Quellcodeverzeichnis des Projekts	-d src
e	entryPoint	Relativer Pfad zur Quell-Einstiegspunktdatei des Projekts (muss innerhalb dir liegen)	-e src/app.js
x	excludeDir	Relativer Pfad (oder durch , getrennte Pfade) zu auszuschließenden Verzeichnissen	-x src/doc,src/thirdparty
p	clientPort	Port für Codecrumbs-Client (optional, Standard 2018 )	-p 2019
n	projectNameAlias	Projektnamen-Alias ​​(optional, standardmäßig identisch mit -d Wert)	-n my-hello-world
C	-	Pfad zu codecrumbs.config.js (optional, standardmäßig wird versucht, die Datei in PWD zu finden)	-C config/codecrumbs.config.js
D	debugModeEnabled	Debug-Modus für Protokolle aktivieren (optional, Standardwert ist false )	-D

Merkmale

Semmelbrösel und Spuren

Benutzeroberfläche erklärt:

• Aktivieren Sie den Schalter „Codecrumbs“, um den Codecrumbs-Baum im Schema zu haben (Dropdown-Menü enthält zusätzliche Konfiguration).
• Wählen Sie den „aktuellen“ Codecrumbs-Trail zur Anzeige aus (kann entweder Trail oder alle anderen „einfachen“ Codecrumbs sein)
• Verbindung zwischen zwei Schritten auswählen (Code für zwei Codecrumbs wird in der „Sidebar“ unter der Registerkarte „Crumbs“ geöffnet)
• Legen Sie andere Optionen in Dropdown-Listen fest, um das Verhalten des Diagramms zu konfigurieren (Codeblöcke, Details usw. anzeigen).

Wie komme ich dorthin?

Hinterlassen Sie Breadcrumb im Code, indem Sie einen Kommentar schreiben: //cc:[parameters;] .

cc (steht für „CodeCrumb“) ist ein Präfix, das vom Parser verwendet wird; Sehen Sie sich die Beispielparameter in der folgenden Tabelle an:

Beispiel	Beschreibung	Anwendungsfall
//cc:remember place	Einfaches Breadcrumb, remember place der Titel unseres ersten Breadcrumbs ist	Markieren Sie einen wichtigen Ort, damit Sie nicht vergessen, wo er war
//cc:here is bug;well, seems like a bug in logic	Einfaches Breadcrumb, well, seems like a bug in logic Details für Breadcrumb, getrennt durch ;	Fügen Sie zusätzliche Informationen hinzu, die in Popups angezeigt werden
//cc:signin#3;enable route	Spur der Breadcrumbs, signin ist die Trail-ID , #3 ist die Bestellnummer des Schritts , enable route ist ein Titel, der den Schritt beschreibt.	Eine Folge von Codecrumbs, die zur Beschreibung eines Datenflusses verwendet werden (z. B. Benutzeranmeldung oder Formularübermittlung usw.).
//cc:signin#1;firebase sign in;+2;do call to firebase with credentials	Spur von Brotkrümeln, +2 ist die Anzahl der hervorzuhebenden Zeilen, getrennt durch ;	Verwenden Sie die Anzahl der Zeilen, um den Code im Zusammenhang mit Breadcrumb hervorzuheben

Hinweis: Die aktuelle Version unterstützt nur einzeilige Kommentare.

Hinweis: Sie können die Trail-ID ohne Schrittnummer (z. B. //cc:groupname#;test ) nur zum Gruppieren von Breadcrumbs verwenden. Sie können Schrittnummern später jederzeit hinzufügen, wenn Sie die richtige Reihenfolge kennen.

Multi-Codebase-Integration

Möglicherweise möchten Sie Verbindungen zwischen mehreren Codebasen (Untermodulen) untersuchen. Codecrumbs unterstützt dies. Starten Sie Codecrumbs einfach mehrmals (einmal für jede Codebasis), alles wird in einem Bild im Browser-Tab synchronisiert . Um die Benutzeroberfläche eines Diagramms zu steuern, wählen Sie es aus, indem Sie darauf klicken.

Gehen Sie beispielsweise für eine Client-Server-Anwendung in das Quellverzeichnis Ihres Servercodes und führen Sie codecrumbs -e your-server-src/index.py -d your-server-src aus, dasselbe gilt für Client codecrumbs -e src-client/index.js -d src-client .

Hinweis: Codebasen können an einem beliebigen Ort abgelegt werden ( keine Notwendigkeit, sie wie Mono-Repo usw. zu haben). Führen Sie einfach codecrumbs für das Verzeichnis aus, das Sie benötigen.

Mehrsprachige Unterstützung

Die aktuelle Version unterstützt die folgenden Programmiersprachen:

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

Bitte reichen Sie ein Problem ein, um eine andere Sprache zu unterstützen, die Sie gerne hätten.

Abhängigkeiten

Hinweis: In der aktuellen Version bieten nur [JavaScript, TypeScript] diese Funktion

Benutzeroberfläche erklärt:

• Aktivieren Sie den Schalter „Abhängigkeiten“.
• Wählen Sie die Verbindung zwischen Modulen aus (alle beteiligten Dateien werden in der „Seitenleiste“ geöffnet, sodass Sie sehen können, „was importiert wird“ und „seine Implementierung“).

Flussdiagramm

Hinweis: In der aktuellen Version bietet nur JavaScript diese Funktion

js2flowchart wird in der Seitenleiste verwendet, um ein Flussdiagramm für den ausgewählten Dateicode zu zeichnen.

Unterstützung

Jede Unterstützung wird sehr geschätzt! ? ? ❤️ Wenn Ihnen dieses Projekt gefällt, posten Sie bitte eine Nachricht und twittern Sie darüber . Danke!

Bitte denken Sie über eine finanzielle Spende nach, sie wird uns bei der weiteren Entwicklung weiterer cooler Funktionen unterstützen! Wir danken Ihnen, indem wir hier Ihren Namen/Firmenlogo einfügen ☺️ . Zögern Sie nicht, mich für eine Diskussion anzupingen.

Sponsoren

Entwicklung unterstützt durch 0+X

Unterstützer

Beitragen

Wenn Sie zu diesem Repository beitragen, besprechen Sie bitte zunächst die Änderung, die Sie vornehmen möchten, per Problem, E-Mail oder auf andere Weise mit dem Eigentümer dieses Repositorys, bevor Sie eine Änderung vornehmen. Ideen und Vorschläge sind willkommen. Um die Entwicklungsumgebung zu starten, klonen Sie das Repo und führen Sie Folgendes aus:

 yarn && yarn start 

In Bearbeitung

Die nächsten Funktionen werden entwickelt:

• VS Code-Erweiterung – einige nette Funktionen direkt im Code-Editor. Schauen Sie sich das Repo hier an.