@greenpoint/eslint-plugin

@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