Linters: Automatische Code-Style-Prüfung — Der komplette Leitfaden für Entwickler

Stellen Sie sich vor, Sie arbeiten in einem Team von fünf Entwicklern. Der eine bevorzugt einfache Anführungszeichen, der andere doppelte. Der dritte setzt überall Semikolons, der vierte vermeidet sie. Der fünfte verwendet vier Leerzeichen für Einrückungen, und du verwendest zwei. Der Code sieht aus wie ein Flickenteppich, und jedes Code-Review wird zu einem Formatierungsstreit, anstatt die Architektur zu diskutieren. Kommt Ihnen das bekannt vor?

Um solche Probleme zu lösen, wurden Linters erfunden – Tools, die automatisch prüfen, ob der Code bestimmten Stilregeln entspricht. Sie sparen nicht nur Zeit bei der Codeüberprüfung, sondern helfen auch, potenzielle Fehler zu finden, bevor das Programm überhaupt gestartet wird.

Was ist ein Linter und warum braucht man ihn?

Linter (engl. lint - "von Flusen reinigen") ist ein statisches Codeanalyseprogramm, das den Quellcode auf Übereinstimmung mit festgelegten Regeln überprüft, ohne ihn auszuführen. Der Begriff tauchte bereits 1978 auf, als Stephen Johnson das Dienstprogramm lint für die Sprache C entwickelte.

Moderne Linter lösen mehrere wichtige Aufgaben. Sie sorgen für Einheitlichkeit im Code des Projekts, sodass jeder Entwickler den Code seiner Kollegen leicht lesen und verstehen kann. Linter finden potenzielle Fehler wie nicht verwendete Variablen, Tippfehler in Funktionsnamen oder Probleme mit dem Sichtbereich. Sie automatisieren die Überprüfung des Codestils und sparen Zeit, um während der Code-Überprüfung wichtigere Dinge zu besprechen. Darüber hinaus helfen Linters Anfängern, sich schneller an die Standards des Teams anzupassen und Best Practices zu erlernen.

Beliebte Linter für verschiedene Sprachen

Für JavaScript und TypeScript ist ESLint die beliebteste Lösung. Es ist ein flexibles und erweiterbares Tool mit einer Vielzahl von Regeln und Plugins. Mit ESLint können Sie Regeln an die Anforderungen des Projekts anpassen, vorgefertigte Community-Konfigurationen verwenden, viele Probleme automatisch beheben und in alle gängigen Code-Editoren integrieren.

Im Python-Ökosystem werden mehrere Tools gleichzeitig verwendet. Pylint bietet eine umfassende Überprüfung mit einem großen Satz von Regeln, Flake8 kombiniert die Funktionen mehrerer Tools in einem und Black arbeitet als „kompromissloser Code-Formatierer“ mit minimaler Konfiguration.

Für PHP ist PHP_CodeSniffer zum De-facto-Standard geworden, der den Code auf Übereinstimmung mit PSR-Standards überprüft und es ermöglicht, eigene Validierungsregeln zu erstellen. In der Welt von CSS und SCSS ist Stylelint mit Unterstützung für modernes CSS und Präprozessoren beliebt.

Wie funktioniert der Linter von innen

Der Prozess der Arbeit des Linters kann in mehrere Phasen unterteilt werden. Zuerst wird der Quellcode in einen abstrakten Syntaxbaum (AST) geparst. Der Linter durchläuft dann diesen Baum und wendet die Regeln auf jeden Knoten an, wobei er die Codestruktur, Variablennamen, Formatierung und andere Aspekte überprüft. Danach sammelt der Linter alle gefundenen Probleme und erstellt einen Bericht, der die Datei, die Zeile und die Beschreibung des Problems enthält. Schließlich kann der Linter für einige Probleme automatisch Korrekturen anwenden.

Betrachten wir ein einfaches Beispiel für die Arbeit mit ESLint. Nehmen wir an, wir haben folgenden Code:

function calculateSum(a,b) {
    var result = a + b
    console.log(unused)
    return result
}

