Eigene eslint Regeln erstellen

Eslint ist der aktuelle Standard zum linten von Type/Javascript Code. Es gibt viele eingebaute nützliche Regeln und auch viele externe Regeln, die über npm hinzugefügt werden können. Aber wie sieht so eine Regel überhaupt aus und wie erstellt man sich eigene Regeln für sein Projekt?

Eslint Regeln sind nichts weiter als Javascript Packages, die man installieren kann und dann per config Eintrag nutzen kann. Um die Einfachheit zu demonstrieren, dient im Folgenden eine Regel um sicherzustellen, dass single-quotes ' anstatt double-quotes " für strings benutzt werden.

index.js:

const preferSingleQuotes = require('./rules/prefer-single-quotes');

module.exports.rules = {
  'prefer-single-quotes': preferSingleQuotes
};

Die index.js Datei exportiert die einzelnen Regeln in einem rules Objekt.

./rules/prefer-single-quotes.js

'use strict';

module.exports = {
  meta: {
    type: 'problem',
    docs: {
      description: 'Detects double quotes for strings.',
    },
    fixable: true,
  },
  create: (context) => {
    return {
      VariableDeclarator: (node) => {
        if (typeof node.init.value === 'string'
          && node.init.raw.startsWith('"')
          && node.init.raw.endsWith('"')) {
          context.report({
            node,
            message: 'Prefer single quotes over double quotes',
            fix: (fixer) => {
              const valLength = node.init.value.length;
              return [
                fixer.replaceTextRange([0, 1], `'`),
                fixer.replaceTextRange([valLength - 1, valLength], `'`),
              ];
            }
          });
        }
      },
    };
  },
};

Eine eslint Regel selbst ist ein Objekt mit einer meta Eigenschaft, die Metadaten über die Regel angibt. Außerdem benötigt eine Regel eine create Funktion, die den aktuellen Kontext übergeben bekommt und selbst wieder ein Objekt zurück gibt. In dem zurückgegebenen Objekt werden relevanten Selektoren wiederum Funktionen zugeordnet, die mit dem aktuellen node des AST aufgerufen werden. Wenn eslint eine Datei auswertet, baut es sich einen AST auf und geht die einzelnen nodes durch, sobald eine Regel einen Selektor für den aktuellen node definiert, wird die dahinter liegende Funktion aufgerufen. In der Funktion kann man nun den node überprüfen. In obigem Beispiel wird bei der Deklaration von Variablen überprüft, ob der Typ ein string ist und ob der raw value mit doppelten Anführungszeichen beginnt und endet. Wenn das der Fall ist, können einen Regelverstoß mit context.report() melden. Dabei wird mindestens der node (für eine Markierung in der Datei) und eine Nachricht für den Entwickler übergeben. Für einfach Verstöße kann es sinnvoll sein, eine automatische Lösung bereitzustellen. In diesem Fall können wir eine fix Funktion mit übergeben, die die doppelten Anführungszeichen durch einfache ersetzt. Zusätzlich muss man im meta Bereich die Regel als fixable markieren. Führt man nun eslint mit dem --fix Parameter aus, werden die Anführungszeichen automatisch korrigiert.

Eslint Regeln können beliebig komplex werden. Was noch alles möglich ist zeigt die Eslint Dokumentation.

Um sich einiges an Arbeit zu ersparen, gibt es außerdem den Eslint Generator für Yeoman.