In component files:

• Duplicate @prop definitions
• @prop missing from <c-vars> (shows default value if defined)
• Undocumented props in <c-vars>
• Unused props (defined but never referenced in template body)
• Default mismatch — @prop and <c-vars> have different default values
• @prop defines default but <c-vars> attr has no value (bare attr)
• <c-vars> has default value but @prop doesn't document one
• | required co-exists with | default: (parser silently drops required)
• Type-default mismatch — :boolean default outside True/False/1/0, or :number default that won't parse
• Enum default out of range — :select default (or <c-vars> value) not in the option list
• Dynamic-prefix mismatch — :foo in @prop vs foo in <c-vars> (or vice versa)
• Missing <c-vars> — @prop declared but no <c-vars> tag (Cotton passes nothing to the template)
• Missing prop description — @prop without | description: filter (hint-level)

In usage files:

• Component not found
• Unknown prop (@strict mode)
• Duplicate prop on same tag
• Deprecated prop usage (strikethrough hint)
• Invalid type value (select, boolean, number)
• Missing required prop
• Invalid component name — a tag like <c-...> that could never name any component
• <c-component> with no is (or :is) attribute

[!NOTE] Unused components are flagged in the sidebar (badge U on the tree item), not as a file diagnostic — "this component isn't referenced anywhere" is metadata about its place in the system, not a code error. Add {# @ignore-unused #} inside the component file to suppress it for library or dynamic-tag components.

[!TIP] Type validation is smart-skipped for dynamic props (:collapsed="variable") and template expressions ({{ var }}, {% tag %}) — those are Django values, not literals, so there are no false positives.

<c-atoms.badge variant="oops" />            <!-- Error: invalid select value -->
<c-atoms.badge :variant="user_variant" />   <!-- skipped: Django variable -->

• Document prop / Document all props — generate @prop annotations with guessed types
• Add required prop / Add all required props — insert missing required props with defaults
• Add to <c-vars> / Add all missing — insert missing props in the right format (:dynamic, boolean=False, text="value")
• Sync <c-vars> default — update a bare or mismatched value to match the @prop default
• Remove | required / Remove | default: — resolve a required-with-default conflict
• Replace with <option> — one action per allowed :select option when a value is out of range
• Add / Remove : prefix — toggle the dynamic prefix on a <c-vars> attr to match its @prop
• Add <c-vars /> tag — insert the missing declaration when @prop has no <c-vars> sibling
• Add | description:"" filter — fill in a missing description

Cotton's built-in dispatcher renders a component whose name is decided at runtime. The extension understands all three shapes:

Multi-line declarations work the same way. Renaming a component file rewrites every is="literal-target" pointing at it, and a refactor action converts between the direct and dispatch forms.

The activity-bar icon opens the Cotton Components panel:

• Components tree — collapsible categories with aggregated diagnostic counts: atoms 59 · 4E 2W 8H · 12 unused
• Per-component badges — a single count for the highest severity present (capped at 9+), coloured by that severity; a U badge when a component has no diagnostics and is referenced nowhere. The row text spells the full breakdown out: 3 props · 2E 1W 8H · unused
• Detail panel — click a component for its props table, slots, and syntax-highlighted source
• Drag & drop — drag a component into the editor to insert a full usage block with every prop as a tabstop and defaults pre-filled; Tab steps through them
• Tag filter — the title-bar button opens a filter box and the tree narrows as you type, matching a case-insensitive substring against the full dotted tag (so both atoms and button reach atoms.button). The active filter shows as Filter: … in the view header and survives closing the box; clear it with the title-bar button, by emptying the box, or with Escape while the tree has focus
• Copy tag and in-tree search (Ctrl+F)

Colors adapt to your active VS Code theme.

• No completions, or the sidebar is empty? The extension scans templates/cotton/ by default. If your components live elsewhere, add the folder to djangoCottonProps.templatePaths — path suffixes matched at any depth, so one entry covers the project root and every Django app. Changes apply live, no reload.
• A component is flagged unused but it isn't? It's reached only through a dynamic <c-component is="..."> the indexer can't resolve. Add {# @ignore-unused #} inside the component file to clear the badge.
• A usage isn't validated? Type checks are skipped on purpose for dynamic props (:prop="var") and template expressions ({{ }}, {% %}) — those are Django values, not literals.