codecrumbs
1.0.0
¿Alguna vez te has perdido en una base de código grande o desconocida? Esta herramienta te ayudará a resolver eso. Además, aumentará su velocidad de desarrollo y le brindará más conocimientos sobre la arquitectura de su aplicación.
Si te gusta este proyecto, sígueme en Twitter @bliashenko para conocer las cosas que estoy construyendo.
Consulte la nueva versión de este proyecto como aplicación independiente. ¡Con solo unos pocos clics puedes comenzar a explorar una base de código de manera más eficiente, crear guías visuales interactivas y compartirlas con otros en tu propio blog! Ver guía rápida aquí.
Consulte el ejemplo preparado para la versión independiente que se ejecuta aquí .
¿Cómo funciona? Ejecuta el comando
codecrumbspara una base de código, analiza el código fuente y crea su representación visual. Escriba un comentario de codecrumb y el estado del código base se reflejará en el cliente visual en el navegador sobre la marcha.Consulte mi charla en React-Finland para obtener más detalles.
Condición previa: actualizar/instalar la versión
NodeJSpara que sea >= 8.11.1
codecrumbs globalmente ( yarn global add codecrumbs )codecrumbs -d project-src-dir -e project-src-dir/index.js . Cambie los parámetros para que coincidan con su proyecto: -d es el directorio con el código fuente , -e es el archivo de punto de entrada . Ejecute codecrumbs con parámetros CLI o especifique el archivo de configuración estático codecrumbs.config.js (vea el ejemplo aquí)
| CLI | Archivo de configuración | Descripción | Ejemplo |
|---|---|---|---|
d | projectDir | Ruta relativa al directorio del código fuente del proyecto | -d src |
e | entryPoint | Ruta relativa al archivo de punto de entrada de origen del proyecto (debe estar dentro dir ) | -e src/app.js |
x | excludeDir | Ruta relativa (o rutas separadas por , ) a los directorios para su exclusión | -x src/doc,src/thirdparty |
p | clientPort | Puerto para el cliente Codecrumbs (opcional, predeterminado 2018 ) | -p 2019 |
n | projectNameAlias | Alias del nombre del proyecto (opcional, predeterminado igual que el valor -d ) | -n my-hello-world |
C | - | Ruta a codecrumbs.config.js (opcional, de forma predeterminada intentará encontrar el archivo en PWD) | -C config/codecrumbs.config.js |
D | debugModeEnabled | Habilite el modo de depuración para registros (opcional, el valor predeterminado es false ) | -D |
Interfaz de usuario explicada:
¿Cómo llegar?
Deje la ruta de navegación en el código escribiendo un comentario: //cc:[parameters;] .
cc (significa "CodeCrumb") es un prefijo utilizado por el analizador; consulte el ejemplo de parámetros en la siguiente tabla:
| Ejemplo | Descripción | Caso de uso |
|---|---|---|
//cc:remember place | ruta de navegación simple, remember place es el título de nuestra primera ruta de navegación | Marca un lugar importante para no olvidar dónde estaba |
//cc:here is bug;well, seems like a bug in logic | La ruta de navegación simple, well, seems like a bug in logic son los detalles de la ruta de navegación, separados por ; | Agregue información adicional, se mostrará en ventanas emergentes |
//cc:signin#3;enable route | rastro de rutas de navegación, signin es el ID del rastro , #3 es el número de pedido del paso , enable route es un título que describe el paso. | Una secuencia de códigos de ruta que se utilizan para describir algún flujo de datos (por ejemplo, inicio de sesión de usuario o envío de formulario, etc.). |
//cc:signin#1;firebase sign in;+2;do call to firebase with credentials | rastro de migas de pan, +2 es el número de líneas a resaltar, separadas por ; | Utilice el número de líneas para resaltar el código relacionado con la ruta de navegación |
Nota: la versión actual solo admite comentarios de una sola línea.
Sugerencia: puede usar la identificación de ruta sin número de paso (por ejemplo,
//cc:groupname#;test) solo para agrupar rutas de navegación, siempre puede agregar números de paso más adelante cuando conozca el orden correcto.
Quizás le interese estudiar las conexiones entre varias bases de código (submódulos), codecrumbs lo admite. Simplemente inicie codecrumbs varias veces (una para cada código base), todo se sincronizará en una imagen dentro de la pestaña del navegador. Para controlar la interfaz de usuario de un diagrama, selecciónelo haciendo clic en él.
Por ejemplo, para la aplicación cliente-servidor, vaya al directorio fuente del código de su servidor y ejecute codecrumbs -e your-server-src/index.py -d your-server-src , lo mismo para codecrumbs -e src-client/index.js -d src-client .
Nota: las bases de código se pueden ubicar donde desee ( no es necesario tenerlas como mono-repo, etc.), simplemente ejecute
codecrumbspara el directorio que necesite.
La versión actual admite los siguientes lenguajes de programación:
C#C++FortranGoHaskellJavaJavaScriptKotlinPHPPythonRubyTypeScriptPresente un problema para admitir otro idioma que le gustaría tener.
Nota: En la versión actual solo [JavaScript, TypeScript] ofrece esta función
Interfaz de usuario explicada:
Nota: En la versión actual solo JavaScript ofrece esta característica
js2flowchart se usa en la barra lateral para dibujar un diagrama de flujo para el código del archivo seleccionado.
¡Cualquier apoyo es muy apreciado! ? ? ❤️ Si te gusta este proyecto, por favor, envía un tweet sobre él . ¡Gracias!
Por favor, considere hacer una donación financiera, ¡ayudará a un mayor desarrollo de funciones más interesantes! Se lo agradeceremos incluyendo aquí su nombre/logotipo de empresa.
Desarrollo apoyado por 0+X
Al contribuir a este repositorio, primero discuta el cambio que desea realizar mediante un problema, correo electrónico o cualquier otro método con el propietario de este repositorio antes de realizar un cambio. Ideas y sugerencias son bienvenidas. Para iniciar el entorno de desarrollo, clone el repositorio y ejecute:
yarn && yarn start Se están desarrollando las siguientes características:
