@isyfact/eslint-plugin v1.4.1
@isyfact/eslint-plugin
Das Paket @isyfact/eslint-plugin enthält eine Liste von empfohlenen Regeln, die bei der Entwicklung von TypeScript Projekten in der IsyFact zu beachten sind.
Steckbrief
ESLint definiert Regeln zur statischen Codeanalyse für JavaScript, und führt eine Prüfung des Quellcodes gegenüber den Regeln aus. Für TypeScript existiert eine ESLint Erweiterung mit angepassten und zusätzlichen Regeln, die sich auf TypeScript basierten Quellcode beziehen (typescript-eslint).
Die Entwickler der ESLint TypeScript Erweiterung sprechen eine Empfehlung aus, welche Regeln aus allen verfügbaren Regeln den höchsten Nutzen bringen, und verwendet werden sollten (Recommended Config). Das empfohlene Regelset bietet eine gute Zusammenstellung von Regeln und kann uneingeschränkt verwendet werden. Dabei sollte die stärkere Variante mit Typprüfung gewählt werden.
Das vollständige Regelset aus ESLint TypeScript beinhaltet noch weitere Regeln, die verwendet werden können. In isy-eslint-typescript-rules ist eine Auswahl von nützlichen Regeln aus dem vollständigen Regelset zusammengefasst, die über das empfohlene Regelset hinausgehen. Die Regeln werden als Sharable Config bereitgestellt.
isy-eslint-typescript-rules versteht sich als Erweiterung zu den empfohlenen TypeScript Regeln aus ESLint.
Getting Started
Verwendung in TypeScript Projekten ohne Angular
Für die Verwendung des Plugins müssen zunächst folgende Dependencies installiert werden
$ npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin @isyfact/eslint-plugin
Als minimale Konfiguration der .eslintrc.json
kann folgendes Beispiel verwendet werden.
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"env": {
"node": true
},
"extends": [
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:@isyfact/recommended"
]
}
Verwendung in Angular Projekten
Angular hat einen Generator, welcher die Konfiguration von EsLint in Angular Projekten erleichtert. Der Generator wir mit folgendem Befehl ausgeführt:
$ ng add @angular-eslint/schematics
Wenn eine bestimmte Angular-Hauptversion verwendet wird, sollte die schematics passend zur Angular-Version installiert werden.
Anschließend müssen noch folgende Pakete installiert werden.
$ npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin @isyfact/eslint-plugin
Die .eslintrc.json
muss dann noch um das IsyFact Plugin erweitert werden.
Ggf. muss noch @typescript-eslint/parser
als Parser eingestellt werden.
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:@isyfact/recommended"
]
}
Des Weiteren wurde ein zweites Profil mit ESLint Regeln angelegt, das für Unit-Tests genutzt werden kann.
Die Datei test.json
beinhaltet das zweite Profil.
Dieses Regel-Set ist flexibler und nicht so streng wie die Regeln für den Produktivcode.
Für die Anbindung wird folgender Code innerhalb der .eslintrc.json
Datei benötigt:
{
"files": [
"*.spec.ts"
],
"extends": [
"plugin:@isyfact/test"
]
}
Somit wird das ESLint Regel-Set auf .spec
Dateien angewandt.
Weiterführende Anleitungen zur Installation:
Installation von ESLint TypeScript: https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
Getting Started mit ESLint TypeScript: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md
Angular spezifische Regeln für ESLint: https://github.com/angular-eslint/angular-eslint
Konfiguration des @isyfact/eslint-plugin
Die IsyFact verwendet als Basis die Regeln von @typescript-eslint/eslint-plugin und leitet dann unterschiedliche Konfigurationen daraus ab.
recommended
Diese Konfiguration enthält eine Liste von Regeln, die von der Isyfact bei der Entwicklung mit TypeScript empfohlen wird.
:wrench: = fixable, 💬 = benötigt Typinformationen
Name | Beschreibung | :wrench: | 💬 |
---|---|---|---|
@typescript-eslint/brace-style | Erzwingt einen konsistenten Klammerstil für Blöcke | :wrench: | |
@typescript-eslint/comma-dangle | Verbietet ein Komma am Ende einer Liste | :wrench: | |
@typescript-eslint/comma-spacing | Erzwingt konsistente Leerzeichen vor und nach Kommas | :wrench: | |
@typescript-eslint/consistent-type-definitions | Erlaubt Typ-Definitionen nur über Interfaces | :wrench: | |
@typescript-eslint/default-param-last | Default Parameter müssen am Ende deklariert werden | ||
@typescript-eslint/dot-notation | Erzwingt den Zugriff auf Objekte mit der Punkt-Notation (wo Sinnvoll) | :wrench: | 💬 |
@typescript-eslint/explicit-function-return-type | Erzwingt die Angabe eines Typs für alle Methoden | ||
@typescript-eslint/explicit-member-accessibility | Erringt die Angabe der Sichtbarkeiten von Klassenattributen mit Ausnahme von Öffentlichen | :wrench: | |
@typescript-eslint/func-call-spacing | Verbietet Leerzeichen zwischen Methodenname und Ausführungsklammern | :wrench: | |
@typescript-eslint/indent | Erzwingt eine konsistente Einrückung von 2 Leerzeichen | :wrench: | |
@typescript-eslint/keyword-spacing | Erzwingt konsistente Leerzeichen vor und nach einem Keyword | :wrench: | |
@typescript-eslint/no-dupe-class-members | Verbietet Duplikate als Klassenattribute | ||
@typescript-eslint/no-loop-func | Verbietet Schleifen, die unsichere Referenzen auf Variablen enthalten | ||
@typescript-eslint/no-loss-of-precision | Verbreitet Gleitkommazahlen, bei denen die Genauigkeit nicht mehr sichergestellt werden kann | ||
@typescript-eslint/no-magic-numbers | Verbindet die Verwendung von Magic Numbers, Ausnahme sind Zahlen in Enums, Typen und readonly Klassenattribute | ||
@typescript-eslint/no-redeclare | Verbietet die Re-deklaration von Variablen | ||
@typescript-eslint/no-throw-literal | Verbietet das Werfen von Literalen als Exception | 💬 | |
@typescript-eslint/no-unnecessary-boolean-literal-compare | Verbietet unnötige Gleichheitsoperatoren bei Booleans | :wrench: | 💬 |
@typescript-eslint/no-unnecessary-qualifier | Verbietet unnötige oder unbenutzte Namespaces oder Enums | :wrench: | 💬 |
@typescript-eslint/no-unused-expressions | Verbietet ungenutzte Ausdrücke | ||
@typescript-eslint/no-unused-vars | Erlaubt die Verwendung von unbenutzten Variablen | ||
@typescript-eslint/no-use-before-define | Verbietet die Verwendung von Variablen vor ihrer Deklaration | ||
@typescript-eslint/no-useless-constructor | Verbietet unbenutzte Konstruktoren | ||
@typescript-eslint/prefer-for-of | Erzwingt die verwendung einer for-of Loop, falls diese sinnvoll verwendet werden kann | ||
@typescript-eslint/prefer-includes | Erzwingt die Verwendung der include Methode anstelle von indexOf | :wrench: | 💬 |
@typescript-eslint/prefer-literal-enum-member | Erlaubt nur Literale als Werte für Enums | ||
@typescript-eslint/prefer-nullish-coalescing | Erzwingt die Verwendung des nullish coalescing Operator anstelle von komplexen Vergleichen | 💬 | |
@typescript-eslint/prefer-optional-chain | Erzwingt Verwendung des safer Operator anseile von komplexen Vergleichen | ||
@typescript-eslint/prefer-reduce-type-parameter | Erzwingt die Verwendung von Generics anstelle von Casten bei der Array#reduce methode | :wrench: | 💬 |
@typescript-eslint/prefer-string-starts-ends-with | Erzwingt die Verwendung der Methoden String#startsWith und String#endsWith | :wrench: | 💬 |
@typescript-eslint/prefer-ts-expect-error | Erzwingt die Verwendung von @ts-expect-error anstelle von @ts-ignore | :wrench: | |
@typescript-eslint/promise-function-async | Erzwingt die Verwendung des async Keywords für alle Methoden, die ein Promise zurückgeben | :wrench: | 💬 |
@typescript-eslint/quotes | Erzwingt die konsistente Verwendung von Single-Quoted Strings | :wrench: | |
@typescript-eslint/return-await | Erzwingt die konsistente Verwendung des await Befehl vor dem return Befehl | :wrench: | 💬 |
@typescript-eslint/semi | Erzwingt die konsistente Verwendung von Semikolons am Ende einer Befehlszeile | :wrench: | |
@typescript-eslint/space-before-function-paren | Erzwingt die konsistente Vermeidung von leerzeichen nach Methodennamen | :wrench: | |
@typescript-eslint/unbound-method | Setzt Option ignoreStatic auf true um Angular Validatoren ohne Regelverletzung verwenden zu können |