JavaScript
Linters - Sicherstellung der Codequalität

Bemerkungen

JSHint

JSHint ist ein Open Source-Tool, das Fehler und mögliche Probleme im JavaScript-Code erkennt.

Um Ihr JavaScript zu fusseln, haben Sie zwei Möglichkeiten.

1. Gehen Sie zu JSHint.com und fügen Sie Ihren Code dort in den Texteditor ein.
2. Installieren Sie JSHint in Ihrer IDE .
   • Atom: linter-jshint (muss das Linter- Plugin installiert haben)
   • Sublime Text: JSHint Rinne und / oder Sublime Linter
   • Vim: jshint.vim oder jshint2.vim
   • Visual Studio: VSCode JSHint

Das Hinzufügen zu Ihrer IDE hat den Vorteil, dass Sie eine JSON-Konfigurationsdatei mit dem Namen .jshintrc erstellen können, die beim Linting Ihres Programms verwendet wird. Dies ist ein Konvent, wenn Sie Konfigurationen für Projekte freigeben möchten.

Beispiel einer .jshintrc Datei

{
    "-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 erlaubt auch Konfigurationen für bestimmte Codezeilen / -blöcke

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 */

Weitere Konfigurationsoptionen sind unter http://jshint.com/docs/options/ dokumentiert.

ESLint / JSCS

ESLint ist ein Code-Style-Interpreter und Formatierer für Ihren Style Guide, ähnlich wie bei JSHint . ESLint wurde im April 2016 mit JSCS zusammengeführt. Die Einrichtung von ESLint ist mit mehr Aufwand verbunden als mit JSHint. Es gibt jedoch klare Anweisungen für den Start auf der Website .

Eine Beispielkonfiguration für ESLint lautet wie folgt:

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

Eine Beispielkonfigurationsdatei, in der ALLE Regeln deaktiviert sind, und eine Beschreibung der Funktionen finden Sie hier .

JSLint

JSLint ist der Stamm, von dem aus JSHint abgezweigt wurde. JSLint vertritt eine viel entschiedenere Haltung zum Schreiben von JavaScript-Code und drängt Sie dazu, nur die Teile zu verwenden, die Douglas Crockford als "gute Teile" betrachtet, und von keinem Code, von dem Crockford glaubt, dass es eine bessere Lösung gibt. Der folgende StackOverflow-Thread kann bei der Entscheidung helfen, welcher Linter für Sie der richtige ist . Es gibt zwar Unterschiede (hier gibt es einige kurze Vergleiche mit JSHint / ESLint ), aber jede Option ist extrem anpassbar.

Weitere Informationen zum Konfigurieren von JSLint finden Sie unter NPM oder github .