1. Was sind Linter?
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.
2. Warum du Linter nutzen solltest
- Einheitlicher Coding Style bei der Arbeit im Team
- Grobe Bugs frühzeitig erkennen und vorbeugen
- Best Practices im Team durchsetzen
3. Warum wir ESLint nutzen:
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.
ESLint zum Projekt hinzufügen
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"
}
}
Schlusswort
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.