https://github.com/yukukotani/eslint-plugin-chakra-ui

ESLint plugin for Chakra UI
https://github.com/yukukotani/eslint-plugin-chakra-ui

chakra-ui eslint eslint-plugin

Last synced: 25 days ago
JSON representation

ESLint plugin for Chakra UI

• Host: GitHub
• URL: https://github.com/yukukotani/eslint-plugin-chakra-ui
• Owner: yukukotani
• License: mit
• Created: 2022-01-22T14:17:10.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-08-09T22:49:43.000Z (3 months ago)
• Last Synced: 2024-08-10T07:01:16.439Z (3 months ago)
• Topics: chakra-ui, eslint, eslint-plugin
• Language: TypeScript
• Homepage:
• Size: 544 KB
• Stars: 97
• Watchers: 2
• Forks: 13
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-chakra-ui - eslint-plugin-chakra-ui

README

        
# eslint-plugin-chakra-ui

[![npm](https://img.shields.io/npm/v/eslint-plugin-chakra-ui)](https://www.npmjs.com/package/eslint-plugin-chakra-ui)

[![license](https://img.shields.io/npm/l/eslint-plugin-chakra-ui)](https://github.com/yukukotani/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.

typescript-eslint v6 or higher is supported. **v5 or below is NOT supported**.

## Installation

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

```sh

npm i eslint --save-dev

```

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

```sh

npm install 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.js` configuration file. You also need to set `project` and `tsconfigRootDir` in `parserOptions` to [enable TypeScript information](https://typescript-eslint.io/linting/typed-linting).

```js

module.exports = {

  parser: "@typescript-eslint/parser",

  plugins: ["chakra-ui"],

  parserOptions: {

    project: true,

    tsconfigRootDir: __dirname,

  },

};

```

Now you can add chakra-ui rules:

```js

module.exports = {

  // ...

  rules: {

    "chakra-ui/props-order": "error",

    "chakra-ui/props-shorthand": "error",

    "chakra-ui/require-specific-component": "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).