VS Code Extension

The official Glyx extension integrates the CLI into VS Code with a sidebar panel, status bar button, and code snippets.

Install

Search for Glyx in the Extensions view (Ctrl+Shift+X) or install from the command line:

code --install-extension glyx.glyx

The extension activates automatically whenever a folder containing glyx.config.ts or glyx.config.json is open.

Features

Sidebar panel

A Glyx icon appears in the activity bar. The panel shows:

Project name and dev server status (running / idle)
Run Dev Server — starts glyx dev in a dedicated terminal
Stop Dev Server — sends Ctrl+C and closes the terminal
Build — runs glyx build
Package for Distribution — prompts for a target platform then runs glyx package
Open Config — opens glyx.config.ts in the editor

Status bar button

A ▶ Glyx button appears in the bottom-left of the status bar in any Glyx project. Click it to start the dev server; it switches to ◼ Glyx (with a warning background) while running.

JSON schema validation

glyx.config.json files get full IntelliSense — autocomplete, hover docs, and error squiggles for every field including capabilities.fs.delete, plugin capabilities, and dev paths.

Snippets

All snippets use the g prefix. Type g in a JSX/TSX/JS/TS file and IntelliSense shows them.

Prefix	Inserts
`gimport`	`@glyx-dev/react` import
`gdesign`	`@glyx-dev/design` import
`gscreen`	Full screen component with `useTheme`
`gview`	`<View style={...}>`
`grow`	Flex row View
`gcol`	Flex column View
`gtext`	`<Text>`
`gpress`	`<Pressable onPress>`
`gpressh`	Pressable with hover/press opacity
`gscroll`	`<ScrollView>`
`gscrollh`	Horizontal ScrollView
`gimage`	`<Image>`
`ginput`	`<TextInput>`
`gcanvas`	Canvas 2D animation loop
`gcanvas3d`	Canvas3D element
`gbtn`	Design system `<Button>`
`giconbtn`	Design system `<IconButton>`
`gcard`	Design system `<Card>`
`gtextfield`	Design system `<TextField>`
`gswitch`	Design system `<SwitchRow>`
`galert`	Design system `<Alert>`
`gmodal`	Design system `<Modal>` with footer
`gtabs`	Design system `<Tabs>`
`gaccordion`	Design system `<Accordion>`
`gtoast`	`useToast()` + `showToast()`
`gus`	`useState`
`gue`	`useEffect`
`gtheme`	`useTheme()` destructuring
`gconfig`	Scaffold `glyx.config.ts`

Task integration

The extension registers a glyx task type. Add tasks to .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    { "type": "glyx", "command": "dev",     "label": "Glyx: Dev" },
    { "type": "glyx", "command": "build",   "label": "Glyx: Build",   "group": "build" },
    { "type": "glyx", "command": "package", "label": "Glyx: Package" }
  ]
}

Settings

Setting	Default	Description
`glyx.cliPath`	`"glyx"`	Path to the `glyx` executable if it's not on PATH
`glyx.buildTarget`	`""`	Default build target (`windows`, `macos`, `linux`, or empty for current platform)
`glyx.autoOpenDevTools`	`false`	Open the CDP inspector URL automatically when running `glyx dev --inspect`

Recommended companions

Extension	Install
ESLint	`code --install-extension dbaeumer.vscode-eslint`
Prettier	`code --install-extension esbenp.prettier-vscode`

Suggested .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

Debugger attach

Start the dev server with the inspector flag:

glyx dev --inspect

Then add .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Glyx JS",
      "port": 9229,
      "restart": true,
      "localRoot": "${workspaceFolder}/src",
      "remoteRoot": "/"
    }
  ]
}

Press F5 to attach. See the Debugging guide for full details.

Testing JS Plugins