Skip to content

Commit

Permalink
doc: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
sz-p committed Apr 26, 2021
1 parent e7d4e1e commit bd67143
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 11 deletions.
2 changes: 1 addition & 1 deletion RADEME-zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@

可在`画板`中通过`GUI`的方式设置。

解析文件类型以`,`分割直接往后累加即可。路径别名可手动添加
解析文件类型以`,`分割直接往后累加即可。路径别名手动添加后注意要确认

![setting-alias](./doc/setting-alias.png)

Expand Down
39 changes: 29 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ A plugin for vscode to view your project's dependency graph

## 🔥 Features

* **Show dependency graph** show dependency graph by analyze the entry file.
* **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 count,introduction,description` for display.
* **Extract function and comment from code file** extract code file's`function` and `comment` for display.
* **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

Expand All @@ -32,27 +32,46 @@ Search `dependencygraph` in extensions marketplace, download the extension in th

![download-vsix](./doc/download-vsix.png)

Use `.vsix` file install extension offline
Use `.vsix` file install extension offline.

![instell-from-vsix](./doc/instell-from-vsix.png)

## 🚀 How to use

### Set entry file path

Set entry file path in `webview`.

![setting-entry-file](./doc/setting-entry-file-gui.png)

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

![setting-entry-file](./doc/setting-entry-file-settingfile.png)

### 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](./doc/setting-alias.png)

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

![setting-alias-settingfile](./doc/setting-alias-settingfile.png)

### Set file information and description

文件`简介``注释`以一下方式在文件中书写,即可被插件识别。
The extension recognizes `information` and `description` what is written in the following ways.

```js
/**
* @introduction This is introduction
*
* @description This is description\n this sentences will show
* @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 |
Expand All @@ -63,12 +82,12 @@ Use `.vsix` file install extension offline

1. Read entry file as string, get `introduction` and `description` by `regular expression`.
2. Use [babel parser](https://github.com/babel/babel/tree/main/packages/babel-parser) to get code file's `AST`. get file dependencies by `import` and `require` value from analyze `AST`.
3. Use [enhanced-resolve](https://github.com/webpack/enhanced-resolve) to get dependencies absolute path by values of `import` and `require` and file's absolute path. set dependencies absolute path to file queue
4. Analyze file queue to get whole dependency tree
3. Use [enhanced-resolve](https://github.com/webpack/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`
To build a graph like `visual studio class view` for developer to view and analyze `dependency tree` or `module relationship`.

![visual-studio-class-view](./doc/visual-studio-class-view.png)

Expand All @@ -90,7 +109,7 @@ press `F5` in vscode to start dev process.

### `yarn test`

You can find test case in [tests](https://github.com/sz-p/vscode-dependencyGraph/tree/master/tests). use `yarn test` to start testing
You can find test case in [tests](https://github.com/sz-p/vscode-dependencyGraph/tree/master/tests). use `yarn test` to start testing.

## ⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
Expand Down

0 comments on commit bd67143

Please sign in to comment.