Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-13T16:21:49.000Z (3 months ago)
- Last Synced: 2024-04-14T06:52:27.883Z (3 months ago)
- Topics: chakra-ui, eslint, eslint-plugin
- Language: TypeScript
- Homepage:
- Size: 523 KB
- Stars: 96
- Watchers: 2
- Forks: 13
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-chakra-ui - eslint-plugin-chakra-ui
README
# eslint-plugin-chakra-ui
[](https://www.npmjs.com/package/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).