https://github.com/skyscanner/eslint-plugin-backpack
https://github.com/skyscanner/eslint-plugin-backpack
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/skyscanner/eslint-plugin-backpack
- Owner: Skyscanner
- License: apache-2.0
- Created: 2018-05-16T14:58:57.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-16T10:59:06.000Z (10 months ago)
- Last Synced: 2024-12-17T22:03:44.406Z (10 months ago)
- Language: JavaScript
- Size: 676 KB
- Stars: 1
- Watchers: 30
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# eslint-plugin-backpack
[](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"
}]
}
}
```