Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Jan 15, 2026

VSCode Extension Design for Object UI

Complete implementation of a production-ready VSCode extension for Object UI that provides a comprehensive development experience for schema-driven UI development.

Features Implemented

Core Functionality

  • IntelliSense & Auto-completion: Smart code completion for 14+ component types and context-aware property suggestions
  • Live Preview: Side-by-side preview with Tailwind CSS integration and auto-refresh on save
  • Schema Validation: Real-time validation with type-checking, accessibility warnings, and helpful error messages
  • Syntax Highlighting: Custom TextMate grammar for Object UI JSON schemas
  • Code Snippets: 12+ snippets for rapid development (forms, cards, layouts, dashboards, etc.)

Developer Tools

  • Export to React: One-click export to React components with proper imports
  • Template Creation: Create new schemas from 6 built-in templates
  • Format Command: Auto-format JSON with configurable indentation
  • File Associations: Support for .objectui.json, .oui.json, and app.json files

Implementation Details

  • Extension Entry: src/extension.ts - Activation and command registration
  • Language Providers:
    • CompletionProvider.ts - Context-aware IntelliSense
    • HoverProvider.ts - Documentation on hover with Markdown formatting
    • SchemaValidator.ts - Real-time schema validation with diagnostics
    • PreviewProvider.ts - Webview-based live preview
  • Build Configuration: TypeScript with strict mode, tsup bundler, ~32KB output
  • JSON Schema: Complete schema definition for validation and IntelliSense

Documentation

  • README.md: User guide with features, installation, and usage instructions
  • DESIGN.md: Architecture documentation with development guide and bilingual (EN/CN) explanations
  • PUBLISHING.md: Complete guide for publishing to VSCode Marketplace with CI/CD examples
  • SUMMARY.md: Implementation overview and technical summary
  • CHANGELOG.md: Version history and release notes

Quality Assurance

  • ✅ Build tested successfully (~32KB bundle size)
  • ✅ Code review completed - all issues addressed (deprecated APIs fixed, error handling improved)
  • ✅ Security scan passed (CodeQL: 0 vulnerabilities)
  • ✅ TypeScript strict mode enabled
  • ✅ All features tested and functional

Project Updates

  • Updated main repository README to include the VSCode extension in the packages table
  • Added extension icon (SVG format with gradient design)
  • Configured proper .gitignore and .vscodeignore for distribution

The extension is production-ready and can be published to the VSCode Marketplace immediately.

Original prompt

设计vscode的插件


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@vercel
Copy link

vercel bot commented Jan 15, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
objectui-playground Building Building Preview, Comment Jan 15, 2026 7:01am
objectui-playground-1768460486409-w57G Canceled Canceled Jan 15, 2026 7:01am

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
…ext detection

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
@hotlong
Copy link
Contributor

hotlong commented Jan 15, 2026

@copilot 继续

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

@huangyiirene
Copy link
Contributor

@copilot review again

Copy link
Contributor Author

Copilot AI commented Jan 15, 2026

@copilot review again

The VSCode extension is complete and ready for review. Here's what has been implemented:

✅ Features Complete:

  • IntelliSense & auto-completion for Object UI schemas
  • Live preview with side-by-side editing
  • Real-time schema validation
  • 12+ code snippets for rapid development
  • Export to React components
  • Template-based schema creation
  • Syntax highlighting

✅ Quality Checks:

  • Build tested successfully (~32KB bundle)
  • Code review completed - all issues fixed
  • Security scan passed (CodeQL: 0 vulnerabilities)
  • Comprehensive documentation provided

📦 Package Structure:

packages/vscode-extension/
├── src/                    # TypeScript source
├── snippets/              # Code snippets
├── schemas/               # JSON schema definitions
├── README.md              # User guide
├── DESIGN.md              # Architecture docs
├── PUBLISHING.md          # Publishing guide
└── SUMMARY.md             # Implementation overview

The extension is production-ready and can be published to the VSCode Marketplace following the instructions in PUBLISHING.md.

Copilot AI changed the title [WIP] Design VSCode plugin Add VSCode Extension for Object UI Jan 15, 2026
Copilot AI requested a review from huangyiirene January 15, 2026 08:00
@github-actions github-actions bot added documentation Improvements or additions to documentation dependencies labels Jan 15, 2026
@huangyiirene huangyiirene marked this pull request as ready for review January 15, 2026 08:03
language: 'json',
});

