VS Code Extensions

VeloxKit works with any editor, but VS Code offers the smoothest experience with these extensions.

Recommended extensions

VeloxKit (official)

Provides syntax highlighting for veloxkit.config.ts, snippets for common patterns, and project scaffolding.

Search for "VeloxKit" in the Extensions view (Ctrl+Shift+X) or install from the marketplace:

code --install-extension veloxkit.veloxkit

Features:

• Syntax highlighting for veloxkit.config.ts and capabilities manifests
• Snippets: v-view, v-text, v-pressable, v-scroll, v-stack, v-db-query
• Command: VeloxKit: Create new project (Ctrl+Shift+P → "VeloxKit")
• Command: VeloxKit: Add capability — scaffolds capability files
• Command: VeloxKit: Package app — runs veloxkit package

ESLint

code --install-extension dbaeumer.vscode-eslint

Lints your React components and catches errors before runtime.

Prettier

code --install-extension esbenp.prettier-vscode

Format-on-save keeps your code consistent across the team.

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Launch configuration

Connect VS Code's debugger to your running app. Add this to .vscode/launch.json:

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

Start your app with npx veloxkit-cli dev --inspect, then press F5 to attach. See the Debugging guide for full details.

Tasks (build on save)

Create .vscode/tasks.json to run build on save:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "build",
      "group": "build",
      "problemMatcher": ["$tsc"]
    }
  ]
}

Workspace settings

Recommended .vscode/settings.json for a VeloxKit project:

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