VSCode ASCII Tree Generator

Generate ASCII tree of directories or format selected text into its corresponding "tree string" representation.

Usage

Generate ASCII "tree strings" for any directory in the workspace explorer. Aside from that, you can also select pre-formatted text in the explorer and format it to its corresponding "tree string" easily.

Format Selected Text to Tree String

Using the # (octothorpe/hash) character, you can specify the depth of the current element. After writing a few lines (see example below), select the targetted pre-formatted lines, right-click on the highlighted text selection, and click Format to Tree String menu option. This will replace the selected, pre-formatted text, into its corresponding "tree string" representation.

For clarity, each line of your target tree structure should begin with at least a single # (octothorpe/hash) character. At most, each line can only have one more additional # than any line above it. This will ensure proper formatting. By placing multiple # symbols, it is possible to designate the depth of a certain element.

Demonstration

Pre-Formatted Tree String

# public
# dist
## index.d.ts
## index.js
# src
## index.ts

Formatted Tree String

.
├── public
├── dist
│   ├── index.d.ts
│   └── index.js
└── src
  └── index.ts

Addendum

In cases where you would like to undo the formatting operation, simply use VSCode's editor undo option (Edit→Undo). You can optionally use the keybindings for undo as well (⌘+Z on Mac or CTRL+Z on Windows). However, this option will fail in cases where the undo operation is invalid (e.g. text inside downloaded materials).

In all cases, you can revert formatting tree strings back to their preformatted versions by selecting the formatted tree string, heading to the VSCode Command Pallete (⌘+SHIFT+P on Mac or CTRL+SHIFT+P on Windows), and executing Revert Tree String to Text. As long as the matching lines up, this should provide back your intended pre-formatted tree string.

Generate Tree String for Directory

In addition to being able to format pre-formatted tree strings, you may also generate tree strings for directories inside your current workspace (directories appearing in Explorer tab). To do so, right-click on any directory, or empty space, within the Explorer tab and select the Generate Tree String for Directory menu option. An example is shown below.

Addendum

The walking process through files is performed asynchronously. Therefore, selecting heavily-nested folders (e.g. node_modules) will directly affect performance speed.

By default, node_modules and .git are ignored while generating tree string for directories. However, this can be customized by setting asciiTreeGenerator.directoryIgnore in configurations. Also, setting asciiTreeGenerator.directoryMaxDepth can limit the depth of directory walking-through.

Configuration

Each tree string character can be defined by its ASCII code representation (UTF character code, more generally). As such, the theorectical range for character codes is 0 to 65535 (two bytes). However, and important to note, is that not every character code is printable and/or may cause formatting issues.

The available parameters are:

Sample Configurations

Commonly used configurations that you can manually enable by entering the values for each of the aforementioned property names above (perfom these changes inside a settings.json file).

Issues and Contribution

Please feel free to submit any issues or bugs you find with the extension. More generally, please reach out if you have any questions on how to use the extension.

Finally, contribution or ideas are humbly welcomed so please check us out on GitHub :) !