---

⚠️ WARNING: This repository is no longer maintained ⚠️
Please use the latest ecoCode version here :

Visit the new ecoCode repository

Continue to follow the project on :

• Our website
• Linkedin

And join us on our public Slack :

• Slack

© The ecoCode team that continues to love cnumr ♥

---

eslint-plugin-ecolinter

GreenIT rules for JavaScript and CSS

Javascript

Installation

You'll first need to install ESLint and eslint-plugin-ecolinter:

$ npm i eslint --save-dev
$ npm i eslint-plugin-ecolinter

Usage (ESLint Rules)

Add ecolinter to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "ecolinter"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "ecolinter/rule-name": "warn"
    }
}

It is always recommended to create npm scripts so that you can use them in CI systems as well.

package.json file:

For JavaScript projects, use the following npm scripts.

{
    "scripts": {
        "lint:js": "eslint -c .eslintrc.js --ext .js,.jsx ."
    }
}

For TypeScript projects, use the following npm scripts.

{
    "scripts": {
        "lint:js": "eslint -c .eslintrc.js --ext .js,.jsx,.ts,.tsx ."
    }
}

Supported ESLint Rules

Name	Description
externalize-js-css	Externalize the import of .js and .css files
no-full-sql-request	SQL request should not select all fields in a table
no-function-call-in-loop	Functions should not be called inside the declaration of a loop
no-post-increment-var	Replace $i++ by ++$i
no-try-catch-finally	Avoid using try-catch-finally
multiple-css-changes	Batch multiple CSS properties changes at once
no-call-dom-object-multiple-times	Reduce DOM access assigning
no-direct-DOM-access	No DOM access without assignation to avoid requesting the same element multiple times
no-override-get-set	Avoid to override getter or setter
no-string-argument-settimeout-setinterval	Use a function for the first argument of setTimeout() and setInterval()
no-resize-image	The file width and height should be adapted to the target size in the browser

Usage (Stylelint Rules)

Add the file of the rule to the plugins section of your .stylelintrc configuration file:

{
    "plugins": [
        "./node_modules/eslint-plugin-ecolinter/lib/rules/css/rule-name.js"
    ]
}

Then activate the rules you want to use under the rules section.

{
    "rules": {
        "greenit/rule-name": true
    }
}

It is always recommended to create npm scripts so that you can use them in CI systems as well.

package.json file:

{
    "scripts": {
       "lint:css": "stylelint src"
    }
}

Supported Stylelint Rules

Name	Description
no-custom-font	Avoid using custom font
avoid-animation	Avoid too many css animations

CSS

Linter CSS du plugin sonar green IT. Linter basé sur stylelint.

Prerequis

• Node >= 10

Liens

• https://stylelint.io/user-guide/get-started

Getting started

Installer les dépendances du project :

npm i

Ajouter de nouvelles règles

Créer un fichier JS pour votre règle dans le répertoire rules basé vous sur une des règles déja créé.

Les points important d'une règle :

• Son nom qu'il faudra réferencer dans le fichier de configuration du plugin .stylelintrc.json. const ruleName = "testim-plugin/standard-policy";

• Le message renvoyé : const messages = ruleMessages(ruleName, { expected: (unfixed, fixed) => `Expcted "${unfixed}" to be one of "${fixed}"`, } );

• La règle en elle même

module.exports = stylelint.createPlugin(.....)

Test

Pour tester votre règle exécuter la commande suivante :

npm test

Ou bien en testant uniquement sur le fichier CSS correspondant à votre règle :

npx stylelint ressources/MonFichierCss.css

Génerer et importer le rapport dans sonarqube

Considérons que vous vous trouvez dans le répertoire du projet. Exécuter la commande :

stylelint $PATH_DU_PROJET_CIBLE -f json > stylelint-report.json

Depuis L'IHM

Administration -> Configuration -> Language -> CSS

https://docs.sonarqube.org/latest/analysis/external-issues/

Configuuration Sonar

Pour configurer les rapports du linter CSS dans sonarqube passez une liste de path délimité par des virgules. La configuration peut se faire dans sonar-project.properties :

sonar.css.stylelint.reportPaths=/opt/project/stylelint-report.json

ou bien en paramètre de lancement du jar :

-Dsonar.css.stylelint.reportPaths=/opt/project/stylelint-report.json

Architecture

Voici un aperçu de l'architecture du projet :

css-linter             # Dossier racine du projet de linter JS
|
+--ressources          # Repertoire des fichiers css utilisé pour tester les règles
|  |
+--rules               # Repertoire contenant toutes les les règles
+--package.json  
\--.stylelintrc.json   # Fichier de configuration du plugin