> ## Documentation Index
> Fetch the complete documentation index at: https://gluals.arnux.net/llms.txt
> Use this file to discover all available pages before exploring further.

# VGUI support

> GLuaLS understands VGUI panel hierarchies and provides code lens and inlay hints.

## Overview

GLuaLS understands VGUI panel creation, registration, and inheritance. A created panel keeps both its registered type and the standard panel methods inherited from its parent.

***

## Panel type inference

When you call `vgui.Create("Type")`, GLuaLS types the returned value as the matching panel class:

```lua theme={null}
local frame = vgui.Create("DFrame")   -- typed as DFrame
frame:SetTitle("My Window")            -- DFrame method ✅

local btn = frame:Add("DButton")       -- typed as DButton
btn:SetText("Click me")                -- DButton method ✅
btn.DoClick = function(self)
    -- self is typed as DButton ✅
end
```

***

## Code lens

When `gmod.vgui.codeLensEnabled` is true, GLuaLS shows code lens annotations above panel creations and definitions.

Enable in `.gluarc.json`:

<Tip>
  Use the settings menu instead of editing the JSON file directly. This helps you avoid config mistakes.
</Tip>

```json .gluarc.json theme={null}
{
  "gmod": {
    "vgui": {
      "codeLensEnabled": true
    }
  }
}
```

***

## Inlay hints for `:Add()`

When using `panel:Add("Type")`, GLuaLS shows the panel type in an inlay hint:

```lua theme={null}
local btn = frame:Add("DButton")  -- DButton
```

***

## Custom panels

GLuaLS understands the standard VGUI inheritance pattern used to define custom panels:

```lua theme={null}
local PANEL = {}

function PANEL:Init()
    self.label = self:Add("DLabel")
end

function PANEL:Paint(w, h)
    draw.RoundedBox(4, 0, 0, w, h, color_black)
end

vgui.Register("MyPanel", PANEL, "DPanel")
-- Now MyPanel is recognized as a panel type
-- that inherits from DPanel
```

After `vgui.Register(name, PANEL, base)`, GLuaLS recognizes `"MyPanel"` in later constructors. The panel type includes methods from the `PANEL` table and inherited `DPanel` methods.

***

## Derma controls and skins

GLuaLS also understands `derma.DefineControl`, `derma.DefineSkin`, `derma.GetNamedSkin`, `derma.GetSkinTable()`, and panel skin setters:

```lua theme={null}
local SKIN = {}

function SKIN:PaintFrame(panel, w, h)
    draw.RoundedBox(0, 0, 0, w, h, color_black)
end

derma.DefineSkin("MySkin", "Dark UI skin", SKIN)

local frame = vgui.Create("DFrame")
frame:SetSkin("MySkin") -- navigates to the skin definition
```

Skin names support completion, hover, references, and go-to-definition in the same way as panel names.

***

## Custom wrappers

If your framework wraps VGUI or Derma APIs, annotate the wrapper parameters with [`@call_arg`](/annotations/call-arg). This lets GLuaLS recognize the wrapped calls without matching the wrapper by name.

```lua theme={null}
---@[call_arg("gmod.derma_skin", "define")]
---@param name string
---@param description string
---@param skin table
function MyUI.DefineSkin(name, description, skin)
    derma.DefineSkin(name, description, skin)
end
```

***

## Class Explorer

The Scripted Class Explorer lists VGUI panels for navigation. Click a panel class in the explorer to open its definition.

## VS Code integration

VGUI features work after the extension starts. The Class Explorer sidebar shows registered panel types under the Classes section. Configure VGUI support in the [settings panel](/configuration/overview#settings-panel-recommended). See [Garry's Mod settings](/configuration/gmod#vgui) for the full reference.

## Configuration

| Setting                      | Default | Description                                       |
| ---------------------------- | ------- | ------------------------------------------------- |
| `gmod.vgui.codeLensEnabled`  | `true`  | Show code lens on panel creations/definitions     |
| `gmod.vgui.inlayHintEnabled` | `false` | Show inlay hints for `panel:Add()` type inference |