JavaScript
Linters - Assurer la qualité du code

Remarques

JSHint

JSHint est un outil open source qui détecte les erreurs et les problèmes potentiels dans le code JavaScript.

Pour charpurer votre JavaScript, vous avez deux options.

1. Allez sur JSHint.com et collez-y votre code dans l'éditeur de texte en ligne.
2. Installez JSHint dans votre IDE .
   • Atom: linter-jshint (doit avoir le plugin Linter installé)
   • Sublime Text: JSHint Gutter et / ou Sublime Linter
   • Vim: jshint.vim ou jshint2.vim
   • Visual Studio: VSCode JSHint

L'avantage de l'ajouter à votre IDE est que vous pouvez créer un fichier de configuration JSON nommé .jshintrc qui sera utilisé lors du linting de votre programme. Ceci est conventionnel si vous voulez partager des configurations entre des projets.

Exemple de fichier .jshintrc

{
    "-W097": false, // Allow "use strict" at document level
    "browser": true, // defines globals exposed by modern browsers http://jshint.com/docs/options/#browser
    "curly": true, // requires you to always put curly braces around blocks in loops and conditionals http://jshint.com/docs/options/#curly
    "devel": true, // defines globals that are usually used for logging poor-man's debugging: console, alert, etc. http://jshint.com/docs/options/#devel
    // List global variables (false means read only)
    "globals": {
        "globalVar": true
    },
    "jquery": true, // This option defines globals exposed by the jQuery JavaScript library.
    "newcap": false,
    // List any global functions or const vars
    "predef": [
        "GlobalFunction",
        "GlobalFunction2"
    ],
    "undef": true, // warn about undefined vars
    "unused": true // warn about unused vars
}

JSHint permet également des configurations pour des lignes / blocs de code spécifiques

switch(operation)
{
   case '+'
   {
      result = a + b;
      break;
   }

   // JSHint W086 Expected a 'break' statement
   // JSHint flag to allow cases to not need a break
   /* falls through */
   case '*':
   case 'x':
   {
      result = a * b;
      break;
   }
}

// JSHint disable error for variable not defined, because it is defined in another file
/* jshint -W117 */
globalVariable = 'in-another-file.js';
/* jshint +W117 */

Plus d'options de configuration sont documentées sur http://jshint.com/docs/options/

ESLint / JSCS

ESLint est un linter et un formateur de style de code pour votre guide de style, tout comme JSHint . ESLint a fusionné avec JSCS en avril 2016. ESLint met plus d'efforts à configurer que JSHint, mais il existe des instructions claires sur son site Web pour commencer.

Un exemple de configuration pour ESLint est le suivant:

{
    "rules": {
        "semi": ["error", "always"], // throw an error when semicolons are detected 
        "quotes": ["error", "double"] // throw an error when double quotes are detected
    }
}

Vous trouverez ici un exemple de fichier de configuration dans lequel TOUTES les règles sont désactivées, avec des descriptions de leurs actions .

JSLint

JSLint est le tronc à partir duquel JSHint a été ramifié. JSLint prend une position beaucoup plus critique sur la façon d’écrire du code JavaScript, vous poussant à utiliser uniquement les parties que Douglas Crockford considère comme ses «bonnes parties», et loin de tout code que Crockford pense avoir une meilleure solution. Le thread StackOverflow suivant peut vous aider à décider quel linter vous convient . Bien qu'il existe des différences (voici quelques brèves comparaisons avec JSHint / ESLint ), chaque option est extrêmement personnalisable.

Pour plus d'informations sur la configuration de JSLint, extrayez NPM ou github .