The FLIN VSCode Extension

A programming language without editor support is a programming language that nobody will use for long. Developers spend their entire working day inside their editor. If the editor does not understand the language -- if keywords are not highlighted, if brackets are not matched, if there are no snippets for common patterns -- every line of code feels like fighting the tool instead of working with it.

Visual Studio Code dominates the editor market. Building a VSCode extension was not optional for FLIN. It was a prerequisite for any developer adoption.

What the Extension Provides

The FLIN VSCode extension, built in Session 252, delivers three core features:

1. Full syntax highlighting for every FLIN token and construct. 2. 50+ code snippets for rapid scaffolding of common patterns. 3. Language configuration for bracket matching, comment toggling, and auto-closing pairs.

The extension ships as a .vsix file (32 KB) that can be installed locally or published to the VSCode Marketplace:

# Local installation
code --install-extension flin-lang-1.0.0-alpha.1.vsix

# From Marketplace (once published) code --install-extension flin-lang.flin-lang ```

The TextMate Grammar

VSCode uses TextMate grammars for syntax highlighting. A TextMate grammar is a JSON file that maps regular expressions to scope names, which VSCode then maps to colors based on the active theme.

FLIN's grammar (syntaxes/flin.tmLanguage.json) covers every syntactic construct:

{
  "scopeName": "source.flin",
  "patterns": [
    { "include": "#comments" },
    { "include": "#strings" },
    { "include": "#keywords" },
    { "include": "#types" },
    { "include": "#decorators" },
    { "include": "#functions" },
    { "include": "#constants" },
    { "include": "#operators" },
    { "include": "#templates" }
  ]
}

The grammar assigns TextMate scopes to FLIN syntax:

FLIN Syntax	TextMate Scope
`entity`, `trait`, `impl`	`keyword.declaration.flin`
`if`, `else`, `for`, `match`	`keyword.control.flin`
`fn`, `async fn`	`keyword.declaration.function.flin`
`save`, `delete`, `where`	`keyword.operator.data.flin`
`@required`, `@email`	`entity.name.decorator.flin`
`text`, `int`, `bool`	`storage.type.primitive.flin`
`true`, `false`, `none`	`constant.language.flin`
	`entity.name.tag.flin`
`// comment`	`comment.line.flin`
`"string"`	`string.quoted.double.flin`
`{interpolation}`	`meta.embedded.expression.flin`

By mapping to standard TextMate scopes (like keyword.control, storage.type, constant.language), FLIN inherits correct coloring from every VSCode theme. Whether a developer uses Dark+, Solarized, Monokai, or any custom theme, FLIN code looks correct because the scopes follow established conventions.

Handling FLIN-Specific Syntax

The most challenging parts of the grammar are FLIN's unique constructs: the view template syntax, decorator annotations, and embedded CSS/JavaScript blocks.

View templates use JSX-like syntax within FLIN files. The grammar switches to a tag context when it encounters <, highlighting tag names, attributes, and interpolated expressions:

<div class="card">
    <h2>{title}</h2>
    <p>{description}</p>
    {if showButton}
        <button click={handleClick}>Submit</button>
    {/if}
</div>

In this example, div, h2, p, and button receive tag highlighting. class receives attribute highlighting. {title}, {description}, {showButton}, and {handleClick} receive expression highlighting within their interpolation delimiters.

Decorator annotations like @required, @email, @min(0), and @max(150) are highlighted as decorators, visually distinguishing validation rules from the field definitions they modify.

Embedded blocks for