@greenpoint/eslint-plugin v0.3.5
@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