Monorepo for Aesthetic.Computer
aesthetic.computer
VS Code Extension Development#
Quick Publish Workflow#
npm run build # Compile TypeScript + bundle views
npm run publish # Bump version + package + publish to marketplace
That's it! The publish script handles version bumping automatically.
Scripts Reference#
| Script | Description |
|---|---|
npm run build |
Compile extension (views + esbuild) |
npm run compile |
Alias for build |
npm run publish |
Bump patch version + package + publish |
npm run package |
Create .vsix without publishing |
npm run views |
Generate embedded JS from views/*.js |
File Structure#
extension.ts- Main extension codeviews/- Embedded webview JS (process-tree, ast-tree)generated-views.ts- Auto-generated from views/ (don't edit)out/- Compiled output (gitignored)themes/- Color themessyntaxes/- KidLisp syntax highlighting
Key Webview Functions#
getWebViewContent()- Main AC sidebar panelgetKidLispWebViewContent()- KidLisp.com windowgetNewsWebViewContent()- News windowgetWelcomePanelHtml()- Welcome/architecture panel
CSP Notes#
Each webview needs proper Content-Security-Policy for:
frame-src/child-src- Allow iframes (localhost:8888, aesthetic.computer)script-src- Use nonces for inline scriptsconnect-src- For WebSocket/fetch if needed
Testing Locally#
- Press F5 in VS Code to launch Extension Development Host
- Or install the .vsix:
code --install-extension aesthetic-computer-code-X.X.X.vsix
Troubleshooting#
- Marketplace shows old version: Cache lag, wait 2-5 minutes or bump version again
- TypeScript errors: These are often strict-mode warnings, build still succeeds
- Webview blank: Check CSP frame-src includes the iframe URL