JavaScript Code Quality in 10 einfachen Schritten steigern.

Code Linting ist eine Möglichkeit zur Verbesserung der Codequalität. Der Begriff “Linter” stammt vom Tool “Lint”, welches ursprünglich C-Quellcode analysierte. Bereits damals war das Ziel den Quellcode möglichst automatisch zu analysieren und Optimierungen zu finden. Im Laufe der Zeit wurden dann zusätzliche Features hinzugefügt.

Heutzutage gibt es Linter für fast alle Programmiersprachen. JavaScript Linter wie JSHint oder ESLint spüren potentielle Fehler sowie schwer wartbaren Code auf. Sie erkennen häufige Fehler im Quellcode und stellen sicher, dass Best Practices eingehalten werden. Die automatische Erkennung von Fehlern bereits vor der manuellen Codeüberprüfung durch den Reviewer spart dadurch Zeit und Geld.

Außerhalb von JavaScript werden in der Webentwicklung zudem Linter für CSS oder HTML entwickelt und eingesetzt. 

ESLint zeichnet sich vorallem durch seine Konfigurierbarkeit aus. Presets helfen ESLint schnell mit einer Basiskonfiguration zu versehen. Trotz Preset können die Regeln mithilfe der .ESLintrc Konfigurationsdatei weiter auf Ihre Team Bedürfnisse angepasst werden. 

4. NPM Setup:

Im Projektordner NPM installieren:

$ npm init

Die Package.json Datei sollte nun in etwa so aussehen

{
 "name": "my-eslint-project",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}

5. ESLint als Develop Dependency istallieren:

$ npm i eslint -D

6. ESLint Konfigurationsdatei erstellen:

$ touch .eslintrc

7. ESLint Basiskonfiguration:

In der .eslintrc kannst du nun ESLint konfigurieren.

Standardmäßig wird das Default Preset eslint:recommended genutzt.

Über die ignorePatterns ist es zudem möglich, einzelne Ordner zu ignorieren

Die Config sollte in etwa so aussehen:

{
 "env": {
   "browser": true,
   "es6": true
 },
 "extends": ["eslint:recommended"],
 "ignorePatterns": [
   “build/assets/javascripts/legacy/**/*.js”,
 ]
}

8. NPM Task hinzufügen:

Über “Scripts” kann nun das Test Script gegen “lint” getauscht werden. Hierfür wird am Anfang der Name des Tasks definiert und dann der Befehl. 

Über npm run lint kann nun ESLint automatisch über die Konsole ausgeführt werden.

{
 "name": "eslint-test",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "lint": "eslint 'path/to/javascript/file.js'"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "eslint": "^7.32.0"
 }
}

9. Optional: Airbnb Preset installieren:

Es bietet sich optional die Möglichkeit ein zusätzliches ESLint Preset von Airbnb (ja wirklich das Airbnb, das wir alle kennen) zu installieren. Hierfür müssen zusätzliche Dependencies installiert werden. Dies geht ganz einfach über folgenden Befehl:

$ npx install-peerdeps --dev ESLint-config-airbnb-base

Im nächsten Schritt muss das Preset dann noch inkludiert werden. Hierfür wird airbnb-base in das Extends Array der .eslintrc einfügt.

{
  "extends": [
    "eslint:recommended",
    "airbnb-base"
  ],
  "rules": [
    "no-alert": "off"
  ],
}

10. Optional: Überschreiben von Regeln

ESLint Regeln können über zwei verschiedene Wege überschrieben / deaktiviert werden.

Deaktivieren über Inline Kommentar:

Komplette Zeile deaktivieren:

var myTest = “hello world” // eslint-disable-line

Einzelne Regeln deaktivieren

alert(“hello world); // eslint-disable-line no-alert

Deaktivieren über Konfiguration

{
 ...
 "extends": [
   "eslint:recommended",
   "airbnb-base"
 ],
 "rules": {
   "no-alert": "off"
 }
}

Nicht jeder Linter und Preset ist für jeden Einsatzzweck geeignet. Deshalb ist es wichtig, verschiedene Varianten zu testen. Wir nutzen bei in2code eine Vielzahl an Lintern für verschiedene Einsatzzwecke. Von ESLint bis hin zu PHP Fixern helfen und diese Tools unsere Codequalität hochzuhalten.