2.0.0 • Published 11 months ago

@isyfact/eslint-plugin v2.0.0

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
11 months ago

@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.

ESLint hat ab Version 8.53.0 die TypeScript-Formatierungsregeln eingestellt und empfiehlt den Umstieg auf ESLint-Stylistic. In ESLint-Stylistic sind diese Regeln bereits migriert und werden weiterhin gepflegt. Dieser Leitfaden unterstützt bei der Migration.

Die isy-eslint-typescript-rules verstehen sich als Erweiterung zu den empfohlenen TypeScript-Regeln aus ESLint und ESLint-Stylistic.

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 @stylistic/eslint-plugin-ts @isyfact/eslint-plugin

Als minimale Konfiguration der .eslintrc.json kann folgendes Beispiel verwendet werden.

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "@stylistic/ts"],
  "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 @stylistic/eslint-plugin-ts @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", "@stylistic/ts"],
  "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 Regelset 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-Regelset auf .spec Dateien angewandt.

Weiterführende Anleitungen zur Installation:

Installation von ESLint-TypeScript: https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

Installation von ESLint-TypeScript-Formatierungsregeln: https://www.npmjs.com/package/@stylistic/eslint-plugin-ts

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

NameBeschreibung:wrench:💬
@stylistic/ts/brace-styleErzwingt einen konsistenten Klammerstil für Blöcke:wrench:
@stylistic/ts/comma-dangleVerbietet ein Komma am Ende einer Liste:wrench:
@stylistic/ts/comma-spacingErzwingt konsistente Leerzeichen vor und nach Kommas:wrench:
@stylistic/ts/function-call-spacingVerbietet Leerzeichen zwischen Methodenname und Ausführungsklammern:wrench:
@stylistic/ts/keyword-spacingErzwingt konsistente Leerzeichen vor und nach einem Keyword:wrench:
@stylistic/ts/quotesErzwingt die konsistente Verwendung von Single-Quoted Strings:wrench:
@stylistic/ts/semiErzwingt die konsistente Verwendung von Semikolons am Ende einer Befehlszeile:wrench:
@stylistic/ts/indentErzwingt eine konsistente Einrückung von 2 Leerzeichen:wrench:
@stylistic/ts/space-before-function-parenErzwingt die konsistente Vermeidung von Leerzeichen nach Methodennamen:wrench:
@typescript-eslint/ban-ts-commentVerbietet den Einsatz von @ts- Kommentaren, um den Compiler zu umgehen
@typescript-eslint/only-throw-errorVerbiete das Werfen von Nicht-Error-Werten als Exeption
@typescript-eslint/consistent-type-definitionsErlaubt Typ-Definitionen nur über Interfaces:wrench:
@typescript-eslint/default-param-lastDefault Parameter müssen am Ende deklariert werden
@typescript-eslint/dot-notationErzwingt die Verwendung der Punktnotation (wo es sinnvoll ist):wrench:💬
@typescript-eslint/explicit-function-return-typeErfordert explizite Rückgabewerte für Funktionen und Methoden in Klassen
@typescript-eslint/explicit-member-accessibilityErfordert explizite Zugriffsmodifikatoren für Klassenvariablen und -methoden:wrench:
@typescript-eslint/no-dupe-class-membersVerbietet Duplikate als Klassenattribute
@typescript-eslint/no-loop-funcVerbietet Schleifen, die unsichere Referenzen auf Variablen enthalten
@typescript-eslint/no-magic-numbersVerbindet die Verwendung von Magic-Numbers; Ausnahmen sind Zahlen in Enums, Typen und readonly Klassenattribute
@typescript-eslint/no-redeclareVerbietet die Redeklaration von Variablen
@typescript-eslint/no-unnecessary-boolean-literal-compareVerbietet unnötige Gleichheitsoperatoren bei Booleans:wrench:💬
@typescript-eslint/no-unnecessary-qualifierVerbietet unnötige oder unbenutzte Namespaces oder Enums:wrench:💬
@typescript-eslint/no-unnecessary-type-argumentsVerbietet die Verwendung des default Types bei der Initialisierung:wrench:💬
@typescript-eslint/no-unused-expressionsVerbietet ungenutzte Ausdrücke
@typescript-eslint/no-unused-varsVerbietet die Verwendung von unbenutzten Variablen
@typescript-eslint/no-use-before-defineVerbietet die Verwendung von Variablen vor ihrer Deklaration
@typescript-eslint/no-useless-constructorVerbietet unbenutzte Konstruktoren
@typescript-eslint/prefer-for-ofErzwingt die Verwendung einer for-of-Loop, falls diese sinnvoll verwendet werden kann
@typescript-eslint/prefer-includesErzwingt die Verwendung der include Methode anstelle von indexOf:wrench:💬
@typescript-eslint/prefer-literal-enum-memberErlaubt nur Literale als Werte für Enums
@typescript-eslint/prefer-nullish-coalescingErzwingt die Verwendung des Nullish-Coalescing-Operators anstelle komplexer Vergleiche💬
@typescript-eslint/prefer-optional-chainErzwingt die Verwendung des Safer-Operators anstelle komplexer Vergleiche
@typescript-eslint/prefer-reduce-type-parameterErzwingt die Verwendung von Generics anstelle von Casten bei der Array#reduce-Methode:wrench:💬
@typescript-eslint/prefer-string-starts-ends-withErzwingt die Verwendung der Methoden String#startsWith und String#endsWith:wrench:💬
@typescript-eslint/promise-function-asyncErzwingt die Verwendung des async-Keywords für alle Methoden, die ein Promise zurückgeben:wrench:💬
@typescript-eslint/return-awaitErzwingt die konsistente Verwendung des await Befehl vor dem return Befehl:wrench:💬
@typescript-eslint/unbound-methodSetzt Option ignoreStatic auf true um Angular-Validatoren ohne Regelverletzung verwenden zu können
2.0.0

11 months ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.2.0

2 years ago