OTUI Toolkit for VS Code

Advanced support for OTUI (Open Tibia User Interface) files, commonly used in OTClient and OTCv8 projects. This extension transforms your development experience with robust syntax highlighting, intelligent linting, code completion, and navigation tools.

Features

🎨 Syntax Highlighting

Rich semantic highlighting for .otui and .otml files. It correctly identifies:

Widgets and Class definitions.
Properties and values.
Embedded Lua code (using !, @, &).
Anchors and layout definitions.

🔍 Intelligent Diagnostics (Linting)

Catch errors before they crash your client. The extension validates:

Value Types: Ensures you don't assign a string where a number or color is expected.
References: Validates parent, prev, next keywords and Anchor targets.
Lua Detection: Smartly handles embedded Lua expressions without confusing them for invalid values.
Structure: Detects circular dependencies and duplicate IDs.

🧠 IntelliSense & Autocomplete

Write code faster with context-aware suggestions:

Standard Widget properties (e.g., anchors.fill, text.align).
Available Widget classes.
Color names and constants.

Go to Definition: Ctrl+Click on a class name or widget reference to jump to its declaration.
Color Picker: Visual color previews and picker for Hex/RGB values.
Hover Info: See details about properties and classes.

Usage Example

Here is a typical OTUI file snippet highlighting the supported syntax:

MainWindow
  id: demoWindow
  size: 300 400
  !text: tr('Settings')

  Label
    id: title
    text: Options
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 10
    color: #ff0000

  Button
    id: saveButton
    !text: tr('Save')
    width: 64
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    margin: 10
    @onClick: |
      modules.game_settings.save()
      self:getParent():hide()

Configuration

Customize the extension's strictness to fit your project's style. You can modify these settings in your User or Workspace settings.json.

Setting	Default	Description
`otuibt.diagnostics.checkDuplicateIds`	`true`	Warns if multiple widgets share the same ID within a single file.
`otuibt.diagnostics.checkDuplicateWidgets`	`true`	Checks for duplicate custom widget definitions across your workspace.
`otuibt.diagnostics.checkWidgetIdExistence`	`false`	STRICT: Validates that referenced Widget IDs (e.g. in anchors) actually exist.
`otuibt.diagnostics.checkPrevIsParent`	`false`	STRICT: Warns if you use `prev` on the first child widget (where it acts as `parent`).

🔧 Example Configuration

To enable the most robust and strict validation environment, add the following to your settings.json:

{
  // Standard checks (Recommended)
  "otuibt.diagnostics.checkDuplicateIds": true,
  "otuibt.diagnostics.checkDuplicateWidgets": true,

  // Strict checks (Optional)
  "otuibt.diagnostics.checkWidgetIdExistence": true,
  "otuibt.diagnostics.checkPrevIsParent": true
}

Release Notes

0.0.1

Initial release.
Complete syntax highlighting for OTUI/OTML.
Semantic validation for property types and references.
Configurable diagnostics options.

Enjoy building better interfaces!

OTUI Syntax Highlighting

MillhioreBT