@greenpoint/eslint-plugin

Best practices for ecocoding

Installation

First run :

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

Add the plugin to your .eslintrc.js:

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


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

    ]

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

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

    ],

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

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

    ],

Usage

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

eslint .

Rules

⚠️ 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 | Avoid the usage of png/jpg/jpeg images | 🎨 | | image-src-attribute-not-empty | Disallow usage of image with empty source attribute | 🎨 | | limit-db-query-results | Warn about not limiting the number of returns for a query | 🛠️ | | limit-repaint-and-reflow | 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 | Avoid usage of CSS animations | 🎨 🚀 🙂 | | no-function-call-in-for-declaration | Avoid calling a function in a for loop declaration | 🛠️ | | no-missing-print-css | Warn when no print CSS is provided | 🎨 | | no-resized-image | Disallow image size exceeding the maximum allowed dimension | 🎨 🚀 🙂 | | no-select-star | Warn about the use of SELECT * FROM queries | 🛠️ | | only-standard-font-use | Disallow the usage of non-standard fonts | 🎨 🚀 🙂 | | outsource-css | 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 | Group similar declarations of properties | 🙂 | | prefer-shorthand-css-notations-animation | Encourage the use of shorthand CSS notations, especially for the following attributes: animation, transition, offset | 🎨 🚀 🙂 | | prefer-shorthand-css-notations-content |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 | 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 | Encourage the use of shorthand CSS notations, especially for the following attributes: margin, padding | 🎨 🚀 🙂 | | prefer-shorthand-css-notations-text | 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