VS Code Setup

VS Code Setup

FrontMarkVS CodeAstroSvelteMarkdownYAML

FrontMark is mainly a Markdown renderer. The daily authoring loop should stay in Markdown files, while VS Code extensions help with syntax, navigation and small implementation tasks around Astro, Svelte and YAML.

Use the site preview as the source of truth

VS Code Markdown previews do not execute the FrontMark renderer. Use make dev, make preview, or the Playwright checks when you need to verify tabs, containers, Svelte components, charts, n8n workflows or other enriched Markdown blocks.

Recommended Extensions

Extension	Marketplace ID or search term	Use in FrontMark
Astro	astro-build.astro-vscode	Edit src/pages/**, Starlight overrides, Astro components and route logic.
Codex	Codex	Save time on focused implementation tasks, reviews and test-driven edits from inside the editor.
Continue	Continue.continue	Alternative AI assistant when you want a local or provider-configurable workflow instead of Codex.
Markdown All in One	yzhang.markdown-all-in-one	Markdown editing comfort: lists, tables, links, folding and document navigation.
Svelte for VS Code	svelte.svelte-vscode	Edit svelte-components/src/** with Svelte diagnostics and component awareness.
YAML	redhat.vscode-yaml	Edit site.config.yaml, frontmatter and generated CMS configuration safely.

Install Codex or Continue according to your workflow; both at once is possible, but one active coding assistant is usually easier to reason about during reviews.

FrontMark Editing Workflow

1. Write content in src/content/docs/*.md whenever the page is documentation.
2. Use Astro files only for application routes, wrappers, custom layouts or integration code.
3. Use ::: svelte when Markdown needs an interactive component without creating a dedicated Astro page.
4. Run make dev while authoring and keep the browser preview open.
5. Run make build, make svelte_test or make n8n_test before publishing when the page uses generated components.

AI Assistant Notes

Codex is useful for code-aware changes because it can inspect the repository, edit files and run validation commands. The official Codex IDE extension documentation is available from OpenAI: Codex IDE extension.

Continue is useful when you want to wire a specific model/provider stack in VS Code. Keep prompts scoped: one page, one component, one failing test or one rendering issue at a time.

Generated code still needs review

AI assistants can accelerate edits, but FrontMark syntax is specific. Always verify directive indentation, code fences, JSON blocks, frontmatter and generated routes with the local renderer.

Useful Workspace Settings

{
  "editor.wordWrap": "on",
  "files.associations": {
    "*.md": "markdown",
    "*.mdx": "markdown"
  },
  "markdown.validate.enabled": true,
  "yaml.validate": true
}

Avoid formatting tools that rewrite indented tab examples or fenced directive blocks automatically. In FrontMark documentation, indentation is sometimes part of the syntax being demonstrated.

https://sigmax.dev/frontmark/docs/vscode/