CLS VS Code Extension: Syntax Highlighting and Snippets

The ccls-lang VS Code extension ships inside the repository at .vscode/extensions/ccls-lang/ and provides full language support for CLS source files (.clsx), type interface files (.clsi), and project manifests (cls.json). It activates automatically on any file associated with the clx language ID and covers syntax highlighting, string interpolation, CMX markup, bracket matching, code snippets for every language construct, JSON schema validation for cls.json, and an optional dark color theme with differentiated colors for types, classes, functions, and generics.

Installation

Copy the extension folder

Copy the ccls-lang directory into your VS Code extensions directory so it is permanently available:

cp -r .vscode/extensions/ccls-lang ~/.vscode/extensions/

Or use the workspace extension (no copy needed)

If you open the CLS repository directly in VS Code, the editor picks up .vscode/extensions/ccls-lang/ automatically — no manual copy required.

Reload VS Code

Press Ctrl+Shift+P → Developer: Reload Window to activate the extension.

The extension is registered under publisher: frask, name: cls-lang, and targets VS Code ^1.80.0. It depends on vscode-languageclient ^10.1.0 for optional LSP integration.

Supported File Extensions

Extension	Language ID	Description
`.clsx`	`clx`	CLS source files
`.clsi`	`clx`	Type interface files
`cls.json`	`json`	Project manifest (schema validated)

All three extensions are associated with the clx language via .vscode/settings.json:

{
  "files.associations": {
    "*.clsx": "clx",
    "*.clx": "clx",
    "*.clsi": "clx"
  }
}

Features

Syntax Highlighting

The extension uses a TextMate grammar (syntaxes/clsx.tmLanguage.json) to highlight every token category in CLS source:

Token category	Examples
Comments	`# this is a comment`
Numbers	`42`, `3.14`
Strings	`"hello"`, `'world'`, `template`
String interpolation	`$name`, `${expr}`
Keywords	`if`, `else`, `elif`, `while`, `for`, `function`, `var`, `const`, `return`, `is`
Types	`Int`, `String`, `Float`, `Bool`, `i32`, `str`, `Tuple`, `Record`
Operators	`+`, `-`, `==`, `!=`, `->`, `::`, `++`, `\|`
CMX / JSX tags	`<Component attr={expr}>children</Component>`
Constants	`true`, `false`, `null`, `unknown`
Self references	`me`, `super`

New Syntax Features (Highlighted)

The grammar also handles the full set of modern CLS type syntax:

Syntax	Example
Heterogeneous tuples	`var p: (Int, String) = (1, "x");`
Union literals	`alias Color = "red" \| "green" \| "blue";`
Type aliases	`alias Vec3 = (Int, Int, Int);`
Generic interfaces	`interface Hello<T=Int> { num: T }`
Type extraction	`var n: Hello["num"] = 1;`
Generics	`function id<T>(x: T) -> T` / `class Caja<T>`
Phantom types	`interface M<T> { f: !T }`
Inheritance with `:`	`class Dog: Animal`
`is` / `super`	`d is Dog`, `super.speak()`
Visibility modifiers	`private`, `protected`, `readonly`, `static`

CMX Syntax Support

CMX is CLS’s native JSX-like markup syntax. The extension highlights both lowercase tags (which produce a CmxValue) and uppercase tags (which trigger a reference lookup), plus {expr} interpolation inside attributes and children.

var el = <button label="Click" onClick={handleClick} />;

var comp = (
    <Container>
        <Header />
        <Body>{ content }</Body>
    </Container>
);

Bracket Matching and Auto-closing

Language configuration (language-configuration.json) defines bracket pairs for matching and auto-closing:

Open	Close
`(`	`)`
`[`	`]`
`{`	`}`
`"`	`"`
`'`	`'`
`	`

Surrounding pairs use the same set, so selecting text and typing an open bracket wraps the selection.

Comment Toggling

The line comment character is #. Use Toggle Line Comment (Ctrl+/) to comment or uncomment selected lines.

Code Snippets

The extension registers two snippet files: clsx.json for .clsx / .clsi files, and cls.json.json for cls.json manifests.

CLS Source Snippets (`clsx.json`)

