# @greenpoint/eslint-plugin

Best practices for ecocoding

## Installation

First run :

```sh
npm install @greenpoint/eslint-plugin --save-dev
```

Add the plugin to your `.eslintrc.js`:

```json

    "extends": [
        "plugin:@greenpoint/front-recommended",
        "plugin:@greenpoint/back-recommended",


    ],
    "plugins": [
        "@greenpoint",

    ]

```

If you have tailwindcss in your code as well add the following plugin:

```json

    "plugins": [
        "plugin:@greenpoint/tailwindcss"

    ],

```

If you use @emotion in your code as well add the following plugin:

```json

    "plugins": [
        "plugin:@greenpoint/emotion"

    ],

```

## Usage

Run the eslint-linter on your .js/.tsx files

```sh
eslint .

```

## Rules

<!-- begin auto-generated rules list -->

⚠️ Configurations set to warn in.\
🎨 Set in the `front-recommended` configuration.
🛠️ Set in the `back-recommended` configuration.
🙂 Set in the `emotion` configuration.
🚀 Set in the `tailwindcss` configuration.
| Name                                | Description | ⚠️ |
| :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-- |
| [image-extension](docs/rules/image-extension.md) | Avoid the usage of png/jpg/jpeg images | 🎨 |
| [image-src-attribute-not-empty](docs/rules/image-src-attribute-not-empty.md) | Disallow usage of image with empty source attribute | 🎨 |
| [limit-db-query-results](docs/rules/limit-db-query-results.md) | Warn about not limiting the number of returns for a query | 🛠️ |
| [limit-repaint-and-reflow](docs/rules/limit-repaint-and-reflow.md) | Avoid re-rendering your components as much as possible when a props and state element changes and this data has no impact on the component's view | 🎨 |
| [avoid-css-animations](docs/rules/avoid-css-animations.md) | Avoid usage of CSS animations | 🎨 🚀 🙂 |
| [no-function-call-in-for-declaration](docs/rules/no-function-call-in-for-declaration.md) | Avoid calling a function in a for loop declaration | 🛠️ |
| [no-missing-print-css](docs/rules/no-missing-print-css.md) | Warn when no print CSS is provided | 🎨 |
| [no-resized-image](docs/rules/no-resized-image.md) | Disallow image size exceeding the maximum allowed dimension | 🎨 🚀 🙂 |
| [no-select-star](docs/rules/no-select-star.md) | Warn about the use of SELECT \* FROM queries | 🛠️ |
| [only-standard-font-use](docs/rules/only-standard-font-use.md) | Disallow the usage of non-standard fonts | 🎨 🚀 🙂 |
| [outsource-css](docs/rules/outsource-css.md) | Ensure that CSS and JavaScript codes are not embedded in the HTML code of the page, with the exception of any configuration variables for JavaScript objects. | 🎨 |
| [group-similar-css-declarations](docs/rules/group-similar-css-declarations.md) | Group similar declarations of properties | 🙂 |
| [prefer-shorthand-css-notations-animation](docs/rules/prefer-shorthand-css-notations-animation.md) | Encourage the use of shorthand CSS notations, especially for the following attributes: animation, transition, offset | 🎨 🚀 🙂 |
| [prefer-shorthand-css-notations-content](docs/rules/prefer-shorthand-css-notations-content.md) |This rule aims to encourage the use of shorthand CSS notations, especially for the following attributes: outline, border, background and listStyle | 🎨 🚀 🙂 |
| [prefer-shorthand-css-notations-layout](docs/rules/prefer-shorthand-css-notations-layout.md) | Encourage the use of shorthand CSS notations, especially for the following attributes: column, flex, grid, columnRule, placeContent, placeItems, placeSelf | 🎨 🚀 🙂 |
| [prefer-shorthand-css-notations-margin-padding](docs/rules/prefer-shorthand-css-notations-margin-padding.md) | Encourage the use of shorthand CSS notations, especially for the following attributes: margin, padding | 🎨 🚀 🙂 |
| [prefer-shorthand-css-notations-text](docs/rules/prefer-shorthand-css-notations-text.md) | Encourage the use of shorthand CSS notations, especially for the following attributes: font, textDecoration | 🎨 🚀 🙂 |

## Further reading
We developed a stylelint plugin for best practices in CSS as well:

https://gitlab.groupeonepoint.com/techstud.io/num-responsable/greenpoint-stylelint.git