# @teamgoodup/eslint-plugin-chakra-ui

> ESLint Plugin for Chakra UI

Latest version **0.7.8** (published 2023-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @teamgoodup/eslint-plugin-chakra-ui
pnpm add @teamgoodup/eslint-plugin-chakra-ui
yarn add @teamgoodup/eslint-plugin-chakra-ui
bun add @teamgoodup/eslint-plugin-chakra-ui
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.7.8 |
| Published | 2023-03-29 |
| First published | 2023-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 12.x \|\| 14.x \|\| >= 16 |
| Dependencies | 1 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 104 |
| Author | Yuku Kotani |
| Maintainers | teamgoodup |
| Keywords | eslint, eslintplugin, eslint-plugin, Chakra UI, chakra-ui |

## Links

- npm: https://www.npmjs.com/package/@teamgoodup/eslint-plugin-chakra-ui
- Repository: https://github.com/yukukotani/eslint-plugin-chakra-ui
- Homepage: https://github.com/yukukotani/eslint-plugin-chakra-ui#readme
- Issues: https://github.com/yukukotani/eslint-plugin-chakra-ui/issues
- npm.io page: https://npm.io/package/@teamgoodup/eslint-plugin-chakra-ui

## Dependencies (1)

- [@typescript-eslint/utils](https://npm.io/package/@typescript-eslint/utils.md) ^5.44.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
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 0.7.8 (latest) — 2023-03-29

## README

# teamgoodup-eslint-plugin-chakra-ui

[![npm](https://img.shields.io/npm/v/eslint-plugin-chakra-ui)](https://www.npmjs.com/package/teamgoodup-eslint-plugin-chakra-ui)
[![license](https://img.shields.io/npm/l/eslint-plugin-chakra-ui)](https://github.com/yukukotani/teamgoodup-eslint-plugin-chakra-ui/blob/main/LICENSE)

ESLint rules for [Chakra UI](https://chakra-ui.com/).

## **Requirement**

This plugin depends on TypeScript to check whether the component is a Chakra component or not. You need to install `@typescript-eslint/parser` but you can still write vanilla JavaScript.

TypeScript 4.4 or higher is supported. We don't test 4.3 or below but it probably works.

## Installation

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

```sh
npm i eslint --save-dev
```

Next, install `teamgoodup-eslint-plugin-chakra-ui`, `@typescript-eslint/parser`:

```sh
npm install teamgoodup-eslint-plugin-chakra-ui @typescript-eslint/parser --save-dev
```

Then set the `parser` property and add `chakra-ui` to the `plugins` property of your `.eslintrc` configuration file:

```json
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["chakra-ui"]
}
```

Now you can add chakra-ui rules:

```json
{
  "rules": {
    "chakra-ui/props-shorthand": "error"
  }
}
```

## Supported Rules

Every rule is fixable with `eslint --fix`.

- [`props-order`](https://github.com/yukukotani/eslint-plugin-chakra-ui/blob/main/docs/rules/props-order.md): Enforces order of properties to be semantical
- [`props-shorthand`](https://github.com/yukukotani/eslint-plugin-chakra-ui/blob/main/docs/rules/props-shorthand.md): Enforces the usage of shorthand property or vice-versa
- [`require-specific-component`](https://github.com/yukukotani/eslint-plugin-chakra-ui/blob/main/docs/rules/require-specific-component.md): Enforces the usage of specific Chakra components instead of Box components with an attribute.

## Contributing

See [contributing guide](CONTRIBUTING.md).

## Prior Art

This plugin is inspired by [eslint-plugin-tailwind-css](https://github.com/francoismassart/eslint-plugin-tailwindcss).

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