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.