Skip to content

sz-p/vscode-dependencyGraph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4ef06a3 ยท Nov 26, 2024
May 10, 2021
Nov 19, 2024
Apr 9, 2021
Nov 19, 2024
Apr 28, 2021
Jul 1, 2024
Nov 19, 2020
Nov 25, 2024
Jul 5, 2024
Jun 27, 2024
Jun 27, 2024
Nov 19, 2020
Apr 22, 2021
Aug 28, 2023
Nov 19, 2024
Jul 10, 2021
Apr 8, 2021
Nov 26, 2024
Apr 28, 2022
May 2, 2021
Jul 2, 2024
Nov 26, 2024
Apr 8, 2021
Apr 8, 2021
Apr 3, 2022
Dec 29, 2019
Dec 29, 2019
Jul 2, 2024

Repository files navigation

English | ็ฎ€ไฝ“ไธญๆ–‡

๐Ÿ“ Introduction

A plugin for vscode to view your project's dependency graph

DependencyGraph-screenshot

๐Ÿ”ฅ Features

  • Show dependency graph show dependency graph by analyze the project file.
  • Save dependency tree data save dependency tree data to local json file.
  • Export dependency graph img export dependency graph's svg or png.
  • Extract basic information from file extract file's type,line,introduction,description to display.
  • Extract function and comment from code file extract code file's function and comment to display.

โš™๏ธ Installation

From marketplace

Search dependencygraph in extensions marketplace, download the extension in the following figure.

install-from-marketplace

From .vsix file

download .vsix file

download-vsix

Use .vsix file install extension offline.

instell-from-vsix

๐Ÿš€ How to use

Set entry file path

Set entry file path in webview.

setting-entry-file

Set entry file path in setting file(setting file path is .dependencygraph/setting.json).

setting-entry-file

Set resolve or alias

Set Resolve extensions or Resolve alias in webview.

Add Resolve alias in input box, split by ,. set Resolve alias and Resolve path click insert button to add item and don't forget click Confirm.

setting-alias

Set Resolve extensions or Resolve alias in setting file(setting file path is .dependencygraph/setting.json).

setting-alias-settingfile

Set file information and description

The extension recognizes information and description what is written in the following ways.

/**
 * @introduction This is introduction
 *
 * @description This is description\n this sentences will show next row
 */

๐Ÿ“ Supported file

File type .js .ts .jsx .tsx .vue .scss .less .sass .py .php .go
Support status โœ… โœ… โœ… โœ… โœ… โœ… โœ… โœ…

๐Ÿ“ How it work

  1. Read entry file as string, get introduction and description by regular expression.
  2. Use babel parser to get code file's AST. get file dependencies by import and require value from analyze AST.
  3. Use enhanced-resolve to get dependencies absolute path by value of import, require and file's absolute path. set dependencies absolute path to file queue.
  4. Analyze file queue to get whole dependency tree.

๐ŸŒŒ Target

To build a graph like visual studio class view for developer to view and analyze dependency tree or module relationship.

visual-studio-class-view

๐Ÿ”ง Develop

yarn install

install necessary dependency packages.

yarn watch

watch file change and build file.

F5

press F5 in vscode to start dev process.

๐Ÿšฆ Testing

yarn test

You can find test case in tests. use yarn test to start testing.

โญ๏ธ Show Your Support

Please give a โญ๏ธ if this project helped you!

๐Ÿ‘ Contributing

If you have any questions or requests or want to contribute to DependencyGraph, please write the issue or give me a Pull Request freely.

๐Ÿž Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.