src/content/docs/linter/rules/no-unknown-attribute.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.3` - Diagnostic Category: [`lint/nursery/noUnknownAttribute`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - Sources: - Same as [`react/no-unknown-property`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md){
"linter": {
"rules": {
"nursery": {
"noUnknownAttribute": "error"
}
}
}
}
Disallow unknown DOM properties.
In JSX, most DOM properties and attributes should be camelCased to be consistent with standard JavaScript style.
This can be a possible source of error if you are used to writing plain HTML.
Only data-* and aria-* attributes are allowed to use hyphens and lowercase letters in JSX.
<div allowTransparency="true" />
<div onclick={() => {}} />
<div for="bar" />
<div className="foo" />
<div onClick={() => {}} />
<div htmlFor="bar" />
<div data-foo="bar" />
<div aria-label="Close" />
ignoreAn array of property and attribute names to ignore during validation.
{
"noUnknownAttribute": {
"options": {
"ignore": ["custom-attribute", "non-standard-prop"]
}
}
}