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).
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
- Read entry file as string, get
introduction and description by regular expression.
- Use babel parser to get code file's
AST. get file dependencies by import and require value from analyze AST.
- 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.
- 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.