ESLint findet mehrere Probleme darin: Es gibt keine Leerzeichen nach einem Komma in den Funktionsparametern, es wird ein veraltetes Schlüsselwort verwendet var anstelle von const, es gibt kein Semikolon am Ende der Zeile, und es gibt auch einen Aufruf an eine unbestimmte Variable unused.

Einrichten von ESLint für ein Vue.js-Projekt

Lassen Sie uns die Einrichtung des Linters für ein echtes Projekt auf Vue.js im Detail betrachten. Installieren Sie zunächst die erforderlichen Pakete:

npm install --save-dev eslint eslint-plugin-vue @vue/eslint-config-prettier

Dann erstellen wir die Konfigurationsdatei .eslintrc.js im Projektstamm:

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/multi-word-component-names': 'off',
    'vue/require-default-prop': 'error',
    'vue/no-unused-vars': 'warn'
  }
}

Fügen Sie der Datei package.json Skripte hinzu, um die Überprüfung zu starten:

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint:fix": "eslint --ext .js,.vue src --fix"
  }
}

Jetzt können Sie die Überprüfung mit dem Befehl npm run lint starten oder die Probleme automatisch mit dem Befehl npm run lint:fix beheben.

Integration mit dem Code-Editor

Um Linter-Fehler direkt beim Schreiben von Code zu sehen, müssen Sie die Integration mit dem Editor konfigurieren. Für VS Code installieren wir die Erweiterung ESLint aus dem Marktplatz und fügen .vscode/settings.json zu den Einstellungen hinzu:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

Beim Speichern der Datei werden nun alle behebbaren Probleme automatisch behoben.

Regeln setzen: Balance zwischen Strenge und Komfort

Eine der häufigsten Fragen ist: Wie streng sollten die Linter-Regeln sein? Zu weiche Regeln werden nicht die gewünschte Wirkung haben, und zu strenge Regeln werden die Entwickler verärgern und die Arbeit verlangsamen.

Eine gute Strategie ist, mit einem Basissatz empfohlener Regeln zu beginnen und diese schrittweise an das Team anzupassen. Aktivieren Sie nicht alle möglichen Regeln auf einmal, sondern wählen Sie diejenigen aus, die wirklich dazu beitragen, Fehler zu vermeiden. Verwenden Sie Schweregrade: error stoppt den Build und erfordert eine obligatorische Korrektur, warn zeigt eine Warnung an, blockiert aber nicht die Arbeit und off deaktiviert die Regel vollständig.

Einigen Sie sich mit dem Team auf umstrittene Regeln. Zum Beispiel sind einfache oder doppelte Anführungszeichen keine Frage der Richtigkeit, sondern der Vereinbarung. Dokumentieren Sie die Gründe für die Auswahl bestimmter Regeln, damit neue Teammitglieder die Logik der Entscheidungen verstehen.

Linter in der CI/CD-Pipeline

Ein Linter ist dann wirklich nützlich, wenn er in den kontinuierlichen Integrationsprozess integriert ist. Dadurch wird sichergestellt, dass der gesamte Code, der in den Hauptzweig gelangt, den Standards entspricht.

Konfigurationsbeispiel für GitHub-Aktionen in der Datei .github/workflows/lint.yml:

name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run lint

Jetzt wird bei jedem Push oder Pull Request automatisch eine Codeprüfung gestartet. Wenn der Linter Fehler findet, markiert GitHub den Check als fehlgeschlagen und Sie sehen sofort, was behoben werden muss.

Automatische Korrektur und Formatierung

Viele Linter können nicht nur Probleme finden, sondern sie auch automatisch beheben. ESLint mit dem Flag --fix kann Formatierungsprobleme beheben, fehlende Semikolons setzen, Anführungszeichen korrigieren und vieles mehr.

Für die Formatierung von Code ist es jedoch besser, spezielle Tools zu verwenden. Prettier ist ein opinionated code formatter, der Code nach strengen Regeln mit minimaler Konfiguration formatiert. Die Kombination von ESLint für die Codequalitätsprüfung und Prettier für die Formatierung ist zum Standard in der JavaScript-Community geworden.

