CodeWiki Plugin

English | 简体中文

A Visual Studio Code extension that provides seamless access to project documentation from CodeWiki platform.

🚀 What is CodeWiki Plugin?

CodeWiki Plugin is a VSCode extension that allows developers to browse and access project documentation directly from within their IDE. It integrates with the CodeWiki platform to provide:

• Automatic Documentation Discovery: Automatically detects and loads documentation for your current project
• Interactive Documentation Tree: Browse documentation in a hierarchical tree structure in the sidebar
• Repository Analysis: Analyze repositories to generate documentation when none exists
• Real-time Status Updates: Track documentation analysis progress with visual status indicators
• Seamless Integration: Works with your existing VSCode workflow

📖 How to Use the Plugin

Installation

1. Install the plugin from the VSCode marketplace or install the .vsix file:

   code --install-extension codewiki-plugin-0.0.1.vsix
   

2. The plugin will automatically activate when you open a project.

Basic Usage

Viewing Documentation

1. Open a Project: Open any Git repository under bike group in VSCode
2. Access CodeWiki Sidebar: Look for the "CodeWiki" panel in the sidebar
3. Browse Documentation:
   • If documentation exists, you'll see a tree view with all available docs
   • Click on any document to view it in the main editor

When No Documentation Exists

1. Analyze Repository: Click the "Analyze Repository" button when prompted
2. Authentication: You may be prompted to authenticate with the CodeWiki platform
3. Wait for Analysis: The system will analyze your repository and generate documentation
4. Status Tracking: Monitor progress through visual indicators:
   • Loading: Initial project lookup
   • Pending Approval: Analysis request awaiting admin approval
   • Analyzing: Documentation generation in progress
   • Completed: Documentation ready to view

Status Indicators

• 🔄 Loading: Checking for existing documentation
• 🕐 Pending Approval: Analysis request submitted, awaiting admin approval
• ⚡ Analyzing: Repository analysis in progress
• 📄 Documentation: Documentation available and ready to browse
• ❌ Error: Something went wrong, try refreshing

Commands

• CodeWiki: Refresh - Manually refresh documentation
• CodeWiki: Open Panel - Open the main CodeWiki panel

Switching Projects

The plugin automatically detects when you switch projects. Use any of these methods:

Method 1: Open Folder (Recommended)

1. File → Open Folder...
2. Select your project folder
3. Plugin automatically refreshes

Method 2: Quick Switch

1. Press the quick switch shortcut:
   • Windows/Linux: Ctrl+R
   • Mac: Cmd+R
2. Select from recent projects
3. Plugin automatically refreshes

Method 3: Command Palette

1. Press the command palette shortcut:
   • Windows/Linux: Ctrl+Shift+P
   • Mac: Cmd+Shift+P
2. Type "File: Open Folder"
3. Select project folder

🔧 Development, Maintenance & Debugging

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• VSCode (v1.84.0 or higher)

Setup Development Environment

1. Clone the repository:

   git clone <repository-url>
   cd codewiki-plugin
   

2. Install dependencies:

   npm install
   

3. Compile the project:

   npm run compile
   

Development Workflow

1. Start Development:

   • Open the project in VSCode
   • Press F5 to launch Extension Development Host
   • This opens a new VSCode window with the extension loaded

2. Make Changes:

   • Edit source files in src/
   • The extension will automatically recompile on save
   • Reload the Extension Development Host to see changes:
     • Windows/Linux: Ctrl+R
     • Mac: Cmd+R

3. Debugging:

   • Set breakpoints in your TypeScript code
   • Use the Debug Console to inspect variables
   • View logs in the Extension Host output channel

Project Structure

src/
├── extension.ts              # Main extension entry point
├── services/                 # Business logic services
│   ├── codeWikiService.ts   # CodeWiki API integration
│   ├── gitService.ts        # Git repository handling
│   └── ssoService.ts        # Authentication service
├── views/                   # UI components
│   ├── treeDataProvider.ts  # Documentation tree view
│   └── analyzeButtonWebView.ts # Status and action WebView
├── webview/                 # WebView panels
│   ├── panel.ts             # Main documentation panel
│   └── webviewContent.ts    # HTML content generation
└── types/                   # TypeScript type definitions
    └── project.ts           # Project and task type definitions

Key Development Commands

# Compile TypeScript (development)
npm run compile

# Watch mode (auto-compile on changes)
npm run watch

# Build for production (webpack bundling)
npm run package

# Run tests
npm test

# Lint code
npm run lint

# Package extension into .vsix
npm run package-extension

Switch Debug Projects

1. In debug window, use quick switch to change projects:
   • Windows/Linux: Ctrl+R
   • Mac: Cmd+R
2. Plugin automatically detects and refreshes
3. Or use File → Open Folder...

📦 How to Publish the Plugin

Prerequisites for Publishing

1. Install vsce (Visual Studio Code Extension manager):

   npm install -g @vscode/vsce
   

2. Update package.json with required fields:

   {
     "publisher": "your-publisher-name",
     "repository": {
       "type": "git",
       "url": "https://github.com/your-username/codewiki-plugin.git"
     },
     "license": "MIT"
   }
   

Packaging

1. Build the project with webpack (bundles all dependencies):

   npm run package
   

2. Package into .vsix file:

   npm run package-extension
   

   Or manually:

   vsce package --baseContentUrl https://git.sankuai.com/bike/codewiki-plugin/blob/main/
   

   This creates codewiki-plugin-x.x.x.vsix

Note: The plugin uses webpack to bundle all dependencies (including markdown-it, axios, etc.) into a single extension.js file. This ensures the packaged extension works correctly without missing module errors.

Publishing Options

Option 1: VSCode Marketplace (Public)

1. Create Publisher Account:

   • Visit Visual Studio Marketplace
   • Create a publisher account

2. Login with vsce:

   vsce login your-publisher-name
   

3. Publish:

   vsce publish
   

Option 2: Local/Private Distribution

1. Share .vsix file directly with users
2. Install via command:

   code --install-extension codewiki-plugin-x.x.x.vsix
   

3. Install via VSCode UI:
   • Open command palette:
     • Windows/Linux: Ctrl+Shift+P
     • Mac: Cmd+Shift+P
   • Type "Extensions: Install from VSIX..."
   • Select the .vsix file

Option 3: Enterprise Distribution

1. Upload to internal extension registry
2. Host on internal file server
3. Distribute through company channels

Pre-Publication Checklist

• [ ] Update version number in package.json
• [ ] Add/update README.md with usage instructions
• [ ] Add LICENSE file
• [ ] Update CHANGELOG.md with release notes
• [ ] Test extension thoroughly in both development and packaged modes
• [ ] Run npm run package to ensure webpack bundling works correctly
• [ ] Verify all dependencies are bundled (no missing module errors)
• [ ] Check .vscodeignore excludes unnecessary files (src/, node_modules/, etc.)
• [ ] Test the .vsix package in a clean VSCode installation

Version Management

# Patch version (bug fixes)
vsce publish patch

# Minor version (new features)
vsce publish minor

# Major version (breaking changes)
vsce publish major

# Specific version
vsce publish 1.0.0

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📞 Support

For issues and questions:

• Create an issue on GitHub
• Contact the development team
• Check the troubleshooting section above

Happy coding with CodeWiki! 🚀