CSSeeder Templates (VS Code / Cursor extension)

Syntax highlighting for Csseeder codegen templates (*.tmp.*, *.tmponce.*, *.copyonce.*) without replacing the host language.

Design

Concern	Approach
C# / TS / YAML formatting & IntelliSense	`files.associations` maps `Ententity.tmp.cs` → `csharp`, `*.tmp.tsx` → `typescriptreact`, etc.
`____VAR____` placeholders	Editor background decoration (`placeholderBackgroundColor`)
Directive comments	Background by indent level 1–10 (linear blend A→B)
`/////` metadata	Optional foreground (`highlightMetadata`, default off)
Invalid directives	Error background + hover (structure/format; matches `validate-template-blocks.py`)
Normal `#` in `.yml`	Unchanged — only `# -- … -- #` lines are directives

Injection grammars under syntaxes/ are optional references; runtime highlighting uses semantic tokens so normal .cs files in the repo are not affected.

Workspace setup

Add to .vscode/settings.json (or user settings):

{
  "files.associations": {
    "*.tmp.cs": "csharp",
    "*.tmponce.cs": "csharp",
    "*.copyonce.cs": "csharp",
    "*.tmp.ts": "typescript",
    "*.tmponce.ts": "typescript",
    "*.tmp.tsx": "typescriptreact",
    "*.tmponce.tsx": "typescriptreact",
    "*.tmp.json": "json",
    "*.tmponce.json": "json",
    "*.tmp.yml": "yaml",
    "*.tmp.sh": "shellscript",
    "*.tmp.env": "dotenv",
    "*.tmp.md": "markdown",
    "*.tmp.html": "html",
    "*.tmp.csproj": "xml"
  },
  "editor.semanticTokenColorCustomizations": {
    "[*]": {
      "rules": {
        "placeholder.csseeder-templates": "#CE9178",
        "metadata.csseeder-templates": { "foreground": "#6A9955", "fontStyle": "italic" },
        "directive.csseeder-templates": { "foreground": "#9CDCFE", "fontStyle": "italic" },
        "directiveKeyword.csseeder-templates": { "foreground": "#C586C0", "fontStyle": "bold" },
        "expression.csseeder-templates": "#4EC9B0"
      }
    }
  },
  "editor.semanticHighlighting.enabled": true
}

Comment introducers match Csseeder.Core/CodeGeneration/CommentInfo.cs:

.cs, .ts, .tsx, .json, … → /* … */
.env, .yml, .sh → # -- … -- #

Develop

cd vscode-csseeder-templates
npm install
npm run compile

Press F5 (Run Extension) or install from folder: Extensions → Install from Location… → this directory.

After changing the extension: run npm run compile, then Developer: Reload Window (re-install from location is not always enough).

Troubleshooting (no colors)

Reload Window (Ctrl+Shift+P → Developer: Reload Window).
Confirm status bar shows Csseeder · csharp when Ententity.tmp.cs is active.
Run command CSSeeder: Debug Template Highlighting — should report tokens emitted: 50+ for a typical entity template.
editor.semanticHighlighting.enabled must be true (workspace .vscode/settings.json already sets this).
Inspect one ____MODEL____ token: Developer: Inspect Editor Tokens and Scopes — look for semantic token type placeholder.
If token count is 0: ensure files.associations maps *.tmp.cs → csharp (see workspace settings).

Settings (Cursor / VS Code → Settings → “CSSeeder”)

Key	Default	Description
`csseederTemplates.highlightPlaceholders`	`true`	`____Name____` backgrounds
`csseederTemplates.highlightDirectives`	`true`	Directive comment backgrounds
`csseederTemplates.placeholderBackgroundColor`	`#b8860b44`	Placeholder background (`#RRGGBB` or `#RRGGBBAA`)
`csseederTemplates.directiveBackgroundColorLevel1`	`#388bfd26`	Shallowest directive indent (color A, blue tint)
`csseederTemplates.directiveBackgroundColorLevel10`	`#a371f72e`	Deepest indent, 10th level (color B, purple tint)
`csseederTemplates.directiveIndentSpaces`	`4`	Spaces per level (0→1, 4→2, … 36→10)
`csseederTemplates.showDirectiveLevelLabel`	`true`	Overlay before `/*` / `# --` (① … ⑩)
`csseederTemplates.directiveLevelLabelStyle`	`icon`	`icon` (SVG, largest) · `keycap` (3️⃣) · `pill` · `circled` · …
`csseederTemplates.directiveLevelLabelIconSize`	`13`	Icon size in px (10–18; >16 may shift line highlights)
`csseederTemplates.directiveLevelLabelColor`	`#d4d8e6ee`	Text overlay color (`keycap` / `pill`)
`csseederTemplates.highlightMetadata`	`false`	Foreground on `/////` lines
`csseederTemplates.highlightDirectiveErrors`	`true`	Error background + tooltip on bad directive lines
`csseederTemplates.directiveErrorBackgroundColor`	`#f8514926`	Invalid directive background (light red)

Levels 2–9 are a linear RGB blend between A and B. Use 8-digit hex for transparency (e.g. #RRGGBB40).

Directive errors use the same rules as scripts/validate-template-blocks.py (missing END, indent mismatch, unclosed */ / -- #, etc.). Hover the highlighted line for details.

Publish

Bump version in package.json, then vsce package / vsce publish if you use the VS Code marketplace.

CSSeeder Templates

ZDory