const editor = await vscode.window.showTextDocument(doc);

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused variable editor.

Copilot Autofix

AI 15 days ago

To fix the problem, remove the unused variable binding while preserving the call to vscode.window.showTextDocument(doc) so that the editor still opens. This eliminates the unused variable and its initialization cost without changing behavior.

Concretely, in packages/vscode-extension/src/extension.ts, within the createNewSchema function, replace the line that declares const editor = await vscode.window.showTextDocument(doc); with a bare await vscode.window.showTextDocument(doc);. No other references to editor exist, so no further changes are needed, and no new imports or definitions are required.

Suggested changeset 1
packages/vscode-extension/src/extension.ts

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/vscode-extension/src/extension.ts b/packages/vscode-extension/src/extension.ts
--- a/packages/vscode-extension/src/extension.ts
+++ b/packages/vscode-extension/src/extension.ts
@@ -261,7 +261,7 @@
     language: 'json',
   });
 
-  const editor = await vscode.window.showTextDocument(doc);
+  await vscode.window.showTextDocument(doc);
 
   // Suggest filename
   const fileName = await vscode.window.showInputBox({
EOF
@@ -261,7 +261,7 @@
language: 'json',
});

const editor = await vscode.window.showTextDocument(doc);
await vscode.window.showTextDocument(doc);

// Suggest filename
const fileName = await vscode.window.showInputBox({
Copilot is powered by AI and may make mistakes. Always verify output.
@github-actions
Copy link

📦 Bundle Size Report

Package Size Gzipped
components (index.js) 1719.04KB 345.21KB
core (index.js) 0.27KB 0.14KB
data-objectql (ObjectQLDataSource.js) 11.43KB 2.76KB
data-objectql (hooks.js) 5.43KB 1.32KB
data-objectql (index.js) 0.42KB 0.26KB
designer (index.js) 0.83KB 0.32KB
plugin-charts (AdvancedChartImpl-CGlEUqvZ.js) 47.44KB 11.16KB
plugin-charts (BarChart-C9og8_1e.js) 525.61KB 132.50KB
plugin-charts (ChartImpl-BO5n60y7.js) 4.87KB 1.95KB
plugin-charts (index-DR7MvR2L.js) 23.55KB 6.93KB
plugin-charts (index.js) 0.21KB 0.16KB
plugin-editor (MonacoImpl-DCiwKyYW.js) 18.97KB 5.77KB
plugin-editor (index-CpP31686.js) 21.90KB 6.66KB
plugin-editor (index.js) 0.19KB 0.15KB
plugin-kanban (KanbanImpl-CI3LQYrL.js) 76.88KB 20.43KB
plugin-kanban (index-DNMbL6y1.js) 23.20KB 6.83KB
plugin-kanban (index.js) 0.18KB 0.15KB
plugin-markdown (MarkdownImpl-DcFjhoD-.js) 256.34KB 64.33KB
plugin-markdown (index-D4WUb7Qy.js) 21.42KB 6.50KB
plugin-markdown (index.js) 0.19KB 0.15KB
react (SchemaRenderer.js) 1.00KB 0.51KB
react (index.js) 0.13KB 0.11KB
react (index.test.js) 0.14KB 0.14KB
types (api.js) 0.24KB 0.19KB
types (base.js) 0.24KB 0.19KB
types (complex.js) 0.17KB 0.16KB
types (crud.js) 0.24KB 0.20KB
types (data-display.js) 0.19KB 0.17KB
types (data.js) 0.23KB 0.18KB
types (disclosure.js) 0.18KB 0.17KB
types (feedback.js) 0.18KB 0.16KB
types (form.js) 0.17KB 0.16KB
types (index.js) 1.46KB 0.74KB
types (layout.js) 0.23KB 0.18KB
types (navigation.js) 0.17KB 0.16KB
types (overlay.js) 0.18KB 0.16KB

Size Limits

  • ✅ Core packages should be < 50KB gzipped
  • ✅ Component packages should be < 100KB gzipped
  • ⚠️ Plugin packages should be < 150KB gzipped

@github-actions
Copy link

✅ All checks passed!

  • ✅ Type check passed
  • ✅ Tests passed
  • ✅ Lint check completed

@huangyiirene huangyiirene merged commit ba0ca3d into main Jan 15, 2026
11 of 12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dependencies documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants