# eslint-plugin-backpack

> ESlint configuration for awesome Backpack development.

Latest version **7.4.1** (published 2026-07-22) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install eslint-plugin-backpack
pnpm add eslint-plugin-backpack
yarn add eslint-plugin-backpack
bun add eslint-plugin-backpack
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 7.4.1 |
| Published | 2026-07-22 |
| First published | 2018-06-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=16.13.0 |
| Dependencies | 3 |
| Unpacked size | 55.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Backpack Design System |
| Maintainers | ojcurt, gert-jan.vercauteren, skyscanner-koalasquad, mhdev |
| Keywords | eslint, eslintplugin, eslint-plugin |

## Links

- npm: https://www.npmjs.com/package/eslint-plugin-backpack
- Repository: https://github.com/Skyscanner/eslint-plugin-backpack
- Homepage: https://github.com/Skyscanner/eslint-plugin-backpack#readme
- Issues: https://github.com/Skyscanner/eslint-plugin-backpack/issues
- npm.io page: https://npm.io/package/eslint-plugin-backpack

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.6.0
- [@skyscanner/bpk-foundations-web](https://npm.io/package/@skyscanner/bpk-foundations-web.md) ^24.0.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@pandacss/eslint-plugin](https://npm.io/package/@pandacss/eslint-plugin.md) — 18.7K weekly downloads

## Recent versions

- 7.4.1 (latest) — 2026-07-22
- 2.0.4-beta.0 (beta) — 2020-10-27
- 2.0.0-alpha.2 (next) — 2020-08-06
- 7.4.0 — 2026-01-27
- 7.2.0 — 2025-12-19
- 7.3.0 — 2025-12-18
- 7.1.0 — 2025-11-21
- 7.0.1 — 2025-10-16
- 6.1.0 — 2025-06-30
- 7.0.0 — 2025-04-09
- 6.0.0 — 2023-10-26
- 5.0.0 — 2023-07-24
- 4.0.1 — 2022-11-09
- 4.0.0 — 2022-03-22
- 3.0.1 — 2020-10-29
- … 18 more at https://npm.io/package/eslint-plugin-backpack/versions

## README

# eslint-plugin-backpack

[![Build Status](https://github.com/Skyscanner/eslint-plugin-backpack/workflows/ESLint%20Plugin%20Backpack%20CI/badge.svg)](https://github.com/Skyscanner/eslint-plugin-backpack/actions)

Eslint plugin to prevent magic arbitrary values and promote the use of Backpack tokens

You'll first need to install [ESLint](http://eslint.org):

```
$ npm i eslint --save-dev
```

Next, install `eslint-plugin-backpack`:

```
$ npm install eslint-plugin-backpack --save-dev
```

**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-backpack` globally.

## Usage

Add `backpack` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:

```json
{
  "plugins": ["backpack"]
}
```

Then configure the rules you want to use under the rules section.

```json
{
  "rules": {
    "backpack/rule-name": 2
  }
}
```

## Supported Rules

### use-tokens

Available for colours and length values. Will prevent the use of a hardcoded colour if a Backpack token is available for the given value.

#### Configuration

| Name          | Type                                   | Required    |
| ------------- | -------------------------------------- | ----------- |
| autoImport    | boolean                                | false       |
| platform      | string                                 | false       |
| tokensPackage | shape({ web: string, native: string }) | false       |
| typeof        | boolean                                | false       |

```json
{
  "rules": {
    "backpack/use-tokens": [2, {
      "autoImport": true,
      "platform": "web",
      "tokensPackage": {
        "web": "@skyscanner/bpk-foundations-web/tokens/base.es6",
      },
    }]
  }
}
```

### use-components

Will prevent the usage of built-in components when a Backpack option is available.

#### Configuration

| Name          | Type                                   | Required    |
| ------------- | -------------------------------------- | ----------- |
| autoImport    | boolean                                | false       |
| platform      | string                                 | false       |

```json
{
  "rules": {
    "backpack/use-components": [2, {
      "autoImport": true,
      "platform": "web"
    }]
  }
}
```

#### Examples

**Invalid:**
```javascript
// Default import
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

// Named import
import { BpkButton } from '@skyscanner/backpack-web/bpk-component-button';
```

**Valid:**
```javascript
// Use BpkButtonV2 instead
import { BpkButtonV2 } from '@skyscanner/backpack-web/bpk-component-button';
```

---
_Source: https://npm.io/package/eslint-plugin-backpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._