Editor setup

Syntax highlighting for .sharq single-file components in VS Code: the <template> block is highlighted as XML, <script> as C# (including the $using directive), <style> as CSS with USS-specific properties (-unity-*) and design-token variables (--sus-*), and Sharq template directives — v-if / v-for, :prop="…", @click="…", $MainElement — with the expressions inside bindings highlighted as C#.

Install (VSIX — recommended)

1. Download sharq-language-0.1.0.vsix (link goes live once the VSIX distribution ships — for now use the manual install below).
2. Install it:

code --install-extension sharq-language-0.1.0.vsix

or in VS Code: Extensions → ⋯ menu → Install from VSIX… — then reload the window.

Install (manual, no VSIX)

1. Download sharq-vscode-0.1.0.zip.
2. Unzip into your extensions folder so it becomes:
   • Windows: %USERPROFILE%\.vscode\extensions\sharq-it.sharq-language-0.1.0\
   • macOS / Linux: ~/.vscode/extensions/sharq-it.sharq-language-0.1.0/
3. Restart VS Code and open any .sharq file.

What it looks like

<template>
<ui:VisualElement $MainElement class="home-screen">
    <ui:Label class="home-screen__title" :text="Title.Value" />
    <sus:SusButton variant="primary" text="Start" @click="Title.Value = \"Hello\"" />
</ui:VisualElement>
</template>

<script>
$using Sharq.Core;

// Props are reactive: assign Title.Value at runtime and the label updates automatically.
public Prop<string> Title = new("Welcome to SUS");
</script>

<style>
.home-screen__card:hover {
  border-color: var(--sus-primary);
}
</style>

Other editors

• Rider / JetBrains IDEs — no dedicated plugin yet; the blocks still work reasonably when the file type is associated with XML. A TextMate-bundle route is planned.
• Unity — no setup needed: .sharq files are compiled by the package on save.