codecrumbs
1.0.0
Você já se perdeu em uma base de código grande ou desconhecida? Esta ferramenta irá ajudá-lo a resolver isso. Além disso, aumentará sua velocidade de desenvolvimento e fornecerá mais conhecimento sobre a arquitetura de seu aplicativo.
Se você gostou deste projeto, siga-me no Twitter @bliashenko para saber mais sobre as coisas que estou construindo.
Confira a nova versão deste projeto como aplicativo independente. Com apenas alguns cliques você pode começar a explorar uma base de código de forma mais eficiente, criar guias visuais interativos e compartilhá-los com outras pessoas em seu próprio blog! Veja o guia rápido aqui.
Confira o exemplo preparado para a versão autônoma em execução aqui .
Como funciona? Você executa o comando
codecrumbspara uma base de código, ele analisa o código-fonte e constrói sua representação visual. Escreva um comentário do codecrumb e o estado da base de código será refletido pelo cliente visual no navegador instantaneamente.Confira minha palestra no React-Finland para mais detalhes.
Pré-condição: atualizar/instalar a versão
NodeJSpara ser >= 8.11.1
codecrumbs globalmente ( yarn global add codecrumbs )codecrumbs -d project-src-dir -e project-src-dir/index.js . Altere os parâmetros para corresponder ao seu projeto: -d é o diretório com o código-fonte , -e é o arquivo do ponto de entrada . Execute codecrumbs com parâmetros CLI ou especifique o arquivo de configuração estático codecrumbs.config.js (veja o exemplo aqui)
| CLI | Arquivo de configuração | Descrição | Exemplo |
|---|---|---|---|
d | projectDir | Caminho relativo para o diretório do código-fonte do projeto | -d src |
e | entryPoint | Caminho relativo para o arquivo do ponto de entrada de origem do projeto (deve estar dentro de dir ) | -e src/app.js |
x | excludeDir | Caminho relativo (ou caminhos separados por , ) para diretórios para exclusão | -x src/doc,src/thirdparty |
p | clientPort | Porta para cliente Codecrumbs (opcional, padrão 2018 ) | -p 2019 |
n | projectNameAlias | Alias do nome do projeto (opcional, padrão igual ao valor -d ) | -n my-hello-world |
C | - | Caminho para codecrumbs.config.js (opcional, por padrão tentará encontrar o arquivo em PWD) | -C config/codecrumbs.config.js |
D | debugModeEnabled | Habilite o modo de depuração para logs (opcional, o padrão é false ) | -D |
IU explicada:
Como chegar lá?
Deixe a localização atual no código escrevendo um comentário: //cc:[parameters;] .
cc (significa "CodeCrumb") é um prefixo usado pelo analisador; verifique exemplo de parâmetros na tabela abaixo:
| Exemplo | Descrição | Caso de uso |
|---|---|---|
//cc:remember place | pão ralado simples, remember place é o título do nosso primeiro pão ralado | Marque um lugar importante para não esquecer onde foi |
//cc:here is bug;well, seems like a bug in logic | breadcrumb simples, well, seems like a bug in logic são detalhes para breadcrumb, separados por ; | Adicione informações extras, serão renderizadas em pop-ups |
//cc:signin#3;enable route | trilha de migalhas, signin é o ID da trilha , #3 é o número do pedido da etapa , enable route é um título que descreve a etapa. | Uma sequência de codecrumbs, usada para descrever algum fluxo de dados (por exemplo, login do usuário ou envio de formulário, etc.). |
//cc:signin#1;firebase sign in;+2;do call to firebase with credentials | trilha de migalhas, +2 é o número de linhas a serem destacadas, separadas por ; | Use o número de linhas para destacar o código relacionado à localização atual |
Nota: a versão atual suporta apenas comentários de uma linha.
Dica: você pode usar o ID da trilha sem número de etapa (por exemplo,
//cc:groupname#;test) apenas para agrupar trilhas de navegação, você sempre pode adicionar números de etapas posteriormente quando souber a ordem correta.
Você pode estar interessado em estudar conexões entre várias bases de código (submódulos), o codecrumbs suporta isso. Basta iniciar o codecrumbs várias vezes (uma para cada base de código), tudo será sincronizado em uma imagem dentro da guia do navegador. Para controlar uma IU de diagrama - selecione-o clicando nele.
Por exemplo, para aplicativos cliente-servidor, vá para o diretório fonte do código do servidor e execute codecrumbs -e your-server-src/index.py -d your-server-src , o mesmo para codecrumbs -e src-client/index.js -d src-client .
Nota: as bases de código podem estar localizadas onde você quiser ( não há necessidade de tê-las como mono-repo, etc.), basta executar
codecrumbspara o diretório necessário.
A versão atual suporta as seguintes linguagens de programação:
C#C++FortranGoHaskellJavaJavaScriptKotlinPHPPythonRubyTypeScriptRegistre um problema para oferecer suporte a outro idioma que você gostaria de ter.
Nota: Na versão atual apenas [JavaScript, TypeScript] oferece este recurso
IU explicada:
Nota: Na versão atual apenas JavaScript oferece este recurso
js2flowchart é usado na barra lateral para desenhar o fluxograma para o código do arquivo selecionado.
Qualquer apoio é muito apreciado! ? ? ❤️ Se você gostou deste projeto, por favor, coloque um e tweet sobre ele . Obrigado!
Por favor, considere fazer uma doação financeira, isso ajudará no desenvolvimento de mais recursos interessantes! Agradecemos incluindo o seu nome/logotipo da empresa aqui
Desenvolvimento apoiado por 0+X
Ao contribuir para este repositório, primeiro discuta a alteração que deseja fazer por meio de problema, e-mail ou qualquer outro método com o proprietário deste repositório antes de fazer uma alteração. Idéias e sugestões são bem-vindas. Para iniciar o ambiente de desenvolvimento, clone o repositório e execute:
yarn && yarn start Os próximos recursos estão em desenvolvimento:
