Подключаемся к VueJS проекту с большой кодовой базой. Какие есть инструменты для «code visalisation» чтобы ускорить изучение чужого кода командой?

Question

[bormor]

Подключаемся к VueJS проекту с большой кодовой базой. Ищем инструмент для "code visualisation" который бы ускорил изучение нового кода нашей командой.

Поиск выдает варианты вроде StoryBook и StyleGuidist . Что бы вы посоветовали проверенное на практике?

В идеале хотелось еще и инструмент что показывало бы общую картину кода и взаимосвязи между частями кода.
Например как ngRev для Angular.

Comments

[davidnum95]

если захотите порефакторить, есть библиотека для поиска дублирования код https://www.npmjs.com/package/jscpd

Answer 1

[Robur]

Годами хотел нечто такое. Пробовал всякое, и свои инструменты делал. Ничего не давало нужного результата - простоты понимания сложных систем.

А потом вдруг как-то понял что большой проект в виде картинки - впечатляющее, но крайне сложное в усвоении и использование с практической точки зрения зрелище. А если начинать там интерактив - свернуть, пройти по ссылке, посмотреть на какую-то часть, то навигация по коду на порядки лучше.
А для маленьких проектов, на которых все демки у таких инструментов - оно и не нужно.

В общем самое лучше средство визуализации - все еще листок с карандашом. Супер адаптивно, супер гибко, и ровно на том уровне абстракции/детализации который вам нужен.

Answer 2

[Figment]

Вопрос хоть и в теме про Vue.js, но теме не менее, может кому будет интересно. Есть такой проект, называется Getaviz, развивается университетом Лейпцига (Германия) - https://github.com/softvis-research/Getaviz

Задача как раз состоит в том, чтобы визуализировать код (2д, 3д). На данный момент поддержки JS нет, но вроде как должна скоро появиться.

Answer 3

[vindi]

Если используется webpack, то можно взять визуализаторы зависимостей.

https://medium.com/@joeclever/three-simple-ways-to...
https://survivejs.com/webpack/optimizing/build-ana...

(смотреть те, что графы строят)

Конечно оно не покажет в каких именно файлах какие компоненты используются, но найти где какой компонент применяется можно впоследствии и простым поиском файлов.