---
title: Developer tools
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:45.839Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Developer tools

For AI assistance, see [AI skills](/web/ai-tools-and-resources/ai/ai-skills) and [MCP Universe](/web/ai-tools-and-resources/ai/mcp-universe).

## Code Editor Extensions

### The Visual Studio Code Extension

It supports:

- plain `px` to `rem` conversion.
- annotation for `px` and `rem` equivalent values.
- auto completion for the [spacing system](/web/layout-and-typography/spacing/).
- auto completion for [`font-size`](/web/layout-and-typography/typography/font-size/) and [`line-height`](/web/layout-and-typography/typography/css-reference/).

Install the [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=dnbexperience.vscode-eufemia) or view the
[source code](https://github.com/dnbexperience/vscode-eufemia).

#### Screenshots

1. Spacing System example

<InlineImg
  src={VSCodeExtensionSpacing}
  caption="Auto completion for px/rem spacing system"
  width="auto"
  className="blank x-10"
/>

2. Equivalent to `px` or `rem` value example

<InlineImg
  src={VSCodeExtensionHover}
  caption="Tooltip for px/rem equivalent"
  width="auto"
  className="blank x-10"
/>

3. `font-size` example

<InlineImg
  src={VSCodeExtensionFontSize}
  caption="Auto completion for font-size"
  width="auto"
  className="blank x-10"
/>

## Lint Plugins

Eufemia ships lint plugins as part of `@dnb/eufemia`, so you can import them directly from the main package.

Install `eslint` and/or `stylelint` in your application if you do not already use them.

### ESLint

Use the recommended flat config preset:

```js
import eufemiaEslint from '@dnb/eufemia/plugins/eslint.js'

export default [eufemiaEslint.recommended]
```

If you need full control, register the plugin and configure the rules yourself:

```js
import eufemiaEslint from '@dnb/eufemia/plugins/eslint.js'

export default [
  {
    plugins: {
      eufemia: eufemiaEslint,
    },
    rules: {
      // All rules
      ...eufemiaEslint.recommended.rules,

      // Or specific rules
      'eufemia/no-deprecated-color-variables': 'error',
    },
  },
]
```

### Stylelint

Use the recommended preset to enable all rules:

```js
import eufemiaStylelint from '@dnb/eufemia/plugins/stylelint.js'

export default eufemiaStylelint.recommended
```

If you need full control, register individual plugins and configure the rules yourself:

```js
import eufemiaStylelint from '@dnb/eufemia/plugins/stylelint.js'

export default {
  plugins: [eufemiaStylelint],
  rules: {
    'eufemia/no-deprecated-color-variables': [
      true,
      { severity: 'warning' },
    ],
    'eufemia/token-name-policy': [true, { themePrefixes: { ui: 'dnb' } }],
  },
}
```

Available rules:

- **`eufemia/no-deprecated-color-variables`** — Warns when deprecated `--color-*` CSS variables are used. Suggests design tokens instead.
- **`eufemia/token-name-policy`** — Validates `--token-*` naming conventions: prefix, category, color semantics, theme prefixes, cross-brand parity, and more. Accepts a `themePrefixes` option to map brand names to their CSS variable prefixes.

### Review rule metadata

Cross-tool review rules expose machine-readable metadata from the same source
used by the lint plugins:

```js
import reviewRules from '@dnb/eufemia/plugins/review-rules.js'

const deprecatedColors =
  reviewRules['eufemia/no-deprecated-color-variables']
```

Each entry identifies its classification, default severity, documentation,
supported tools, and whether an automatic fix exists. Projects may override
lint severity, but should preserve the rule's documented meaning. A
recommendation or context-dependent migration should not be presented as an
unsupported API or an automatic fix.

MCP clients can call `review_rules` to retrieve the same catalog with the
stable rule IDs included in the response. The catalog currently covers the
cross-tool rules that have published metadata; tool-specific rules can still be
configured as documented above.

For SCSS files, configure Stylelint with [postcss-scss](https://www.npmjs.com/package/postcss-scss) as the custom syntax.

### PostCSS (Style Isolation)

If you use the [style isolation](/web/styling-and-themes/css/style-isolation/) PostCSS plugin, deprecation warnings for `--color-*` variables are enabled by default at build time:

```js
import styleScopePlugin from '@dnb/eufemia/plugins/postcss-isolated-style-scope.js'

export default {
  plugins: [styleScopePlugin()],
}
```

To disable the warnings, set `warnOnDeprecatedColorVariables: false`:

```js
export default {
  plugins: [styleScopePlugin({ warnOnDeprecatedColorVariables: false })],
}
```

Both plugins ship with one rule: `no-deprecated-color-variables`. It reports deprecated `--color-*` CSS variables and guides towards design tokens instead.