CodeMapper

CodeMapper maps and displays your workspace structure and file contents, providing an easy way to visualize and navigate your project. It also fosters a smoother collaboration experience by enabling easy sharing of your project with AI models with a single click.

[ALPHA] Please note that this extension is currently in alpha stage. While it provides useful functionality, there may be occasional bugs or issues.

Features

• Map Your Entire Workspace Structure: Visualize the hierarchical structure of your project directories and files.
• Display File Contents: View the contents of your files directly within the extension.
• Exclude Specific File Types: Customize which file types are displayed in the workspace map.
• Exclude Specific Folders: Omit entire folders from the workspace map to focus on relevant content.
• Copy All Displayed Content: Easily copy the entire repository structure and file contents with a single click.
• Save Excluded Items: Persist your excluded files and folders in a configuration file for consistent mapping across sessions.
• Reload Configuration: Refresh the workspace map to reflect changes in the excluded items configuration.
• Token Estimation Feature: Get an approximate token count for your workspace content, helping you understand AI model compatibility and potential costs. Hover over the token count for detailed statistics.

Usage

1. Open a Workspace in Visual Studio Code:

   • Navigate to File > Open Workspace... and select your project directory.

2. Map the Workspace:

   • Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
   • Type Map Workspace and select the command CodeMapper: Map Workspace.
   • The CodeMapper panel will open, displaying your workspace structure.

3. Interact with the Workspace Map:

   • Collapse/Expand Folders: Click on folder names to toggle their expanded or collapsed state.
   • View File Contents: Click on a file to display its contents in the main content area.
   • Search: Use the search bar at the top of the sidebar to filter files and folders.

Excluding Files and Folders

To exclude specific files or folders from your workspace map:

1. Navigate to the Explorer Panel:

   • Open the Explorer view (Ctrl+Shift+E or Cmd+Shift+E on macOS).

2. Exclude an Item:

   • Locate the file or folder you want to exclude.
   • Right-click on the item.
   • Select "Exclude Item" from the context menu.

3. Save Excluded Items:

   • In the CodeMapper panel, click the 💾 Save Excluded button.
   • This action saves your exclusions to .codemapper/config.json, ensuring they persist across sessions.

4. Clear Excluded Items:

   • To remove all exclusions, click the Clear Excluded Items button from the context menu or use the Clear Excluded command.

Managing Exclusions

• Save Excluded Items (💾 Save Excluded):

  • Saves the currently excluded files and folders to .codemapper/config.json.
  • Ensures that your exclusions are maintained even after restarting VS Code.

• Reload Configuration (🔄 Reload):

  • Reloads the excluded items from .codemapper/config.json.
  • Useful if you've manually edited the configuration file or want to refresh the workspace map.

Copying All Content

To copy the entire repository structure and file contents:

1. Click the 📋 Copy All Button:

   • Located in the header of the CodeMapper panel.

2. Paste the Copied Content:

   • The copied content includes a well-formatted repository structure and the contents of each file.
   • You can paste this into any text editor or document for sharing or further analysis.

   Benefits:

   • Structured Output: The repository structure starts with the root node and clearly displays nested directories and files.
   • Readable File Contents: Each file's content is prefixed by its filename, making it easy to identify and navigate through the copied information.

Configuration

You can configure CodeMapper in your VS Code settings to customize its behavior:

• codemapper.excludedFileTypes: An array of file extensions to exclude from the workspace map.

Example Configuration:

"codemapper.excludedFileTypes": [".jpg", ".png", ".pdf", ".svg"]

Additional Configuration Options:

• Excluded Items Persistence:
  • Excluded files and folders are saved in .codemapper/config.json.
  • This ensures that your exclusions are maintained across different sessions and workspace reloads.

Managing Exclusions via Configuration File

CodeMapper stores excluded items in a JSON configuration file located at .codemapper/config.json within your workspace. Here's how you can manage it:

1. Locate the Configuration File:

   • Path: <Your Workspace>/ .codemapper/config.json

2. Edit Excluded Items:

   • Open config.json in any text editor.
   • Add or remove file and folder paths as needed.

3. Reload Configuration:

   • After making changes, click the 🔄 Reload button in the CodeMapper panel to apply the updates.

Example config.json:

{
    "excludedItems": [
        "node_modules",
        "dist",
        "build",
        "secretFolder"
    ]
}

Note: Files and folders such as .git, .DS_Store, .svn, and .hg are automatically excluded from the workspace map.

Key Updates and Changes:

1. New Buttons in Webview UI:

   • 💾 Save Excluded: Saves the currently excluded files and folders to .codemapper/config.json.
   • 🔄 Reload: Reloads the excluded items configuration from .codemapper/config.json.

2. Persistent Exclusions:

   • Excluded items are now saved in .codemapper/config.json, ensuring that exclusions persist across sessions.
   • Users can manually edit this configuration file to manage exclusions.

3. Configuration Reloading:

   • The 🔄 Reload button allows users to refresh the workspace map to reflect any changes made to the exclusion configuration.

4. User Interface Improvements:

   • The webview UI has been styled for better usability and visual appeal.
   • Interactive elements like buttons and the tree view have improved responsiveness and accessibility.