Skip to content
This repository has been archived by the owner on Jan 13, 2023. It is now read-only.

cnumr/ecoLinter

Repository files navigation

Logo


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


Continue to follow the project on : And join us on our public 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

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

img.png

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published