Elements Lint
The @nvidia-elements/lint package is a utility library that provides Elements-specific lint rules to enforce best practices and prevent common errors when using Elements
If not yet done, install NodeJS. NodeJS is a JavaScript runtime that has a large ecosystem of tooling and packages for Web Development. Once installed the Node Package Manager (NPM) will be available for use.
# install
npm install @nvidia-elements/lint --save-dev
# install
npm install @nvidia-elements/lint --save-dev
ESLint
To apply the default recommended configs import elementsRecommended.
// eslint.config.js
import { elementsRecommended } from '@nvidia-elements/lint/eslint';
/** @type {import('eslint').Linter.Config[]} */
export default [
...elementsRecommended
];
// eslint.config.js
import { elementsRecommended } from '@nvidia-elements/lint/eslint';
/** @type {import('eslint').Linter.Config[]} */
export default [
...elementsRecommended
];
Or optionally import language specific configurations.
// eslint.config.js
import { elementsHtmlConfig, elementsCssConfig } from '@nvidia-elements/lint/eslint';
/** @type {import('eslint').Linter.Config[]} */
export default [
elementsHtmlConfig,
elementsCssConfig
];
// eslint.config.js
import { elementsHtmlConfig, elementsCssConfig } from '@nvidia-elements/lint/eslint';
/** @type {import('eslint').Linter.Config[]} */
export default [
elementsHtmlConfig,
elementsCssConfig
];
eslint -c ./eslint.config.js --color
eslint -c ./eslint.config.js --color
Severity
You can adjust rules individually for lint severity. By default all rules use error.
import { elementsHtmlConfig, elementsCssConfig } from '@nvidia-elements/lint/eslint';
/** @type {import('eslint').Linter.Config[]} */
export default [
elementsHtmlConfig,
{
...elementsCssConfig,
rules: {
'@nvidia-elements/lint/no-unexpected-css-value': 'warn'
}
}
];
import { elementsHtmlConfig, elementsCssConfig } from '@nvidia-elements/lint/eslint';
/** @type {import('eslint').Linter.Config[]} */
export default [
elementsHtmlConfig,
{
...elementsCssConfig,
rules: {
'@nvidia-elements/lint/no-unexpected-css-value': 'warn'
}
}
];
Rules
Rule Description Language Severity @nvidia-elements/lint/no-complex-popovers Disallow excessive DOM complexity inside popover elements. HTML error @nvidia-elements/lint/no-deprecated-attributes Disallow use of deprecated attributes in HTML. HTML error @nvidia-elements/lint/no-deprecated-global-attribute-value Disallow use of deprecated attribute values for nve-* utility attributes. HTML error @nvidia-elements/lint/no-deprecated-css-imports Disallow use of deprecated CSS import paths. CSS error @nvidia-elements/lint/no-deprecated-css-variable Disallow use of deprecated CSS custom properties. CSS/HTML error @nvidia-elements/lint/no-deprecated-global-attributes Disallow use of deprecated global utility attributes in HTML. HTML error @nvidia-elements/lint/no-deprecated-icon-names Disallow use of deprecated icon names. HTML error @nvidia-elements/lint/no-deprecated-packages Disallow usage of deprecated packages. JSON error @nvidia-elements/lint/no-deprecated-popover-attributes Disallow use of deprecated popover attributes. HTML error @nvidia-elements/lint/no-deprecated-slots Disallow use of deprecated slot APIs. HTML error @nvidia-elements/lint/no-deprecated-tags Disallow use of deprecated elements in HTML. HTML error @nvidia-elements/lint/no-excessive-primary-actions Limit primary actions to two per page. HTML error @nvidia-elements/lint/no-invalid-event-listeners Disallow inline event handler attributes in HTML. HTML error @nvidia-elements/lint/no-invalid-invoker-triggers Disallow use of invoker trigger attributes on non-button nve-* elements. HTML error @nvidia-elements/lint/no-missing-control-label Require form controls to have an accessible label. HTML error @nvidia-elements/lint/no-missing-gap-space Require gap spacing on row, column, and grid layouts. HTML error @nvidia-elements/lint/no-missing-icon-name Require icon elements to have an icon name attribute. HTML error @nvidia-elements/lint/no-missing-popover-trigger Require popover elements to have a corresponding trigger element. HTML error @nvidia-elements/lint/no-missing-slotted-elements Disallow use of missing slotted elements. HTML error @nvidia-elements/lint/no-misprefixed-tags Disallow misprefixed (nv-*) Elements tags that resolve to a known (nve-*) element. HTML error @nvidia-elements/lint/no-nested-container-types Require nested container components to use flat container mode. HTML error @nvidia-elements/lint/no-restricted-attributes Disallow use of invalid API attributes or utility attributes on custom HTML element tags. HTML error @nvidia-elements/lint/no-restricted-container-full Restrict container="full" to direct children of nve-page. HTML error @nvidia-elements/lint/no-restricted-page-sizing Disallow custom height or width styles on nve-page. HTML error @nvidia-elements/lint/no-slotted-popovers Disallow the slot attribute on popover elements. HTML error @nvidia-elements/lint/no-tailwind-classes Disallow Tailwind CSS utility classes with Elements alternatives, and all Tailwind utilities on nve custom elements. HTML warn @nvidia-elements/lint/no-unexpected-attribute-value Disallow use of invalid attribute values for nve-* elements. HTML error @nvidia-elements/lint/no-unexpected-css-value Disallow use of invalid CSS values. CSS error @nvidia-elements/lint/no-unexpected-css-variable Disallow use of invalid CSS theme variables. CSS error @nvidia-elements/lint/no-unexpected-global-attribute-value Disallow use of invalid attribute values in HTML. HTML error @nvidia-elements/lint/no-unexpected-input-type Disallow slotted input elements with a type that does not match the parent Elements component. HTML error @nvidia-elements/lint/no-unexpected-library-dependencies Disallow incorrect dependency usage of @nve packages in consuming libraries. JSON error @nvidia-elements/lint/no-unexpected-slot-value Disallow use of invalid slot values in HTML. HTML error @nvidia-elements/lint/no-unexpected-style-customization Disallow use of style customization in Elements playground template. HTML off @nvidia-elements/lint/no-unknown-css-variable Disallow use of unknown --nve-* CSS theme variables. CSS error @nvidia-elements/lint/no-unknown-tags Disallow use of unknown nve-* tags. HTML error @nvidia-elements/lint/no-unstyled-typography Require typography elements to have nve-text styling applied. HTML error @nvidia-elements/lint/prefer-aria-label-in-compact-containers Prefer aria-label on form controls inside toolbars and page headers. HTML error