Prefix	Description
`fn`	Function with return type
`fnv`	Void function (no return)
`fng`	Generic function `function id<T>(x: T) -> T`
`fna`	Async function with `await`
`cls`	Class with constructor and method
`clsg`	Generic class `class Caja<T>`
`clsh`	Inheritance with `:` and `super`
`clsv`	Class with `private`/`protected`/`public`/`readonly`/`static` members
`intf`	Interface with fields and method signatures
`intfg`	Generic interface with default type parameter
`ext`	Type extraction `var v: Interface["field"] = …`
`alit`	Tuple type alias
`aliu`	Union literal alias
`alif`	Function type alias
`alir`	Record type alias
`struct`	Structure declaration
`mod`	Module with exported function
`ns`	Namespace
`imp`	`import "module" as alias`
`impf`	`from "module" import symbol`
`if`	If / else block
`wh`	While loop
`lp`	Infinite loop with break
`for`	C-style for loop
`fe`	For-each loop
`fei`	For-each with index
`sw`	Switch with case and default
`try`	Try / catch block
`tup`	Typed tuple variable
`arr`	Typed array variable
`rec`	Typed record variable
`const`	Constant with inferred literal type
`arrow`	Arrow function
`cmx`	CMX element with children
`enum`	Enum with variants
`enumus`	Enum usage (access + comparison)
`enumi`	Iterate enum variants
`tostr`	`__toString` magic method
`isop`	`is` operator expression
`sup`	`super.method()` call
`main`	`function main(args: String[]) -> int` entry point

Manifest Snippets (`cls.json`)

Prefix	Description
`clsmanifest`	Full `cls.json` with all compiler, interpreter, and sandbox options
`clsmin`	Minimal `cls.json` with name, version, and entry
`clssandbox`	Sandbox configuration block
`clsdeps`	Dependencies block

The cls.json file is also validated against the bundled JSON schema (snippets/cls.schema.json). VS Code will show inline validation errors for unknown keys or wrong value types.

Color Theme: CLS Tipos Diferenciados

The extension includes a dark theme called CLS Tipos Diferenciados that assigns distinct colors to CLS-specific token scopes. To activate: Press Ctrl+K Ctrl+T and select CLS Tipos Diferenciados from the picker.

Token scope	Color	Style
Primitive types (`storage.type.*.ccls`)	Teal	—
Classes / interfaces / aliases (`entity.name.type.ccls`)	Gold	Bold
Functions (`entity.name.function.ccls`)	Soft yellow	—
Class methods (`entity.name.function.method.ccls`)	Blue	—
Generics / type access / tuples	Cyan	—
Phantom types `!T`	Purple	Bold

This theme is uiTheme: vs-dark and is designed to pair with any other dark base theme.

VS Code Settings

The workspace .vscode/settings.json controls both editor behavior and optional CLS extension features:

{
  "editor.indentSize": 2,
  "editor.semanticHighlighting.enabled": true,
  "files.associations": {
    "*.clsx": "clx",
    "*.clx": "clx",
    "*.clsi": "clx"
  },
  "cls.options.unnestableFeatures": {
    "lspServer": false,
    "useStaticTypes": true,
    "useMapClsi": true
  }
}

Setting	Default	Description
`cls.options.unnestableFeatures.lspServer`	`false`	Connect to `clx lsp` for diagnostics and completions
`cls.options.unnestableFeatures.useStaticTypes`	`true`	Enable static type checking in the LSP pipeline
`cls.options.unnestableFeatures.useMapClsi`	`true`	Load `.type.json` maps from `.cls-types/` for autocomplete

The LSP server is disabled by default (lspServer: false). Set it to true and run clx lsp to enable real-time diagnostics, hover documentation, and go-to-definition. See the LSP Server page for details.

VS Code Extension

Architecture

CLS VS Code Extension: Syntax Highlighting and Snippets

Installation

Supported File Extensions

Features

Syntax Highlighting

New Syntax Features (Highlighted)

CMX Syntax Support

Bracket Matching and Auto-closing

Comment Toggling

Code Snippets

CLS Source Snippets (`clsx.json`)

Manifest Snippets (`cls.json`)

Color Theme: CLS Tipos Diferenciados

VS Code Settings

Build docs developers (and LLMs) love

VS Code Extension

Architecture

Documentation Index

​Installation

​Supported File Extensions

​Features

​Syntax Highlighting

​New Syntax Features (Highlighted)

​CMX Syntax Support

​Bracket Matching and Auto-closing

​Comment Toggling

​Code Snippets

​CLS Source Snippets (clsx.json)

​Manifest Snippets (cls.json)

​Color Theme: CLS Tipos Diferenciados

​VS Code Settings

Build docs developers (and LLMs) love

Installation

Supported File Extensions

Features

Syntax Highlighting

New Syntax Features (Highlighted)

CMX Syntax Support

Bracket Matching and Auto-closing

Comment Toggling

Code Snippets

CLS Source Snippets (`clsx.json`)

Manifest Snippets (`cls.json`)

Color Theme: CLS Tipos Diferenciados

VS Code Settings