codecrumbs
1.0.0
Вы когда-нибудь терялись в большой или неизвестной кодовой базе? Этот инструмент поможет вам решить эту проблему. Кроме того, это увеличит скорость вашей разработки и даст больше знаний об архитектуре вашего приложения.
Если вам нравится этот проект, подписывайтесь на меня в Твиттере @bliashенко, чтобы узнавать о том, что я создаю.
Оцените новую версию этого проекта как отдельное приложение. Всего за несколько кликов вы можете начать более эффективно изучать кодовую базу, создавать интерактивные визуальные руководства и делиться ими с другими в своем блоге! См. краткое руководство здесь.
Ознакомьтесь с подготовленным примером автономной версии здесь .
Как это работает? Вы запускаете команду
codecrumbsдля базы кода, она анализирует исходный код и строит его визуальное представление. Запишите комментарий codecrumb, и состояние кодовой базы будет отражено визуальным клиентом в браузере на лету.Подробности можно узнать из моего выступления на React-Finland.
Предварительное условие: обновить/установить версию
NodeJS>= 8.11.1.
codecrumbs глобально ( yarn global add codecrumbs )codecrumbs -d project-src-dir -e project-src-dir/index.js . Измените параметры в соответствии с вашим проектом: -d — каталог с исходным кодом , -e — файл точки входа . Запустите codecrumbs с параметрами CLI или укажите статический файл конфигурации codecrumbs.config.js (см. пример здесь).
| интерфейс командной строки | Конфигурационный файл | Описание | Пример |
|---|---|---|---|
d | projectDir | Относительный путь к каталогу исходного кода проекта. | -d src |
e | entryPoint | Относительный путь к файлу точки входа исходного кода проекта (должен находиться внутри dir ). | -e src/app.js |
x | excludeDir | Относительный путь (или пути, разделенные , ) к каталогам для исключения | -x src/doc,src/thirdparty |
p | clientPort | Порт для клиента Codecrumbs (необязательно, по умолчанию 2018 г. ) | -p 2019 |
n | projectNameAlias | Псевдоним имени проекта (необязательно, по умолчанию совпадает со значением -d ) | -n my-hello-world |
C | - | Путь к codecrumbs.config.js (необязательно, по умолчанию будет попытка найти файл в PWD) | -C config/codecrumbs.config.js |
D | debugModeEnabled | Включить режим отладки для журналов (необязательно, по умолчанию — false ). | -D |
Пользовательский интерфейс объяснил:
Как туда добраться?
Оставьте навигационную цепочку в коде, записав комментарий: //cc:[parameters;] .
cc (расшифровывается как «CodeCrumb») — префикс, используемый парсером; проверьте пример параметров в таблице ниже:
| Пример | Описание | Вариант использования |
|---|---|---|
//cc:remember place | простая хлебная крошка, remember place — это название нашей первой хлебной крошки | Отметьте важное место, чтобы не забыть, где оно было. |
//cc:here is bug;well, seems like a bug in logic | простая хлебная крошка, well, seems like a bug in logic - это детали хлебной крошки, разделенные ; | Добавьте дополнительную информацию, она будет отображаться во всплывающих окнах. |
//cc:signin#3;enable route | след из хлебных крошек, signin — это идентификатор следа , #3 — порядковый номер шага , enable route — это заголовок, описывающий шаг. | Последовательность фрагментов кода, используемая для описания некоторого потока данных (например, вход пользователя в систему, отправка формы и т. д.). |
//cc:signin#1;firebase sign in;+2;do call to firebase with credentials | след из хлебных крошек, +2 — количество строк, которые нужно выделить, разделенных ; | Используйте количество строк, чтобы выделить код, связанный с навигационной цепочкой. |
Примечание: текущая версия поддерживает только однострочные комментарии.
Подсказка: вы можете использовать идентификатор следа без номера шага (например,
//cc:groupname#;test) только для группировки хлебных крошек. Вы всегда можете добавить номера шагов позже, когда будете знать правильный порядок.
Возможно, вам будет интересно изучить связи между несколькими базами кода (подмодулями), codecrumbs это поддерживает. Просто запустите codecrumbs несколько раз (по одному разу для каждой базы кода), и все это будет синхронизировано в одном изображении на вкладке браузера. Чтобы управлять пользовательским интерфейсом диаграммы, выберите ее, щелкнув по ней.
Например, для клиент-серверного приложения перейдите в исходный каталог вашего серверного кода и запустите codecrumbs -e your-server-src/index.py -d your-server-src , то же самое для клиентского codecrumbs -e src-client/index.js -d src-client .
Примечание. Базы кода могут быть расположены где угодно ( нет необходимости иметь их, например моно-репозиторий и т. д.), просто запустите
codecrumbsдля нужного вам каталога.
Текущая версия поддерживает следующие языки программирования:
C#C++FortranGoHaskellJavaJavaScriptKotlinPHPPythonRubyTypeScriptПожалуйста, сообщите о проблеме для поддержки другого языка, который вы хотели бы иметь.
Примечание. В текущей версии эту функцию предлагают только [JavaScript, TypeScript].
Пользовательский интерфейс объяснил:
Примечание. В текущей версии эту функцию предлагает только JavaScript.
js2flowchart используется на боковой панели для рисования блок-схемы для выбранного кода файла.
Любая поддержка очень ценится! ? ? ❤️ Если вам нравится этот проект, пожалуйста, поставьте о нем лайк и напишите в Твиттере . Спасибо!
Пожалуйста, рассмотрите возможность финансового пожертвования, это поможет дальнейшему развитию более интересных функций! Мы отблагодарим вас, указав здесь свое имя/логотип компании.
Разработка поддерживается 0+X
При внесении вклада в этот репозиторий сначала обсудите изменение, которое вы хотите внести, по электронной почте или любым другим способом с владельцем этого репозитория, прежде чем вносить изменения. Идеи и предложения приветствуются. Чтобы запустить среду разработки, клонируйте репозиторий и запустите:
yarn && yarn start Следующие функции развиваются:
