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