{
"test.hello": "Hello",
"test.greeting": "Hello, {name}!",
"diagnostic.format": "[vize:{rule}] {message}",
"diagnostic.format.ts": "[vize:TS{code}] {message}",
"category.essential": "Essential",
"category.strongly_recommended": "Strongly Recommended",
"category.recommended": "Recommended",
"category.vapor": "Vapor",
"category.musea": "Musea",
"category.script": "Script",
"category.css": "CSS",
"category.a11y": "Accessibility",
"category.security": "Security",
"category.performance": "Performance",
"vue/require-v-for-key.description": "Require v-bind:key with v-for directives",
"vue/require-v-for-key.message": "Elements in iteration expect to have 'v-bind:key' directives. Element: <{tag}>",
"vue/require-v-for-key.help": "**Why:** The `:key` attribute helps Vue's virtual DOM efficiently track and update list items.\n\n**Fix:** Add a unique identifier as the key:\n```vue\n<li v-for=\"item in items\" :key=\"item.id\">\n {{ item.name }}\n</li>\n```\n\n**Best practices:**\n- Use unique, stable identifiers (like database IDs)\n- Avoid using array index as key when list order may change\n- Keys must be primitive values (string or number)",
"vue/valid-v-for.description": "Enforce valid v-for directives",
"vue/valid-v-for.missing_expression": "v-for directive requires an expression",
"vue/valid-v-for.invalid_syntax": "v-for has invalid syntax: expected 'item in items' or '(item, index) in items'",
"vue/valid-v-for.help": "**Valid v-for syntax:**\n```vue\n<!-- Array iteration -->\n<li v-for=\"item in items\">{{ item }}</li>\n<li v-for=\"(item, index) in items\">{{ index }}: {{ item }}</li>\n\n<!-- Object iteration -->\n<li v-for=\"(value, key) in object\">{{ key }}: {{ value }}</li>\n<li v-for=\"(value, key, index) in object\">{{ index }}</li>\n\n<!-- Range -->\n<span v-for=\"n in 10\">{{ n }}</span>\n```",
"vue/valid-v-if.description": "Enforce valid v-if directives",
"vue/valid-v-if.missing_expression": "v-if directive requires an expression",
"vue/valid-v-if.help": "**Fix:** Add a boolean expression:\n```vue\n<div v-if=\"isVisible\">Content</div>\n<div v-if=\"items.length > 0\">Has items</div>\n```\n\n**Note:** Use `v-show` for frequent toggling (better performance), `v-if` for conditions that rarely change.",
"vue/valid-v-else.description": "Enforce valid v-else directives",
"vue/valid-v-else.unexpected_expression": "v-else directives require no expression",
"vue/valid-v-else.missing_v_if": "v-else requires a corresponding v-if or v-else-if",
"vue/valid-v-else.help": "**Correct usage:**\n```vue\n<div v-if=\"type === 'A'\">A</div>\n<div v-else-if=\"type === 'B'\">B</div>\n<div v-else>Other</div>\n```\n\n**Rules:**\n- `v-else` takes no expression\n- Must immediately follow `v-if` or `v-else-if`\n- No other elements between them",
"vue/valid-v-bind.description": "Enforce valid v-bind directives",
"vue/valid-v-bind.missing_expression": "v-bind requires an expression",
"vue/valid-v-bind.help": "**Fix:** Provide a value to bind:\n```vue\n<!-- Shorthand -->\n<img :src=\"imageUrl\" :alt=\"imageAlt\">\n\n<!-- Full syntax -->\n<img v-bind:src=\"imageUrl\">\n\n<!-- Bind multiple attributes -->\n<div v-bind=\"{ id: itemId, class: itemClass }\"></div>\n```",
"vue/valid-v-on.description": "Enforce valid v-on directives",
"vue/valid-v-on.missing_event": "v-on requires an event name",
"vue/valid-v-on.help": "**Fix:** Specify the event name:\n```vue\n<!-- Shorthand -->\n<button @click=\"handleClick\">Click</button>\n\n<!-- Full syntax -->\n<button v-on:click=\"handleClick\">Click</button>\n\n<!-- With modifiers -->\n<form @submit.prevent=\"onSubmit\">...</form>\n<input @keyup.enter=\"onEnter\">\n```",
"vue/valid-v-model.description": "Enforce valid v-model directives",
"vue/valid-v-model.missing_expression": "v-model requires an expression",
"vue/valid-v-model.invalid_element": "v-model cannot be used on <{tag}> element",
"vue/valid-v-model.help": "**Supported elements:**\n- `<input>` (text, checkbox, radio, etc.)\n- `<textarea>`\n- `<select>`\n- Custom components with `modelValue` prop\n\n**Examples:**\n```vue\n<input v-model=\"message\">\n<input v-model.number=\"age\" type=\"number\">\n<input v-model.trim=\"name\">\n<MyComponent v-model=\"value\">\n```",
"vue/valid-v-show.description": "Enforce valid v-show directives",
"vue/valid-v-show.missing_expression": "v-show directive requires an expression",
"vue/valid-v-show.on_template": "v-show cannot be used on <template> element",
"vue/valid-v-show.help": "Add an expression to the v-show directive",
"vue/valid-v-slot.description": "Enforce valid v-slot directives",
"vue/valid-v-slot.invalid_location": "v-slot can only be used on components or template elements",
"vue/valid-v-slot.help": "Use v-slot on a component or a template element inside a component",
"vue/no-use-v-if-with-v-for.description": "Disallow using v-if on the same element as v-for",
"vue/no-use-v-if-with-v-for.message_access": "Avoid using v-if with v-for on the same element. The v-if condition does not have access to v-for scope variables",
"vue/no-use-v-if-with-v-for.message_perf": "Avoid using v-if with v-for on the same element. Use a computed property to filter the list first",
"vue/no-use-v-if-with-v-for.help": "**Problem:** `v-for` has higher priority than `v-if`, causing the entire list to iterate before filtering.\n\n**Solution 1:** Use a computed property:\n```vue\n<script setup>\nconst activeUsers = computed(() => \n users.filter(u => u.isActive)\n)\n</script>\n<template>\n <li v-for=\"user in activeUsers\" :key=\"user.id\">\n</template>\n```\n\n**Solution 2:** Wrap with `<template>`:\n```vue\n<template v-for=\"user in users\" :key=\"user.id\">\n <li v-if=\"user.isActive\">{{ user.name }}</li>\n</template>\n```",
"vue/no-unused-vars.description": "Disallow unused variable definitions in v-for directives",
"vue/no-unused-vars.message": "Variable '{name}' is defined but never used",
"vue/no-unused-vars.help": "**Options:**\n\n1. Use the variable in your template\n2. Remove unused variables:\n```vue\n<!-- Before -->\n<li v-for=\"(item, index) in items\" :key=\"item.id\">\n\n<!-- After (if index is unused) -->\n<li v-for=\"item in items\" :key=\"item.id\">\n```\n\n3. Prefix with `_` to indicate intentional non-use:\n```vue\n<li v-for=\"(_item, index) in items\" :key=\"index\">\n```",
"vue/no-duplicate-attributes.description": "Disallow duplicate attributes",
"vue/no-duplicate-attributes.message": "Duplicate attribute '{attr}'",
"vue/no-duplicate-attributes.help": "Remove the duplicate attribute",
"vue/no-deprecated-v-on-native-modifier.description": "Disallow the deprecated `.native` modifier on `v-on`",
"vue/no-deprecated-v-on-native-modifier.message": ".native modifier on v-on is deprecated and was removed in Vue 3",
"vue/no-deprecated-v-on-native-modifier.help": "Vue 3 removed the `.native` modifier: listeners that are not declared component events fall through to the root element automatically. Remove `.native` (e.g. `@click.native` -> `@click`).",
"vue/no-deprecated-v-bind-sync.description": "Disallow the deprecated `.sync` modifier on `v-bind`",
"vue/no-deprecated-v-bind-sync.message": "the .sync modifier on v-bind was removed in Vue 3; use v-model:<prop> instead",
"vue/no-deprecated-v-bind-sync.help": "Vue 3 removed the `.sync` modifier and folded its two-way binding into argumented `v-model`. Replace it with `v-model:<prop>` (e.g. `:title.sync=\"title\"` -> `v-model:title=\"title\"`).",
"vue/no-deprecated-slot-attribute.description": "Disallow the deprecated slot attribute",
"vue/no-deprecated-slot-attribute.message": "the `slot` attribute was deprecated in Vue 2.6 and removed in Vue 3",
"vue/no-deprecated-slot-attribute.help": "Use `v-slot` instead (e.g. `<template v-slot:header>`).",
"vue/no-deprecated-slot-scope-attribute.description": "Disallow the deprecated slot-scope attribute",
"vue/no-deprecated-slot-scope-attribute.message": "the `slot-scope` attribute was deprecated in Vue 2.6 and removed in Vue 3",
"vue/no-deprecated-slot-scope-attribute.help": "Use `v-slot` instead (e.g. `<template v-slot=\"props\">`).",
"vue/no-deprecated-scope-attribute.description": "Disallow the deprecated scope attribute on <template>",
"vue/no-deprecated-scope-attribute.message": "the `scope` attribute on <template> was deprecated in Vue 2.5 and removed in Vue 3",
"vue/no-deprecated-scope-attribute.help": "Use `v-slot` instead (e.g. `<template v-slot=\"props\">`).",
"vue/no-template-key.description": "Disallow key attribute on template element",
"vue/no-template-key.message": "<template> elements cannot have a key attribute",
"vue/no-template-key.help": "Move the key to the first child element inside template",
"vue/no-textarea-mustache.description": "Disallow mustache interpolation in textarea",
"vue/no-textarea-mustache.message": "Mustache interpolation inside textarea is not allowed",
"vue/no-textarea-mustache.help": "Use v-model instead of mustache interpolation in textarea",
"vue/no-dupe-v-else-if.description": "Disallow duplicate conditions in v-if chains",
"vue/no-dupe-v-else-if.message": "This condition is a duplicate of a condition in the same v-if/v-else-if chain",
"vue/no-dupe-v-else-if.help": "Remove or modify the duplicate condition",
"vue/no-reserved-component-names.description": "Disallow reserved component names",
"vue/no-reserved-component-names.message": "'{name}' is a reserved HTML element name and cannot be used as a component name",
"vue/no-reserved-component-names.help": "Rename the component to avoid using reserved names",
"vue/no-template-shadow.description": "Disallow variable shadowing in v-for",
"vue/no-template-shadow.message": "Variable '{name}' shadows a variable in an outer scope",
"vue/no-template-shadow.help": "Rename the variable to avoid shadowing",
"vue/no-inline-style.description": "Discourage use of inline style attributes",
"vue/no-inline-style.message": "Avoid using inline style attributes",
"vue/no-inline-style.help": "Use CSS classes or scoped styles instead",
"vue/no-multi-spaces.description": "Disallow multiple consecutive spaces",
"vue/no-multi-spaces.message": "Multiple consecutive spaces found",
"vue/no-multi-spaces.help": "Replace multiple spaces with a single space",
"vue/v-bind-style.description": "Enforce v-bind directive style",
"vue/v-bind-style.prefer_shorthand": "Use shorthand ':' instead of 'v-bind:'",
"vue/v-bind-style.prefer_longform": "Use 'v-bind:' instead of shorthand ':'",
"vue/v-bind-style.help": "Replace with the preferred style",
"vue/v-on-style.description": "Enforce v-on directive style",
"vue/v-on-style.prefer_shorthand": "Use shorthand '@' instead of 'v-on:'",
"vue/v-on-style.prefer_longform": "Use 'v-on:' instead of shorthand '@'",
"vue/v-on-style.help": "Replace with the preferred style",
"vue/multi-word-component-names.description": "Require component names to be multi-word",
"vue/multi-word-component-names.message": "Component name \"{name}\" should be multi-word to avoid conflicts with HTML elements",
"vue/multi-word-component-names.help": "Rename the component to use multiple words (e.g., \"TodoItem\" instead of \"Item\")",
"vue/a11y-img-alt.description": "Require alt attribute on images for accessibility",
"vue/a11y-img-alt.message": "<img> elements must have an alt attribute for accessibility",
"vue/a11y-img-alt.help": "Add alt=\"description\" for informative images or alt=\"\" for decorative images",
"vue/no-unsafe-url.description": "Warn about potentially unsafe URL bindings",
"vue/no-unsafe-url.message": "Dynamic :{attr} binding may be vulnerable to XSS via javascript: protocol",
"vue/no-unsafe-url.static_message": "Static URL attribute uses a potentially unsafe protocol or active data URL",
"vue/no-unsafe-url.static_help": "Use http(s), relative URLs, or a non-executable data URL. Avoid javascript:, vbscript:, text/html data URLs, and SVG data URLs",
"vue/no-unsafe-url.help_href": "Consider using <router-link :to=\"...\"> or sanitize URLs with @braintree/sanitize-url",
"vue/no-unsafe-url.help_src": "Ensure URLs are sanitized before binding. Use @braintree/sanitize-url for validation",
"vue/no-unsafe-url.help": "Ensure URLs are sanitized before binding to prevent XSS via javascript: protocol",
"vue/no-template-target-blank.description": "Disallow target=\"_blank\" without rel=\"noopener\"",
"vue/no-template-target-blank.message": "Using target=\"_blank\" without rel=\"noopener\" or rel=\"noreferrer\" is a security risk",
"vue/no-template-target-blank.help": "Add rel=\"noopener\" (or rel=\"noreferrer\") to links that open in a new tab to prevent reverse tabnabbing via window.opener",
"vue/no-unsandboxed-iframe.description": "Require a sandbox attribute on iframe elements",
"vue/no-unsandboxed-iframe.message": "<iframe> is missing a sandbox attribute",
"vue/no-unsandboxed-iframe.help": "Add a sandbox attribute (e.g. sandbox=\"\" for the most restrictive policy) and re-grant only the capabilities the embedded content needs",
"vue/no-v-html.description": "Disallow use of v-html to prevent XSS attacks",
"vue/no-v-html.message": "v-html can lead to XSS attacks. Avoid using it with user-provided content",
"vue/no-v-html.help": "**Security Risk:** `v-html` renders raw HTML and can execute malicious scripts from user input.\n\n**Alternatives:**\n\n1. Use text interpolation (auto-escaped):\n```vue\n<p>{{ userContent }}</p>\n```\n\n2. Use a sanitization library:\n```ts\nimport DOMPurify from 'dompurify'\nconst safeHtml = DOMPurify.sanitize(userInput)\n```\n\n3. Use a markdown renderer with XSS protection\n\n**If you must use v-html:**\n- Never use with user-provided content\n- Only use with trusted, static content",
"vue/html-self-closing.description": "Enforce self-closing style",
"vue/html-self-closing.void": "Void element should be self-closing",
"vue/html-self-closing.empty": "Empty element should be self-closing",
"vue/html-self-closing.component": "Empty component should be self-closing",
"vue/html-self-closing.help": "Use self-closing syntax",
"vue/prefer-props-shorthand.description": "Enforce shorthand syntax for same-name prop bindings",
"vue/prefer-props-shorthand.message": "Use shorthand syntax for same-name prop binding",
"vue/prefer-props-shorthand.help": "Use shorthand prop syntax",
"vue/attribute-hyphenation.description": "Enforce attribute name casing in templates",
"vue/attribute-hyphenation.message": "Attribute should be hyphenated",
"vue/attribute-hyphenation.help": "Use kebab-case for attribute names",
"vue/attribute-order.description": "Enforce attribute ordering in templates",
"vue/attribute-order.message": "Attribute should be placed in correct order",
"vue/attribute-order.help": "Reorder attributes to follow the recommended order",
"vue/no-lone-template.description": "Disallow unnecessary template usage",
"vue/no-lone-template.message": "`<template>` without directive is unnecessary",
"vue/no-lone-template.help": "Remove the `<template>` wrapper or add a directive (v-if, v-for, v-slot)",
"vue/mustache-interpolation-spacing.description": "Enforce spacing in mustache interpolation",
"vue/mustache-interpolation-spacing.expected": "Expected spaces inside mustache interpolation",
"vue/mustache-interpolation-spacing.unexpected": "Unexpected spaces inside mustache interpolation",
"vue/mustache-interpolation-spacing.help_expected": "Add spaces: {{ value }}",
"vue/mustache-interpolation-spacing.help_unexpected": "Remove spaces: {{value}}",
"vue/scoped-event-names.description": "Suggest scoped event names for better organization",
"vue/scoped-event-names.message": "Consider using scoped event name for better organization",
"vue/scoped-event-names.help": "Use scoped event names like 'update:modelValue' instead of generic names",
"vue/component-name-in-template-casing.description": "Enforce component naming style in templates",
"vue/component-name-in-template-casing.pascal": "Component should use PascalCase",
"vue/component-name-in-template-casing.kebab": "Component should use kebab-case",
"vue/component-name-in-template-casing.help_pascal": "Use PascalCase for component names",
"vue/component-name-in-template-casing.help_kebab": "Use kebab-case for component names",
"vue/no-undefined-refs.description": "Disallow undefined template references",
"vue/no-undefined-refs.message": "'{name}' is not defined",
"vue/no-undefined-refs.help": "Make sure the variable is imported or defined in <script setup>",
"vue/require-scoped-style.description": "Require scoped attribute on style blocks",
"vue/require-scoped-style.message": "Style blocks should use scoped attribute to prevent style leaking",
"vue/require-scoped-style.help": "Add the 'scoped' attribute to the style block",
"vapor/no-inline-template.description": "Disallow deprecated inline-template attribute",
"vapor/no-inline-template.message": "inline-template is deprecated and not supported in Vapor",
"vapor/no-inline-template.help": "Use slots instead of inline-template",
"vapor/prefer-static-class.description": "Prefer static class over dynamic binding",
"vapor/prefer-static-class.message": "Prefer static class attribute over dynamic :class binding for constant values",
"vapor/prefer-static-class.help": "Move static classes to the class attribute",
"vapor/no-vue-lifecycle-events.description": "Disallow @vue:xxx per-element lifecycle events",
"vapor/no-vue-lifecycle-events.message": "@vue:{event} lifecycle events are not supported in Vapor",
"vapor/no-vue-lifecycle-events.help": "Use component lifecycle hooks instead",
"petite-vue/no-unsupported-directive.description": "Disallow directives that petite-vue does not support",
"petite-vue/no-unsupported-directive.message": "`{directive}` is not supported by petite-vue and will have no effect",
"petite-vue/no-unsupported-directive.help": "petite-vue supports v-scope, v-effect, v-if/v-else/v-else-if, v-for, v-show, v-html, v-text, v-model, v-bind (:), v-on (@), v-once, v-pre, v-cloak, and the ref attribute. Remove the unsupported directive or use a supported alternative.",
"petite-vue/valid-v-effect.description": "Require v-effect to have a non-empty expression",
"petite-vue/valid-v-effect.message": "`v-effect` has no expression, so it registers an effect that does nothing",
"petite-vue/valid-v-effect.help": "Give v-effect a statement to run as a reactive side effect, such as v-effect=\"el.textContent = count\", or remove the empty directive.",
"petite-vue/valid-v-scope.description": "Require v-scope to bind an object literal",
"petite-vue/valid-v-scope.message": "`v-scope` must bind an object literal",
"petite-vue/valid-v-scope.help": "petite-vue's v-scope introduces scope bindings from an object literal, e.g. v-scope=\"{ count: 0 }\". A non-object value declares no bindings. Use an object literal, or a bare v-scope to mark a scope root without bindings.",
"script/no-options-api.description": "Disallow Options API patterns",
"script/no-options-api.message": "Options API is not supported in Vapor. Use Composition API instead",
"script/no-options-api.help": "Refactor to use <script setup> with Composition API",
"script/no-get-current-instance.description": "Disallow getCurrentInstance()",
"script/no-get-current-instance.message": "getCurrentInstance() returns null in Vapor components",
"script/no-get-current-instance.help": "Use provide/inject or composables instead",
"script/no-async-in-computed.description": "Disallow async functions in computed properties",
"script/no-async-in-computed.message": "Computed properties cannot be async. They must return a value synchronously",
"script/no-async-in-computed.help": "Use ref with watch() and cleanup for async operations; abort or ignore stale work before assigning the result.",
"script/no-deep-destructure-in-props.description": "Disallow deeply nested destructuring in defineProps",
"script/no-deep-destructure-in-props.message": "Avoid deeply nested destructuring in defineProps (max depth: {depth})",
"script/no-deep-destructure-in-props.help": "Use simple destructuring and access nested properties via computed or direct prop access: `const props = defineProps<...>(); const nested = computed(() => props.parent.child)`",
"musea/require-title.description": "Require title attribute in art block",
"musea/require-title.message": "Art component requires a title attribute",
"musea/require-title.help": "Add a title attribute to describe the component",
"a11y/img-alt.description": "Require alt attribute on images",
"a11y/img-alt.message": "<img> elements must have an alt attribute for accessibility",
"a11y/img-alt.help": "**Why:** Screen readers use alt text to describe images to visually impaired users.\n\n**For informative images:**\n```vue\n<img src=\"chart.png\" alt=\"Sales increased 20% in Q4\">\n```\n\n**For decorative images:**\n```vue\n<img src=\"decoration.png\" alt=\"\">\n```\n\n**For complex images:**\n```vue\n<img src=\"diagram.png\" alt=\"Process flow\" aria-describedby=\"desc\">\n<p id=\"desc\">Detailed description...</p>\n```",
"a11y/anchor-has-content.description": "Require anchor elements to have accessible content",
"a11y/anchor-has-content.message": "<a> elements must have accessible content",
"a11y/anchor-has-content.help": "**Fix options:**\n\n1. Add text content:\n```vue\n<a href=\"/about\">About Us</a>\n```\n\n2. Add aria-label for icon-only links:\n```vue\n<a href=\"/settings\" aria-label=\"Settings\">\n <IconSettings />\n</a>\n```\n\n3. Include image with alt:\n```vue\n<a href=\"/\"><img src=\"logo.png\" alt=\"Home\"></a>\n```",
"a11y/heading-has-content.description": "Require heading elements to have accessible content",
"a11y/heading-has-content.message": "<{tag}> elements must have accessible content",
"a11y/heading-has-content.help": "**Why:** Empty headings confuse screen reader users and break document structure.\n\n**Fix:**\n```vue\n<!-- Add text content -->\n<h2>Section Title</h2>\n\n<!-- Or use aria-label for dynamic content -->\n<h2 aria-label=\"Loading...\"><Spinner /></h2>\n```",
"a11y/iframe-has-title.description": "Require iframe elements to have a title attribute",
"a11y/iframe-has-title.message": "<iframe> elements must have a title attribute",
"a11y/iframe-has-title.help": "**Why:** Screen readers announce the title to help users understand the iframe content.\n\n**Fix:**\n```vue\n<iframe \n src=\"https://example.com/video\"\n title=\"Product demo video\"\n></iframe>\n```\n\n**Note:** The title should describe the content, not the source.",
"a11y/no-distracting-elements.description": "Disallow distracting elements like <marquee> and <blink>",
"a11y/no-distracting-elements.message": "<{tag}> elements are distracting and should not be used",
"a11y/no-distracting-elements.help": "Remove this element or use CSS animations with reduced motion support",
"a11y/tabindex-no-positive.description": "Disallow positive tabindex values",
"a11y/tabindex-no-positive.message": "Avoid using positive tabindex values",
"a11y/tabindex-no-positive.help": "Use tabindex=\"0\" for focusable elements or tabindex=\"-1\" for programmatic focus only",
"a11y/click-events-have-key-events.description": "Require keyboard event handlers with click events",
"a11y/click-events-have-key-events.message": "Non-interactive elements with @click must also have keyboard event handlers",
"a11y/click-events-have-key-events.help": "**Why:** Keyboard users cannot activate click-only handlers.\n\n**Best solution:** Use semantic elements:\n```vue\n<button @click=\"handleClick\">Click me</button>\n```\n\n**If you must use a div:**\n```vue\n<div \n role=\"button\"\n tabindex=\"0\"\n @click=\"handleClick\"\n @keydown.enter=\"handleClick\"\n @keydown.space=\"handleClick\"\n>\n Click me\n</div>\n```",
"a11y/form-control-has-label.description": "Require form controls to have associated labels",
"a11y/form-control-has-label.message": "<{tag}> elements must have an associated label",
"a11y/form-control-has-label.help": "**Option 1:** Use `<label>` with `for`:\n```vue\n<label for=\"email\">Email</label>\n<input id=\"email\" type=\"email\">\n```\n\n**Option 2:** Wrap input in label:\n```vue\n<label>\n Email\n <input type=\"email\">\n</label>\n```\n\n**Option 3:** Use aria-label:\n```vue\n<input type=\"search\" aria-label=\"Search\">\n```\n\n**Note:** Placeholder is NOT a substitute for a label.",
"a11y/form-control-has-label.help_placeholder": "**Warning:** Placeholder text disappears when typing and is not accessible to all users.\n\n**Fix:** Add a proper label:\n```vue\n<label for=\"search\">Search</label>\n<input id=\"search\" placeholder=\"Enter keywords...\">\n```\n\nOr use aria-label:\n```vue\n<input aria-label=\"Search\" placeholder=\"Enter keywords...\">\n```",
"a11y/aria-props.description": "Disallow invalid ARIA attributes",
"a11y/aria-props.message": "Invalid ARIA attribute '{attr}'",
"a11y/aria-props.help": "**Why:** Invalid ARIA attributes prevent assistive technologies from conveying the intended meaning to users.\n\n**Valid ARIA attributes** are defined in the WAI-ARIA specification:\nhttps://www.w3.org/TR/wai-aria/#state_prop_def\n\n**Common ARIA attributes:**\n```vue\n<!-- Labeling -->\n<input aria-label=\"Search\" />\n<div aria-labelledby=\"title-id\">\n\n<!-- State -->\n<button aria-expanded=\"false\">\n<input aria-invalid=\"true\">\n\n<!-- Relationships -->\n<input aria-describedby=\"hint-id\">\n<div aria-controls=\"panel-id\">\n```\n\n**Note:** Custom `aria-*` attributes are not allowed. Only use attributes from the WAI-ARIA specification.",
"a11y/aria-props.help_suggestion": "**Invalid attribute:** `{invalid}`\n\n**Did you mean:** `{valid}`?\n\nThis is a common typo. ARIA attributes follow specific naming conventions from the WAI-ARIA specification.",
"a11y/aria-role.description": "Elements with ARIA roles must use a valid, non-abstract ARIA role",
"a11y/aria-role.message": "'{role}' is not a valid ARIA role",
"a11y/aria-role.message_abstract": "'{role}' is an abstract ARIA role and cannot be used directly",
"a11y/aria-role.help": "**Why:** Invalid ARIA roles prevent assistive technologies from conveying the intended meaning to users.\n\n**Valid ARIA roles** are defined in the WAI-ARIA specification:\nhttps://www.w3.org/TR/wai-aria/#role_definitions\n\n**Common roles:**\n```vue\n<!-- Widget roles -->\n<div role=\"button\">Click me</div>\n<div role=\"dialog\">Modal content</div>\n<div role=\"checkbox\">Toggle</div>\n\n<!-- Landmark roles -->\n<nav role=\"navigation\">...</nav>\n<main role=\"main\">...</main>\n<aside role=\"complementary\">...</aside>\n\n<!-- Document structure roles -->\n<div role=\"heading\" aria-level=\"2\">Title</div>\n<div role=\"list\">...</div>\n```",
"a11y/aria-role.help_abstract": "**Abstract roles** are base concepts in the ARIA spec and cannot be used directly.\n\n**Abstract roles include:**\n`command`, `composite`, `input`, `landmark`, `range`, `roletype`, `section`, `sectionhead`, `select`, `structure`, `widget`, `window`\n\n**Use concrete roles instead:**\n```vue\n<!-- Instead of role=\"range\" -->\n<div role=\"slider\">...</div>\n<div role=\"progressbar\">...</div>\n\n<!-- Instead of role=\"input\" -->\n<div role=\"textbox\">...</div>\n<div role=\"checkbox\">...</div>\n```",
"a11y/aria-role.help_suggestion": "**Invalid role:** `{invalid}`\n\n**Did you mean:** `{valid}`?\n\nRefer to the WAI-ARIA specification for a complete list of valid roles.",
"a11y/no-aria-hidden-on-focusable.description": "Disallow aria-hidden=\"true\" on focusable elements",
"a11y/no-aria-hidden-on-focusable.message": "aria-hidden=\"true\" must not be used on focusable elements",
"a11y/no-aria-hidden-on-focusable.help": "Remove aria-hidden=\"true\" or make the element non-focusable with tabindex=\"-1\"",
"a11y/no-access-key.description": "Disallow the use of the accesskey attribute",
"a11y/no-access-key.message": "The accesskey attribute should not be used. Access keys create keyboard shortcut conflicts",
"a11y/no-access-key.help": "Remove the accesskey attribute. Access keys create inconsistent keyboard shortcuts across platforms and conflict with assistive technology shortcuts",
"a11y/no-autofocus.description": "Disallow the use of the autofocus attribute",
"a11y/no-autofocus.message": "The autofocus attribute should not be used. It can disrupt navigation for screen reader users",
"a11y/no-autofocus.help": "Remove the autofocus attribute. Manage focus programmatically when needed using ref and focus()",
"a11y/no-role-presentation-on-focusable.description": "Disallow role=\"presentation\" or role=\"none\" on focusable elements",
"a11y/no-role-presentation-on-focusable.message": "Focusable elements must not have role=\"presentation\" or role=\"none\"",
"a11y/no-role-presentation-on-focusable.help": "Remove the role attribute or make the element non-focusable. Presentation role removes semantic meaning while the element remains focusable",
"a11y/aria-unsupported-elements.description": "Disallow ARIA attributes on elements that do not support them",
"a11y/aria-unsupported-elements.message": "<{tag}> does not support the '{attr}' attribute",
"a11y/aria-unsupported-elements.help": "Remove the ARIA attribute or role. Elements like <meta>, <html>, <script>, and <style> are not rendered and do not support ARIA",
"a11y/no-redundant-roles.description": "Disallow redundant ARIA roles",
"a11y/no-redundant-roles.message": "<{tag}> has an implicit role of '{role}'. The role attribute is redundant",
"a11y/no-redundant-roles.help": "Remove the redundant role attribute. The element already has this role implicitly through its HTML semantics",
"a11y/mouse-events-have-key-events.description": "Require focus/blur events with mouse events",
"a11y/mouse-events-have-key-events.message_enter": "@mouseenter/@mouseover must be paired with @focus for keyboard accessibility",
"a11y/mouse-events-have-key-events.message_leave": "@mouseleave/@mouseout must be paired with @blur for keyboard accessibility",
"a11y/mouse-events-have-key-events.help": "**Why:** Keyboard and touch users cannot trigger mouse events.\n\n**Fix:**\n```vue\n<div\n @mouseenter=\"show\"\n @mouseleave=\"hide\"\n @focus=\"show\"\n @blur=\"hide\"\n tabindex=\"0\"\n>\n Hover or focus me\n</div>\n```",
"a11y/alt-text.description": "Require alternative text for media elements",
"a11y/alt-text.message_img": "<img> elements must have an alt attribute",
"a11y/alt-text.message_area": "<area> elements must have alt, aria-label, or aria-labelledby",
"a11y/alt-text.message_input_image": "<input type=\"image\"> must have alt, aria-label, or aria-labelledby",
"a11y/alt-text.message_object": "<object> elements must have title, aria-label, or aria-labelledby",
"a11y/alt-text.help_img": "Add an alt attribute: `<img alt=\"Description\">` or `<img alt=\"\">` for decorative images",
"a11y/alt-text.help_area": "Add alt, aria-label, or aria-labelledby to the <area> element",
"a11y/alt-text.help_input_image": "Add alt, aria-label, or aria-labelledby to the <input type=\"image\"> element",
"a11y/alt-text.help_object": "Add title, aria-label, or aria-labelledby to the <object> element",
"a11y/anchor-is-valid.description": "Enforce valid href on anchor elements",
"a11y/anchor-is-valid.message_empty": "<a> element has an empty href attribute",
"a11y/anchor-is-valid.message_hash": "<a> element has href=\"#\" which is not a valid navigation target",
"a11y/anchor-is-valid.message_javascript": "<a> element has a javascript: href which is not recommended",
"a11y/anchor-is-valid.message_missing": "<a> element is missing an href attribute",
"a11y/anchor-is-valid.help": "**Fix:**\n```vue\n<!-- Use a valid URL -->\n<a href=\"/about\">About</a>\n\n<!-- For click handlers, use <button> -->\n<button @click=\"handleClick\">Action</button>\n\n<!-- For dynamic URLs -->\n<a :href=\"url\">Link</a>\n```",
"a11y/label-has-for.description": "Require labels to have associated form controls",
"a11y/label-has-for.message": "<label> must have a `for` attribute or wrap a form control (input, select, textarea)",
"a11y/label-has-for.help": "**Fix options:**\n\n1. Use `for` attribute:\n```vue\n<label for=\"name\">Name</label>\n<input id=\"name\" type=\"text\">\n```\n\n2. Wrap form control:\n```vue\n<label>Name <input type=\"text\"></label>\n```",
"a11y/interactive-supports-focus.description": "Require interactive role elements to be focusable",
"a11y/interactive-supports-focus.message": "Element with role=\"{role}\" must be focusable (add tabindex=\"0\")",
"a11y/interactive-supports-focus.help": "**Why:** Interactive roles imply the element can be activated by keyboard users.\n\n**Fix:**\n```vue\n<div role=\"button\" tabindex=\"0\" @click=\"handle\">\n Click me\n</div>\n```\n\n**Better:** Use native interactive elements:\n```vue\n<button @click=\"handle\">Click me</button>\n```",
"a11y/role-has-required-aria-props.description": "Require ARIA roles to have required properties",
"a11y/role-has-required-aria-props.message": "Elements with role=\"{role}\" must have the '{prop}' attribute",
"a11y/role-has-required-aria-props.help": "**Role `{role}` requires:** {props}\n\n**Example:**\n```vue\n<div role=\"{role}\" {props}=\"...\">\n Content\n</div>\n```",
"a11y/media-has-caption.description": "Require media elements to have captions",
"a11y/media-has-caption.message": "<{tag}> elements must have a <track kind=\"captions\"> for accessibility",
"a11y/media-has-caption.help": "**Fix:**\n```vue\n<video src=\"movie.mp4\">\n <track kind=\"captions\" src=\"captions.vtt\" />\n</video>\n```\n\n**Alternatives:**\n- Add `muted` attribute for decorative media\n- Add `aria-label` for described media",
"a11y/no-static-element-interactions.description": "Disallow event handlers on static elements",
"a11y/no-static-element-interactions.message": "<{tag}> is a static element and should not have interactive event handlers",
"a11y/no-static-element-interactions.help": "**Why:** Non-interactive elements (div, span, etc.) should not have click/keyboard handlers without a role.\n\n**Fix options:**\n\n1. Use a native interactive element:\n```vue\n<button @click=\"handle\">Click me</button>\n```\n\n2. Add role and tabindex:\n```vue\n<div role=\"button\" tabindex=\"0\" @click=\"handle\">\n Click me\n</div>\n```",
"vue/use-unique-element-ids.description": "Enforce unique element IDs using useId() instead of static literals",
"vue/use-unique-element-ids.message": "Static id=\"{value}\" may cause duplicate IDs when component is rendered multiple times",
"vue/use-unique-element-ids.message_reference": "Static ID reference '{value}' may reference a non-unique ID",
"vue/use-unique-element-ids.help": "**Why:** Static `id` attributes can cause duplicate IDs when components are rendered multiple times, leading to accessibility issues and broken functionality (e.g., label-input associations).\n\n**Fix:** Use `useId()` from Vue 3.5+:\n```vue\n<script setup>\nimport { useId } from 'vue'\n\nconst id = useId()\n</script>\n\n<template>\n <label :for=\"id\">Name:</label>\n <input :id=\"id\" type=\"text\">\n</template>\n```\n\n**Benefits:**\n- Generates unique IDs for each component instance\n- Stable across server and client rendering (SSR-safe)\n- Works with labels, ARIA attributes, and form associations",
"vue/use-unique-element-ids.help_has_use_id": "**Good:** You're already using `useId()`. Now use the generated ID in your template:\n```vue\n<label :for=\"id\">Name:</label>\n<input :id=\"id\" type=\"text\">\n```\n\nReplace static `id`, `for`, and ARIA ID references with the dynamic value.",
"vue/no-child-content.description": "Disallow child content when using v-html or v-text",
"vue/no-child-content.message": "Child content of element with v-{directive} will be overwritten",
"vue/no-child-content.help": "**Why:** When using `v-html` or `v-text`, Vue replaces the element's child content with the directive value. Any child content is silently ignored.\n\n**Fix:** Remove the child content:\n```vue\n<!-- Before -->\n<div v-html=\"content\">This will be ignored</div>\n\n<!-- After -->\n<div v-html=\"content\"></div>\n```",
"vue/valid-attribute-name.description": "Require valid attribute names",
"vue/valid-attribute-name.message": "Attribute name '{name}' is invalid",
"vue/valid-attribute-name.help": "Attribute names must not contain spaces, quotes, `>`, `/`, `=`, or control characters",
"vue/no-v-text-v-html-on-component.description": "Disallow v-text / v-html on component elements",
"vue/no-v-text-v-html-on-component.message": "v-{directive} cannot be used on component <{tag}>",
"vue/no-v-text-v-html-on-component.help": "**Why:** Components have their own rendering logic. `v-text`/`v-html` would overwrite the component's content unexpectedly.\n\n**Fix:** Pass content via props or slots:\n```vue\n<!-- Instead of -->\n<MyComponent v-html=\"content\" />\n\n<!-- Use slots -->\n<MyComponent><div v-html=\"content\" /></MyComponent>\n```",
"vue/require-component-is.description": "Require `v-bind:is` on `<component>` elements",
"vue/require-component-is.message": "<component> requires a `:is` or `is` attribute",
"vue/require-component-is.help": "**Why:** The `<component>` element is a dynamic component placeholder. Without `is`, Vue cannot determine which component to render.\n\n**Fix:**\n```vue\n<component :is=\"currentComponent\" />\n<component is=\"MyComponent\" />\n```",
"vue/no-useless-template-attributes.description": "Disallow useless attributes on <template> elements",
"vue/no-useless-template-attributes.message": "'{attr}' is useless on <template> — it will be ignored",
"vue/no-useless-template-attributes.help": "**Why:** `<template>` is not rendered to the DOM. Only structural directives (v-if, v-for, v-slot) and `:key` are meaningful.\n\n**Fix:** Move attributes to a child element or remove them.",
"vue/valid-v-memo.description": "Enforce valid v-memo directives",
"vue/valid-v-memo.missing_expression": "v-memo requires a dependency array expression",
"vue/valid-v-memo.unexpected_argument": "v-memo does not accept an argument",
"vue/valid-v-memo.unexpected_modifier": "v-memo does not accept modifiers",
"vue/valid-v-memo.help": "**Usage:**\n```vue\n<div v-memo=\"[valueA, valueB]\">\n <!-- Only re-renders when valueA or valueB changes -->\n</div>\n```\n\n**Note:** `v-memo` accepts an array of dependencies, similar to React's `useMemo`.",
"vue/use-v-on-exact.description": "Enforce .exact modifier on v-on when using system modifiers",
"vue/use-v-on-exact.message": "@{event} without .exact will also fire when system modifiers are pressed",
"vue/use-v-on-exact.help": "**Why:** `@click` fires even when Ctrl/Shift/Alt/Meta is pressed. Use `.exact` to only fire when no system modifiers are active.\n\n**Fix:**\n```vue\n<!-- Before -->\n<button @click=\"onClick\" @click.ctrl=\"onCtrlClick\" />\n\n<!-- After -->\n<button @click.exact=\"onClick\" @click.ctrl=\"onCtrlClick\" />\n```",
"vue/v-slot-style.description": "Enforce v-slot directive style",
"vue/v-slot-style.message_shorthand": "Use shorthand `#name` instead of `v-slot:name`",
"vue/v-slot-style.message_longform": "Use longform `v-slot:name` instead of `#name`",
"vue/v-slot-style.help": "**Shorthand:** `<template #header>` (default)\n**Longform:** `<template v-slot:header>`\n\nChoose one style and be consistent.",
"vue/prop-name-casing.description": "Enforce kebab-case prop names in templates",
"vue/prop-name-casing.message": "Prop '{name}' should be '{kebab}' (kebab-case)",
"vue/prop-name-casing.help": "Use kebab-case for prop names in templates:\n```vue\n<!-- Bad -->\n<MyComponent myProp=\"value\" />\n\n<!-- Good -->\n<MyComponent my-prop=\"value\" />\n```",
"vue/html-quotes.description": "Enforce quotes style of HTML attributes",
"vue/html-quotes.message_double": "Expected double quotes but found single quotes",
"vue/html-quotes.message_single": "Expected single quotes but found double quotes",
"vue/html-quotes.help": "Use consistent quote style for HTML attribute values.",
"vue/component-definition-name-casing.description": "Enforce PascalCase for component file names",
"vue/component-definition-name-casing.message": "Component file name '{name}' should be PascalCase",
"vue/component-definition-name-casing.help": "Rename the file to PascalCase:\n```\nmy-component.vue -> MyComponent.vue\nmyComponent.vue -> MyComponent.vue\n```",
"compiler.parse_error": "Parse error: {message}",
"compiler.unexpected_token": "Unexpected token '{token}'",
"compiler.unclosed_tag": "Unclosed tag <{tag}>",
"compiler.invalid_directive": "Invalid directive syntax: {directive}",
"compiler.missing_end_tag": "Missing end tag for <{tag}>",
"cli.compiling": "Compiling {count} files...",
"cli.compiled": "Compiled {count} files in {time}ms",
"cli.error_count": "{count} error(s) found",
"cli.warning_count": "{count} warning(s) found",
"cli.slow_file_warning": "Slow compilation detected for {file} ({time}ms)",
"cli.suggest_split": "Consider splitting large components into smaller ones",
"cli.suggest_template": "Large template detected ({size} bytes). Consider extracting parts into child components",
"ssr/no-browser-globals-in-ssr.description": "Disallow browser-only globals in SSR context",
"ssr/no-browser-globals-in-ssr.message": "'{name}' is a browser-only global and is not available in SSR",
"ssr/no-browser-globals-in-ssr.help": "Move browser-only code to client lifecycle hooks like onMounted() or use <ClientOnly>",
"ssr/no-hydration-mismatch.description": "Disallow non-deterministic values that cause hydration mismatch",
"ssr/no-hydration-mismatch.message": "'{pattern}' may cause hydration mismatch between server and client",
"ssr/no-hydration-mismatch.message-attr": "'{pattern}' in attribute binding may cause hydration mismatch",
"ssr/no-hydration-mismatch.help": "Use useId() for unique IDs, or wrap in <ClientOnly> for client-only values",
"ts/2304.message": "Cannot find name '{name}'",
"ts/2304.help": "**`{name}`** is not defined.\n\n**Possible causes:**\n- The variable is not imported or declared\n- There's a typo in the name\n- The variable is defined in a different scope\n\n**Solutions:**\n```ts\n// 1. Import from a module\nimport { {name} } from './module';\n\n// 2. Declare in script setup\nconst {name} = ...;\n\n// 3. Check for typos in the name\n```",
"ts/2322.message": "Type '{source}' is not assignable to type '{target}'",
"ts/2322.help": "**Type mismatch detected.**\n\nYou're trying to assign a value of type `{source}` to something that expects `{target}`.\n\n**Common fixes:**\n- Check if the value matches the expected type\n- Use type assertion if you're sure: `value as {target}`\n- Update the type definition to accept the actual type\n\n**Example:**\n```ts\n// If target is 'number' but source is 'string'\nconst value = parseInt(stringValue); // Convert string to number\n```",
"ts/2339.message": "Property '{name}' does not exist on type '{type}'",
"ts/2339.help": "**Property `{name}` not found on `{type}`.**\n\n**Possible causes:**\n- The property name is misspelled\n- The property doesn't exist on this type\n- You need to narrow the type first\n\n**Solutions:**\n```ts\n// 1. Check if property exists\nif ('{name}' in obj) {\n obj.{name};\n}\n\n// 2. Use optional chaining\nobj?.{name};\n\n// 3. Add property to type definition\ninterface MyType {\n {name}: SomeType;\n}\n```",
"ts/2345.message": "Argument of type '{source}' is not assignable to parameter of type '{target}'",
"ts/2345.help": "**Argument type mismatch.**\n\nThe function expects `{target}` but received `{source}`.\n\n**Solutions:**\n- Convert the value to the expected type\n- Check if you're passing the correct argument\n- Update the function signature if needed\n\n```ts\n// Example: function expects number\nfunc(Number(value)); // Convert to number\n```",
"ts/2349.message": "This expression is not callable",
"ts/2349.help": "**Cannot call non-function value.**\n\nYou're trying to call something that isn't a function.\n\n**Common causes:**\n- The value is `undefined` or `null`\n- It's an object, not a function\n- The property returns a value, not a method\n\n**Solutions:**\n```ts\n// Check if it's a function before calling\nif (typeof maybeFunc === 'function') {\n maybeFunc();\n}\n\n// Or use optional chaining\nmaybeFunc?.();\n```",
"ts/2531.message": "Object is possibly 'null'",
"ts/2531.help": "**Possible null value detected.**\n\nTypeScript warns that this value might be `null`.\n\n**Solutions:**\n```ts\n// 1. Use optional chaining\nobj?.property;\n\n// 2. Use nullish coalescing\nconst value = obj ?? defaultValue;\n\n// 3. Add null check\nif (obj !== null) {\n obj.property;\n}\n\n// 4. Use non-null assertion (if certain)\nobj!.property; // Only if you're 100% sure\n```",
"ts/2532.message": "Object is possibly 'undefined'",
"ts/2532.help": "**Possible undefined value detected.**\n\nTypeScript warns that this value might be `undefined`.\n\n**Solutions:**\n```ts\n// 1. Use optional chaining\nobj?.property;\n\n// 2. Provide default value\nconst value = obj ?? defaultValue;\n\n// 3. Add undefined check\nif (obj !== undefined) {\n obj.property;\n}\n\n// 4. Initialize the value\nconst obj = ref<Type>(initialValue);\n```",
"ts/2554.message": "Expected {expected} arguments, but got {actual}",
"ts/2554.help": "**Wrong number of arguments.**\n\nThe function expects **{expected}** argument(s) but you provided **{actual}**.\n\n**Solutions:**\n- Add missing arguments\n- Remove extra arguments\n- Check the function signature\n\n```ts\n// Check function definition\nfunction example(a: string, b?: number) { }\n// Required: a (string)\n// Optional: b (number)\n```",
"ts/2555.message": "Expected {expected} arguments, but got {actual}",
"ts/2555.help": "**Too many arguments provided.**\n\nThe function only accepts **{expected}** argument(s) but you passed **{actual}**.\n\n**Solution:**\nRemove the extra arguments or update the function to accept more parameters.",
"ts/2307.message": "Cannot find module '{module}' or its corresponding type declarations",
"ts/2307.help": "**Module not found: `{module}`**\n\n**Possible causes:**\n- The package is not installed\n- The import path is incorrect\n- Type declarations are missing\n\n**Solutions:**\n```bash\n# 1. Install the package\nnpm install {module}\n\n# 2. Install type declarations (if separate)\nnpm install -D @types/{module}\n```\n\n**For local modules:**\n- Check the file path is correct\n- Use relative paths: `./` or `../`\n- Check file extension",
"ts/2300.message": "Duplicate identifier '{name}'",
"ts/2300.help": "**Duplicate declaration of `{name}`.**\n\nThis identifier is already declared in this scope.\n\n**Solutions:**\n- Rename one of the declarations\n- Remove the duplicate\n- Check if you're accidentally importing the same thing twice",
"ts/2451.message": "Cannot redeclare block-scoped variable '{name}'",
"ts/2451.help": "**Variable `{name}` already declared.**\n\nYou cannot redeclare a `let` or `const` variable in the same scope.\n\n**Solutions:**\n```ts\n// 1. Rename the variable\nconst {name}2 = ...;\n\n// 2. Assign instead of redeclare\n{name} = newValue; // if using let\n\n// 3. Use different scope\n{\n const {name} = ...; // OK in new block\n}\n```",
"ts/7006.message": "Parameter '{name}' implicitly has an 'any' type",
"ts/7006.help": "**Missing type annotation for `{name}`.**\n\nTypeScript cannot infer the type of this parameter.\n\n**Solution - Add explicit type:**\n```ts\n// Before\nfunction example({name}) { }\n\n// After\nfunction example({name}: string) { }\n\n// With default value (type inferred)\nfunction example({name} = 'default') { }\n```",
"ts/2741.message": "Property '{name}' is missing in type '{source}' but required in type '{target}'",
"ts/2741.help": "**Missing required property: `{name}`**\n\nThe type `{target}` requires property `{name}` but it's not present in `{source}`.\n\n**Solutions:**\n```ts\n// 1. Add the missing property\nconst obj: {target} = {\n ...existingProps,\n {name}: value,\n};\n\n// 2. Make property optional in type definition\ninterface {target} {\n {name}?: Type; // Optional\n}\n```",
"ts/2344.message": "Type '{type}' does not satisfy the constraint '{constraint}'",
"ts/2344.help": "**Type constraint violation.**\n\nThe type `{type}` doesn't meet the requirements of `{constraint}`.\n\n**Solution:**\nEnsure your type extends or implements the required constraint:\n```ts\n// Example: T must extend SomeBase\nfunction example<T extends SomeBase>(value: T) { }\n```",
"ts/2351.message": "This expression is not constructable",
"ts/2351.help": "**Cannot use `new` on this value.**\n\nThis expression cannot be used with `new`.\n\n**Common causes:**\n- It's not a class or constructor function\n- You're trying to instantiate a type, not a class\n\n**Example:**\n```ts\n// Wrong: type alias, not a class\ntype MyType = { x: number };\nnew MyType(); // Error!\n\n// Correct: use class\nclass MyClass { x: number = 0; }\nnew MyClass(); // OK\n```",
"ts/vue/9001.message": "Invalid prop type for '{name}'",
"ts/vue/9001.help": "**Prop type mismatch for `{name}`.**\n\nThe prop value doesn't match the expected type defined in `defineProps`.\n\n**Solutions:**\n```ts\n// Check prop definition\ndefineProps<{\n {name}: string; // Expected type\n}>();\n\n// Ensure parent passes correct type\n<MyComponent :{name}=\"stringValue\" />\n```",
"ts/vue/9002.message": "Invalid emit call: '{event}'",
"ts/vue/9002.help": "**Invalid emit usage for `{event}`.**\n\nThe emit call doesn't match the defined events.\n\n**Solutions:**\n```ts\n// Check emit definition\nconst emit = defineEmits<{\n {event}: [payload: PayloadType];\n}>();\n\n// Call with correct payload\nemit('{event}', payload);\n```",
"ts/vue/9003.message": "Unknown component: '{name}'",
"ts/vue/9003.help": "**Component `{name}` not found.**\n\n**Possible causes:**\n- Component is not imported\n- Component name is misspelled\n- Using kebab-case instead of PascalCase (or vice versa)\n\n**Solutions:**\n```ts\n// Import the component\nimport {name} from './components/{name}.vue';\n\n// Or register globally\napp.component('{name}', {name});\n```",
"ts/vue/9004.message": "Invalid slot usage: '{name}'",
"ts/vue/9004.help": "**Slot `{name}` usage error.**\n\n**Common issues:**\n- Slot doesn't exist on the component\n- Wrong slot props\n\n**Usage:**\n```vue\n<template>\n <MyComponent>\n <template #{name}=\"{ prop }\">\n <!-- slot content -->\n </template>\n </MyComponent>\n</template>\n```",
"ts/vue/9005.message": "Invalid directive: '{name}'",
"ts/vue/9005.help": "**Directive `{name}` error.**\n\n**Common causes:**\n- Directive is not registered\n- Wrong directive syntax\n\n**Solutions:**\n```ts\n// Register directive locally\nimport { v{name} } from './directives';\n\n// Or globally\napp.directive('{name}', {\n mounted(el, binding) { ... }\n});\n```",
"ts/vue/9006.message": "Reactivity issue detected",
"ts/vue/9006.help": "**Possible reactivity loss.**\n\nYour code may lose reactivity due to how values are accessed or destructured.\n\n**Common issues and fixes:**\n```ts\n// ❌ Destructuring loses reactivity\nconst { count } = props;\n\n// ✅ Use toRefs\nconst { count } = toRefs(props);\n\n// ❌ Assigning ref value\nlet x = ref(0).value;\n\n// ✅ Keep the ref\nconst x = ref(0);\n```",
"a11y/no-i-for-icon.description": "Disallow using <i> element for icons",
"a11y/no-i-for-icon.message": "<i> element with icon CSS class should not be used for icons. Use a semantic element instead",
"a11y/no-i-for-icon.help": "**Why:** The `<i>` element semantically represents *italic text*, not icons. Using it for icon fonts creates accessibility issues — screen readers may announce meaningless content.\n\n**Fix:** Use `<span>` with `aria-hidden=\"true\"` instead:\n```vue\n<span class=\"fas fa-home\" aria-hidden=\"true\"></span>\n<span class=\"sr-only\">Home</span>\n```\n\nOr use an SVG icon component for best accessibility.",
"a11y/no-refer-to-non-existent-id.description": "Disallow references to non-existent IDs",
"a11y/no-refer-to-non-existent-id.message": "The {kind} attribute references id=\"{id}\" which does not exist in the template",
"a11y/no-refer-to-non-existent-id.help": "**Why:** ID reference attributes like `for`, `aria-labelledby`, `aria-describedby`, etc. must point to an existing element with that `id`. A broken reference silently breaks the association.\n\n**Fix:** Ensure the referenced ID exists in the template:\n```vue\n<label for=\"name\">Name:</label>\n<input id=\"name\" type=\"text\">\n```",
"vue/use-unique-element-ids.message_form": "Form element has static id=\"{value}\" — use useId() for unique IDs to ensure label/input associations work correctly",
"vue/use-unique-element-ids.message_aria_ref": "Static id=\"{value}\" on element with ARIA references — use useId() to ensure ARIA associations remain unique",
"vue/permitted-contents.description": "Enforce HTML content model rules",
"vue/permitted-contents.block_in_inline": "<{child}> (block element) is not allowed inside <{parent}> (phrasing content only)",
"vue/permitted-contents.interactive_nesting": "<{tag}> is an interactive element and cannot be nested inside another interactive element",
"vue/permitted-contents.invalid_child": "<{child}> is not allowed as a direct child of <{parent}>",
"vue/permitted-contents.help": "**Why:** HTML has content model rules that define which elements can be nested inside others. Violating these rules causes browsers to auto-correct the DOM, leading to unexpected rendering.\n\n**Common rules:**\n- `<p>`, `<span>`, `<a>` can only contain phrasing (inline) content\n- `<a>` and `<button>` cannot be nested inside each other\n- `<ul>/<ol>` direct children must be `<li>`\n- `<table>` direct children must be `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, or `<caption>`",
"category.html_conformance": "HTML Conformance",
"html/deprecated-element.message": "<{tag}> is a deprecated HTML element",
"html/deprecated-element.help": "This element is obsolete per the HTML Living Standard. Use modern HTML elements with CSS for styling instead.",
"html/deprecated-attr.message": "The \"{attr}\" attribute on <{tag}> is deprecated",
"html/deprecated-attr.help": "Use {suggestion} instead.",
"html/no-consecutive-br.message": "Consecutive <br> elements detected",
"html/no-consecutive-br.help": "Use <p> elements or CSS margin/padding for spacing instead of multiple <br> tags.",
"html/id-duplication.message": "Duplicate id=\"{id}\" found in template",
"html/id-duplication.help": "Element IDs must be unique within a document. Duplicate IDs break label associations, ARIA references, and getElementById().",
"html/require-datetime.message": "<time> element needs a datetime attribute when content is not a valid datetime string",
"html/require-datetime.help": "Add a datetime attribute with a machine-readable date/time value, e.g. <time datetime=\"2024-12-25\">Christmas</time>",
"html/no-empty-palpable-content.message": "<{tag}> element is empty but expects visible content",
"html/no-empty-palpable-content.help": "Add text content, child elements, or use aria-label for accessible content.",
"html/no-duplicate-dt.message": "Duplicate <dt> term \"{term}\" in <dl>",
"html/no-duplicate-dt.help": "Each term in a definition list should be unique. Combine definitions under a single <dt> or use distinct terms.",
"a11y/heading-levels.message": "Heading level skipped from <{from}> to <{to}>",
"a11y/heading-levels.help": "Heading levels should increase by one. Screen reader users navigate by heading levels, so skipping levels makes the document structure confusing.",
"a11y/use-list.message": "Text appears to be a list item. Use <ul> or <ol> for proper list semantics",
"a11y/use-list.help": "Screen readers cannot identify bullet characters as list items. Use semantic <ul>/<ol> with <li> elements instead.",
"a11y/placeholder-label-option.message": "Placeholder <option> should have disabled or hidden attribute",
"a11y/placeholder-label-option.help": "Add disabled or hidden to the placeholder <option> to prevent it from being selected:\n<option value=\"\" disabled>Choose one</option>",
"a11y/landmark-roles.duplicate_main": "Only one <main> landmark is allowed per page",
"a11y/landmark-roles.help_duplicate_main": "A page should have exactly one <main> landmark. Remove duplicate <main> elements or use role=\"main\" on only one element.",
"a11y/landmark-roles.missing_label": "Multiple \"{role}\" landmarks found without distinct labels",
"a11y/landmark-roles.help_missing_label": "When multiple landmarks of the same type exist, each should have a unique aria-label or aria-labelledby to help users distinguish them.",
"vue/no-boolean-attr-value.message": "Boolean attribute \"{attr}\" should not have value \"{value}\"",
"vue/no-boolean-attr-value.help": "Remove the value. Use just {attr} instead of {attr}=\"...\"."
}