Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>VSCode Folder Structure GeneratorNew to Visual Studio Code? Get it now.
VSCode Folder Structure Generator

VSCode Folder Structure Generator

Firos K

|
70 installs
| (1) | Free
Generates a markdown-formatted folder structure of your project.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

📁 VS Code Folder Structure Generator

A simple yet powerful Visual Studio Code extension to generate and copy your project’s folder structure in multiple formats — Markdown, JSON, and YAML — directly from your workspace.


🚀 How to Run

1️⃣ Generate Markdown Tree (Default)

  1. Open your project in Visual Studio Code.
  2. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette.
  3. Type Generate Folder Structure and select the command.
  4. The folder structure will be copied to your clipboard in a neat Markdown tree format.
  5. Paste it into your README.md or documentation.

2️⃣ Export in JSON / YAML / Markdown

  1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
  2. Type Export Folder Structure (JSON/YAML/Markdown) and select the command.
  3. Choose your preferred format from the prompt (JSON, YAML, or Markdown).
  4. The folder structure will be copied to your clipboard in the chosen format.
  5. Paste it into your docs, config files, APIs, or any tool that accepts structured data.

✨ Features

  • 📋 Copies folder structure to clipboard in Markdown, JSON, or YAML format
  • 🧠 Ignores node_modules and hidden folders by default
  • 🎯 Perfect for README.md, documentation, automation, and integrations
  • 🛠️ Lightweight and blazing fast

📸 Example Outputs

JSON

{
  "name": "my-app",
  "type": "folder",
  "children": [
    {
      "name": "src",
      "type": "folder",
      "children": [
        {
          "name": "components",
          "type": "folder",
          "children": [
            { "name": "Header.tsx", "type": "file" },
            { "name": "Sidebar.tsx", "type": "file" }
          ]
        },
        { "name": "App.tsx", "type": "file" }
      ]
    },
    { "name": "style.css", "type": "file" },
    { "name": "index.html", "type": "file" }
  ]
}


YAML

name: my-app
type: folder
children:
  - name: src
    type: folder
    children:
      - name: components
        type: folder
        children:
          - name: Header.tsx
            type: file
          - name: Sidebar.tsx
            type: file
      - name: App.tsx
        type: file
  - name: style.css
    type: file
  - name: index.html
    type: file


---

## 💡 Pro Tips

- Use **Markdown** format for human-readable documentation.
- Use **JSON** or **YAML** format for automation, APIs, or configuration files.
- Easily switch between formats via the **Export Folder Structure (JSON/YAML/Markdown)** command.

---

## 🔖 Changelog

**v0.0.6**
- Added new command to export folder structure in JSON, YAML, or Markdown format.
- Improved README with multiple format examples and icons.

---

## 🛠️ Author

Created by **FirosK** — enhancing developer productivity one extension at a time.

---

💬 *Enjoying this extension? Please consider leaving a ⭐ rating and review on the Visual Studio Marketplace to help others discover it!*
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft