Skip to content

Commit c3f0158

Browse files
CalvinAllenCalvinAllen
committed
feat: implement VSIX Manifest Designer extension
Visual editor for VS Code extension manifest (package.json) files with: - Custom editor provider with bidirectional JSON sync - Svelte-based webview UI with VS Code theme integration - 16 editor views covering all manifest sections: - Metadata, Activation, Compatibility, Dependencies, Documentation - Commands, Configuration, Menus, Keybindings - View Containers, Views, Languages, Grammars - Themes, Snippets, Advanced - Real-time validation and error handling - DataGrid component for collection editing Closes #2 Closes #3 Closes #4 Closes #5 Closes #6 Closes #7
0 parents  commit c3f0158

67 files changed

Lines changed: 15214 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
out/
3+
*.vsix
4+
.DS_Store
5+
*.log

‎.vscode/launch.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Run Extension",
6+
"type": "extensionHost",
7+
"request": "launch",
8+
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
9+
"outFiles": ["${workspaceFolder}/out/**/*.js"],
10+
"preLaunchTask": "npm: compile"
11+
}
12+
]
13+
}

‎.vscode/tasks.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"version": "2.0.0",
3+
"tasks": [
4+
{
5+
"type": "npm",
6+
"script": "compile",
7+
"problemMatcher": "$tsc",
8+
"label": "npm: compile",
9+
"group": {
10+
"kind": "build",
11+
"isDefault": true
12+
}
13+
},
14+
{
15+
"type": "npm",
16+
"script": "watch",
17+
"problemMatcher": "$tsc-watch",
18+
"label": "npm: watch",
19+
"isBackground": true
20+
}
21+
]
22+
}

‎.vscodeignore‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.vscode/
2+
.claude/
3+
node_modules/
4+
src/
5+
webview-ui/src/
6+
webview-ui/node_modules/
7+
webview-ui/*.json
8+
webview-ui/*.js
9+
webview-ui/*.ts
10+
*.ts
11+
**/*.map
12+
.gitignore
13+
tsconfig.json
14+
*.md
15+
!README.md

‎CLAUDE.md‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Project Overview
6+
7+
VSIX Manifest Designer is a VS Code extension that provides a visual designer for VS Code extension manifest (`package.json`) files using the Custom Editor API.
8+
9+
## Build Commands
10+
11+
```bash
12+
npm run install:all # Install all dependencies (root + webview-ui)
13+
npm run compile # Build extension and webview
14+
npm run compile:extension # Build extension only
15+
npm run compile:webview # Build webview only
16+
npm run watch # Watch extension for changes
17+
npm run watch:webview # Watch webview for changes (dev server)
18+
npm run package # Create VSIX package
19+
```
20+
21+
## Development
22+
23+
1. Run `npm run install:all` to install all dependencies
24+
2. Run `npm run compile` to build everything
25+
3. Press F5 in VS Code to launch the Extension Development Host
26+
27+
For webview development, run `npm run watch:webview` in a separate terminal for hot reload.
28+
29+
## Architecture
30+
31+
```
32+
src/ # Extension code (TypeScript)
33+
├── extension.ts # Extension entry point
34+
├── editor/
35+
│ └── ManifestEditorProvider.ts # Custom editor provider
36+
├── models/
37+
│ ├── index.ts # Model exports
38+
│ └── VscodeManifest.ts # TypeScript interfaces for manifest
39+
├── services/
40+
│ ├── index.ts # Service exports
41+
│ ├── ManifestService.ts # Parse/serialize with round-trip preservation
42+
│ └── ValidationService.ts # Field validation
43+
└── webview/
44+
├── getNonce.ts # CSP nonce generator
45+
└── getWebviewContent.ts # Webview HTML generator (loads Svelte bundle)
46+
47+
webview-ui/ # Webview code (Svelte + Vite)
48+
├── src/
49+
│ ├── main.ts # Svelte app entry point
50+
│ ├── App.svelte # Root component
51+
│ ├── stores/
52+
│ │ └── manifestStore.ts # Svelte stores for state management
53+
│ ├── components/
54+
│ │ ├── Navigation.svelte # Sidebar navigation
55+
│ │ └── views/
56+
│ │ └── MetadataView.svelte # Metadata editing view
57+
│ └── styles/
58+
│ └── global.css # Global styles with VS Code theming
59+
├── vite.config.ts # Vite build configuration
60+
└── package.json # Webview dependencies
61+
62+
out/ # Build output
63+
├── extension.js # Bundled extension
64+
└── webview/
65+
├── main.js # Bundled Svelte app
66+
└── assets/
67+
└── main.css # Extracted CSS
68+
```
69+
70+
### Models
71+
72+
**VscodeManifest.ts** defines TypeScript interfaces for all VS Code extension manifest fields:
73+
- Core fields: name, version, publisher, engines
74+
- Display: displayName, description, icon, categories
75+
- Contributions: commands, configuration, menus, keybindings, views, languages, grammars, themes, snippets, custom editors, and more
76+
- Marketplace: galleryBanner, badges, repository
77+
78+
### Services
79+
80+
**ManifestService** handles parsing and serialization:
81+
- `parse(content)` - Parse JSON to VscodeManifest, detect indentation
82+
- `serialize(manifest, options)` - Convert back to JSON preserving formatting
83+
- `update(original, updates)` - Merge updates without losing other fields
84+
- `detectExtension(manifest)` - Check if package.json is a VS Code extension
85+
- `initializeAsExtension(manifest)` - Add minimal extension fields
86+
87+
**ValidationService** validates manifest fields:
88+
- `validate(manifest)` - Full validation returning errors/warnings/info
89+
- `validateField(field, value)` - Single field validation
90+
- Checks: required fields, formats (semver, npm name), categories, commands, configuration, activation events, best practices
91+
92+
### Webview UI (Svelte)
93+
94+
The webview is built with Svelte + Vite for a reactive, component-based UI.
95+
96+
**Stores** (`manifestStore.ts`):
97+
- `manifestStore` - Main store with manifest data, validation, detection status
98+
- `navigationStore` - Current view selection
99+
- Helper functions: `postMessage()`, `getVsCodeApi()`
100+
101+
**Views**:
102+
- `MetadataView` - Edit name, displayName, version, publisher, description, categories, icon, galleryBanner, keywords
103+
- Placeholder views for: Activation, Contributions, Capabilities, Marketplace
104+
105+
**Theming**: Uses VS Code CSS custom properties (`--vscode-*`) for seamless theme integration.
106+
107+
## Key Patterns
108+
109+
### Custom Editor Registration
110+
111+
The extension uses `vscode.window.registerCustomEditorProvider` with:
112+
- View type: `vsixManifestDesigner.editor`
113+
- Priority: `option` (user can choose to open with designer)
114+
- File pattern: `package.json`
115+
116+
### Webview Communication
117+
118+
Messages from extension to webview:
119+
- `update` - Parsed manifest, detection result, validation result
120+
- `parseError` - JSON parse error with line/column
121+
122+
Messages from webview to extension:
123+
- `ready` - Webview initialized, request data
124+
- `edit` - Raw content edit
125+
- `updateManifest` - Partial manifest updates (preserves other fields)
126+
- `initializeAsExtension` - Add engines.vscode, contributes, activationEvents
127+
- `closeEditor` - Close designer, open with default editor
128+
129+
### Round-Trip Preservation
130+
131+
ManifestService preserves:
132+
- Original indentation (spaces or tabs)
133+
- Trailing newline presence
134+
- Non-extension fields (scripts, dependencies, etc.)
135+
136+
### Extension Detection
137+
138+
A package.json is considered a VS Code extension if it has any of:
139+
- `engines.vscode`
140+
- `contributes` (non-empty)
141+
- `activationEvents` (non-empty)
142+
143+
If none are present, webview offers to initialize as extension or close.
144+
145+
### Content Security Policy
146+
147+
Webview uses strict CSP with nonce-based script execution for security.
148+
149+
## Testing
150+
151+
To test the extension:
152+
1. Run `npm run install:all` and `npm run compile`
153+
2. Press F5 to launch Extension Development Host
154+
3. Open a folder with a `package.json` file
155+
4. Right-click the `package.json` file
156+
5. Select "Open With..." > "Extension Manifest Designer"
157+
6. For VS Code extension manifests: see Metadata view with validation
158+
7. For regular package.json: see prompt to initialize or close

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Coding With Calvin
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

0 commit comments

Comments
 (0)