AI Coding Sidebar

A sidebar extension that strengthens integration with AI coding tools. Browse and manage files and folders efficiently to keep coding with AI smooth.

Features

Usage

Keyboard Shortcuts

Basic actions

1. Click the "AI Coding Sidebar" icon in the activity bar (or press Cmd+Shift+A / Ctrl+Shift+A).
2. Use Directory List to create the folder you use for AI coding.
3. Create Markdown files from Markdown List.
4. Click a timestamp-named Markdown file (e.g., 2025_1103_1227.md) in Markdown List to edit it in the Markdown Editor view below. Other Markdown files open in the standard editor.
5. Write instructions for the AI in the Markdown Editor and save with Cmd+S / Ctrl+S.
6. Right-click the Markdown file in Markdown List and choose "Copy Relative Path," then share it with your AI tool.

Template Feature

When you create a file from Markdown List, you can automatically populate it with a template. This keeps Markdown files used for AI coding consistent and saves time.

Configure the template

1. Click the gear icon (⚙️) in the Directory List pane.
2. Choose "Workspace Settings" → "Customize template."
3. .vscode/templates/file.md is created.
4. Edit the template and save it.

Default template

The first template contains the following:

created: {{datetime}}
file: {{filename}}

---

## overview


## tasks

Available variables

Use the following variables inside a template:

• {{datetime}}: Creation date and time (for example, 2025/11/3 12:27:13)
• {{filename}}: Filename including extension (for example, 2025_1103_1227.md)
• {{timestamp}}: Timestamp (for example, 2025_1103_1227)

Template priority

1. Workspace template .vscode/templates/file.md (if present)
2. Built-in extension template

Template examples

• Capture prompts for AI assistants in the overview section.
• Track to-dos in the tasks section.
• Add project-specific sections.

File Operations

Other Features

Create Files and Folders

Configure the Default Relative Path

Relative path examples

• src → <project>/src
• docs/api → <project>/docs/api
• .claude → <project>/.claude
• empty string → workspace root

When the configured path doesn't exist

If the default relative path doesn't exist, Directory List displays a "Create directory" button. Click it to automatically create the directory and display its contents.

Other

Settings

Example configuration

Add the following to .vscode/settings.json:

{
  "aiCodingSidebar.defaultRelativePath": ".claude",
  "aiCodingSidebar.sortBy": "modified",
  "aiCodingSidebar.sortOrder": "descending",
  "aiCodingSidebar.showHidden": false,
  "aiCodingSidebar.showFileIcons": true,
  "aiCodingSidebar.autoRefresh": true,
  "aiCodingSidebar.viewMode": "tree",
  "aiCodingSidebar.markdownList.sortBy": "created",
  "aiCodingSidebar.markdownList.sortOrder": "ascending"
}

Development & Build

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Recompile automatically during development
npm run watch

Debugging

Prepare

1. Install dependencies: npm install
2. Compile TypeScript: npm run compile

Start debugging

From the Command Palette (recommended)

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.
2. Type and select "Debug: Start Debugging."
3. Press Enter to launch.

Other ways to launch

• F5: Start debugging immediately.
• Run and Debug view: Open the Run and Debug icon in the sidebar, choose "Run Extension," then click the green ▶ button.
• Menu bar: Select "Run" → "Start Debugging."

While debugging

• A new VS Code window (Extension Development Host) opens.
• The activity bar now shows the "AI Coding Sidebar" icon.
• Set breakpoints, inspect variables, and step through code.
• Press Ctrl+R / Cmd+R to reload the extension.

Installation

Method 1: Development mode (for testing)

1. Clone or download this repository.
2. Open it in VS Code.
3. Press F5 to launch an Extension Development Host window.
4. Test the extension in the new VS Code instance.

Method 2: Install from a VSIX package

Recommended: Use the latest release from GitHub

1. Download the latest VSIX file from the GitHub Releases page.
2. Install via command line:

   code --install-extension ai-coding-sidebar-0.0.1.vsix
   

3. Restart VS Code.

Use a local build

# Install directly from the releases directory (version 0.0.1)
code --install-extension releases/ai-coding-sidebar-0.0.1.vsix

Build the package yourself

1. Install the VSCE tool:

   npm install -g @vscode/vsce
   

2. Create a VSIX package:

   npm run package
   

3. Install the generated VSIX file:

   code --install-extension releases/ai-coding-sidebar-0.0.1.vsix
   

4. Restart VS Code.

Automated Build & Release

This project uses GitHub Actions to build and release the extension.

How the automated build works

• Trigger: Push to the master branch.
• Build steps:
  1. Compile TypeScript.
  2. Create the VSIX package automatically.
  3. Upload the package to GitHub Releases.
  4. Update the releases/ directory in the repository.

Versioning

Release tags are created based on the version field in package.json.

# Bump versions
npm run version:patch   # 0.0.1 → 0.0.2
npm run version:minor   # 0.0.1 → 0.1.0
npm run version:major   # 0.0.1 → 1.0.0

Uninstall

Via command line

code --uninstall-extension ai-coding-sidebar

Inside VS Code

1. Open the Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
2. Search for "AI Coding Sidebar."
3. Click "Uninstall."

Requirements

• VS Code 1.74.0 or later
• Node.js (development only)