Um Konflikte zu vermeiden, verwenden Sie eslint-config-prettier, das alle ESLint-Regeln deaktiviert, die sich auf die Formatierung beziehen:

npm install --save-dev prettier eslint-config-prettier

Und fügen Sie .eslintrc.js hinzu:

extends: [
  'plugin:vue/vue3-recommended',
  'eslint:recommended',
  'prettier' // muss das letzte sein
]

Typische Fehler bei der Verwendung von Linters

Der erste häufige Fehler besteht darin, Linter-Warnungen zu ignorieren. Entwickler fügen Kommentare eslint-disable hinzu, um Prüfungen zu deaktivieren, anstatt Probleme zu beheben. Verwenden Sie Deaktivierungskommentare nur in Ausnahmefällen und fügen Sie immer eine Erklärung hinzu, warum die Regel deaktiviert ist.

Der zweite Fehler ist mangelnde Konsistenz im Team. Wenn jeder Entwickler seine eigene lokale Konfiguration verwendet, macht dies den gesamten Nutzen des Linters zunichte. Speichern Sie die Konfiguration im Repository und stellen Sie sicher, dass alle die gleichen Einstellungen verwenden.

Der dritte Fehler ist eine zu späte Implementierung. Das Hinzufügen eines Linters zu einem großen Projekt mit einer vorhandenen Codebasis ist schwierig. Es ist besser, von Anfang an mit dem Projekt zu beginnen oder schrittweise zu implementieren: zuerst für neue Dateien, dann nach und nach den alten Code zu refaktorieren.

Erweiterte Funktionen

Moderne Linters bieten viele erweiterte Funktionen. Sie können eigene Validierungsregeln für die spezifischen Anforderungen Ihres Projekts erstellen. Plugins erweitern die Funktionalität: Zum Beispiel findet eslint-plugin-security potenzielle Sicherheitslücken, eslint-plugin-a11y prüft die Verfügbarkeit und eslint-plugin-import kontrolliert die Richtigkeit der Importe.

Die Integration mit TypeScript über @typescript-eslint ermöglicht es, typisierten Code unter Berücksichtigung des Typsystems zu überprüfen. Und benutzerdefinierte Konfigurationen für verschiedene Teile des Projekts (z. B. unterschiedliche Regeln für Frontend und Backend) helfen dabei, die Überprüfung flexibel anzupassen.

Befund

Linters sind nicht nur ein Werkzeug für pingelige Perfektionisten. Es ist eine bewährte Methode, um die Qualität des Codes zu verbessern, die Code-Überprüfung zu beschleunigen, Fehler zu vermeiden und einen einheitlichen Stil im Team zu schaffen. Es ist ganz einfach, einen Linter zu verwenden: Wählen Sie das richtige Tool für Ihre Programmiersprache aus, installieren Sie die Grundkonfiguration, konfigurieren Sie die Integration mit dem Editor und CI/CD, passen Sie die Regeln an die Bedürfnisse des Teams an. Zunächst mag es den Anschein haben, dass der Linter die Arbeit nur verlangsamt und mit ständigen Bemerkungen nervt. Aber schon nach einer Woche werden Sie feststellen, dass der Code sauberer und die Code-Review schneller und konstruktiver geworden ist. Der Linter wird zu Ihrem stillen Assistenten, der rund um die Uhr die Qualität des Codes überwacht und Sie unermüdlich an die Best Practices erinnert.

Anlage Kodik bietet interaktive Kurse in Python, JavaScript und anderen Technologien für Entwickler aller Niveaus.

Schließen Sie sich unserem Telegram-Kanal, wo wir regelmäßig nützliche Artikel teilen, komplexe Konzepte in einfacher Sprache analysieren und helfen, auftretende Probleme zu lösen.

Lernen Sie mit einem aktiven Entwickler-Community!