Archbee VS Code Extension

A powerful VS Code extension for creating, validating, and previewing Archbee documentation with integrated linting, snippets, and live preview capabilities.

Features

Markdown & MDX Support

• Full support for both Markdown (.md) and MDX (.mdx) files
• Syntax highlighting and IntelliSense for Archbee-specific blocks
• Real-time validation and error detection

Advanced Linting & Validation

• Real-time linting with markdownlint integration
• Custom Archbee rules for documentation quality
• Error blocking - preview updates only when errors are fixed
• Warning tolerance - preview works with warnings displayed
• Comprehensive diagnostics with detailed error explanations

Rich Code Snippets

Over 25 pre-built snippets for Archbee blocks including:

• UI Components: Buttons, hints, callouts, accordions, tabs
• Content Blocks: Code blocks, embeds, files, videos, diagrams
• Documentation: API methods, Swagger specs, tables of contents
• Interactive Elements: Task lists, tables, math expressions

Live Preview

• Real-time preview with automatic refresh on file save
• Error-aware preview that blocks updates when validation fails
• Integrated validation - see errors directly in preview panel
• Theme-aware - matches VS Code light/dark theme

Smart Code Actions

• Quick fixes for common markdown issues
• Auto-formatting for tables, lists, and code blocks
• Rule management - disable rules per line or file
• Bulk fixes - fix all issues in document or workspace

Document Management

• Document Explorer - browse all markdown files in workspace
• Issues Panel - centralized view of all linting issues
• File statistics - track documentation quality metrics
• Bulk operations - lint entire workspace with one command

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Archbee"
4. Click Install

Quick Start

1. Open a Markdown file - The extension activates automatically
2. Try snippets - Type ab- to see available Archbee blocks
3. Preview your document - Right-click and select "Preview" or use Command Palette
4. Fix issues - Use the Issues panel to see and fix validation errors

Configuration

Configure the extension through VS Code settings:

{
  "archbeeLint.enabled": true,
  "archbeeLint.validateOnSave": true,
  "archbeeLint.validateOnType": false,
  "archbeeLint.customRulesEnabled": true,
  "archbeeLint.configFile": ".markdownlint-cli2.yaml"
}

Available Settings

• archbeeLint.enabled - Enable/disable Archbee linting (default: true)
• archbeeLint.validateOnSave - Validate files when saved (default: true)
• archbeeLint.validateOnType - Validate while typing (default: false)
• archbeeLint.customRulesEnabled - Enable Archbee-specific rules (default: true)
• archbeeLint.configFile - Path to markdownlint configuration (default: ".markdownlint-cli2.yaml")

Commands

Access these commands through the Command Palette (Ctrl+Shift+P):

Document Operations

• Archbee Lint: Lint Current Document - Validate the active document
• Archbee Lint: Lint All Markdown Files in Workspace - Validate all markdown files
• Archbee Lint: Preview - Open live preview for current document
• Archbee Lint: Fix All Issues in Current Document - Auto-fix all fixable issues

Configuration

• Archbee Lint: Toggle Linting On/Off - Quickly enable/disable linting
• Archbee Lint: Open Settings - Open extension settings
• Archbee Lint: Show Linting Statistics - View workspace documentation metrics

Views Management

• Archbee Lint: Refresh Documents View - Refresh the document explorer
• Archbee Lint: Refresh Issues View - Refresh the issues panel

Snippet Examples

CTA Button

:::cta-button{label="Get Started" externalHref="https://docs.archbee.com" openInNewTab="true"}
:::

Hint Block

:::hint{type="warning"}
This is an important warning message.
:::

Code Block Tabs

:::codeblocktabs

```javascript
const example = 'JavaScript code'
```

example = "Python code"

:::

### API Documentation
```markdown
:::api-method{method="GET" endpoint="/api/users"}
Retrieve a list of all users in the system.
:::

Custom Rules

The extension includes Archbee-specific linting rules:

• archbee-001 - Archbee blocks must have valid syntax
• archbee-002 - Consistent heading hierarchy
• archbee-003 - API blocks require endpoint and method
• archbee-004 - Documents need required metadata
• archbee-005 - Code blocks need language specification
• archbee-006 - Internal links must use proper format
• archbee-007 - Images need descriptive alt text
• archbee-008 - Tables must have consistent columns
• archbee-009 - Workflow blocks need proper structure
• archbee-010 - Callouts must have valid types

Contributing

See CHANGELOG.md for release history and version details.

Enjoy building better documentation with Archbee! 🚀