dom-node-dataset

📝 Enforce consistent style for DOM element dataset access.

💼 This rule is enabled in the following configs: ✅ recommended, ☑️ unopinionated.

🔧 This rule is automatically fixable by the --fix CLI option.

Use .dataset on DOM elements over getAttribute(…), .setAttribute(…), .removeAttribute(…) and .hasAttribute(…).

Examples

// ❌
const unicorn = element.getAttribute('data-unicorn');

// ✅
const {unicorn} = element.dataset;

// ❌
element.setAttribute('data-unicorn', '🦄');

// ✅
element.dataset.unicorn = '🦄';

// ❌
element.removeAttribute('data-unicorn');

// ✅
delete element.dataset.unicorn;

// ❌
const hasUnicorn = element.hasAttribute('data-unicorn');

// ✅
const hasUnicorn = Object.hasOwn(element.dataset, 'unicorn');

// ✅
const foo = element.getAttribute('foo');

// ✅
element.setAttribute('not-dataset', '🦄');

// ✅
element.removeAttribute('not-dataset');

// ✅
const hasFoo = element.hasAttribute('foo');

Options

preferAttributes

Type: boolean
Default: false

When true, enforces the opposite direction: prefer getAttribute(…) / setAttribute(…) / removeAttribute(…) / hasAttribute(…) over named .dataset access — covering reads, writes, delete, simple destructuring, and existence checks (in, Object.hasOwn, .hasOwnProperty()). Whole-object reads (const data = element.dataset) and inherited members (element.dataset.toString) are not flagged. This can be useful for greppability when data attributes are also referenced in CSS/HTML.

// eslint unicorn/dom-node-dataset: ["error", {"preferAttributes": true}]

// ❌
const unicorn = element.dataset.unicorn;
element.dataset.unicorn = '🦄';
delete element.dataset.unicorn;
'unicorn' in element.dataset;

// ✅
const unicorn = element.getAttribute('data-unicorn');
element.setAttribute('data-unicorn', '🦄');
element.removeAttribute('data-unicorn');
element.hasAttribute('data-unicorn');