sz-p/vscode-dependencyGraph

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

English | 简体中文

📝 Introduction

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

🔥 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.

From .vsix file

download .vsix file

Use .vsix file install extension offline.

🚀 How to use

Set entry file path

Set entry file path in webview.

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

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.

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

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.

🔧 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.