Verwenden von ESLint und Prettier in einem TypeScript-Projekt

Blog

Verwenden von ESLint und Prettier in einem TypeScript-Projekt

Verwenden von ESLint und Prettier in einem TypeScript-Projekt

Der umfangreiche Satz an Linting-Regeln von ESLint und das verstärkte Engagement des TypeScript-Teams zur Verwendung von ESLint machen ESLint zu einem großartigen Tool für Linting.



Wenn es um das Linting von TypeScript-Code geht, stehen zwei wichtige Linting-Optionen zur Auswahl: TSLint und ESLint . TSLint ist ein Linter, der nur für TypeScript verwendet werden kann, während ESLint sowohl JavaScript als auch TypeScript unterstützt.

In dem Roadmap für TypeScript 2019 , erklärt das TypeScript-Kernteam das ESLint hat eine leistungsfähigere Architektur als TSLint und das werden sie Konzentriere dich nur auf ESLint bei der Bereitstellung von Editor-Linting-Integration für TypeScript. Aus diesem Grund würde ich empfehlen, ESLint zum Linting von TypeScript-Projekten zu verwenden.



Wo kann man Ergo-Münzen kaufen?

ESLint für die Arbeit mit TypeScript einrichten

Installieren Sie zuerst alle erforderlichen Dev-Abhängigkeiten:

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
  • |_+_|: Die zentrale ESLint-Linting-Bibliothek
  • |_+_|: Der Parser, der es ESLint ermöglicht, TypeScript-Code zu linten
  • |_+_|: Ein Plugin, das eine Reihe von ESLint-Regeln enthält, die TypeScript-spezifisch sind

Fügen Sie als Nächstes ein |_+_| . hinzu Konfigurationsdatei im Root-Projektverzeichnis. Hier ist eine Beispielkonfiguration für ein TypeScript-Projekt:



[eslint](https://www.npmjs.com/package/eslint 'eslint')

Notiz: Ich bevorzuge die Verwendung einer JavaScript-Datei für die |_+_| Datei (anstelle einer JSON-Datei), da sie Kommentare unterstützt, die verwendet werden können, um Regeln besser zu beschreiben.

Wenn Sie TypeScript mit React verwenden, wird das |_+_| dev-Abhängigkeit sollte installiert sein und die folgende Konfiguration kann verwendet werden:

grundlegender Algorithmus-Skripting: Slice und Splice
[@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser '@typescript-eslint/parser')

Letztendlich liegt es an Ihnen zu entscheiden, von welchen Regeln Sie erweitern möchten und welche Sie innerhalb der |_+_| . verwenden möchten Objekt in Ihrem |_+_| Datei.

Hübscher zum Mix hinzufügen

Was zusammen mit ESLint gut funktioniert, ist hübscher , das bei der Verarbeitung von Codeformatierung hervorragende Arbeit leistet. Installieren Sie die erforderlichen Dev-Abhängigkeiten, um die Arbeit mit ESLint zu verbessern:

google maps api javascript-tutorial

Garn hinzufügen hübscher eslint-config-prettier eslint-plugin-prettier --dev

  • |_+_|: Die hübschere Kernbibliothek
  • |_+_|: Deaktiviert ESLint-Regeln, die mit hübscheren kollidieren könnten
  • |_+_|: Läuft schöner als eine ESLint-Regel

Um schöner zu konfigurieren, ein |_+_| Datei ist im Stammprojektverzeichnis erforderlich. Hier ist ein Beispiel |_+_| Datei:

[@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin '@typescript-eslint/eslint-plugin')

Als nächstes die |_+_| Datei muss aktualisiert werden:

.eslintrc.js

Der Vorteil einer schöneren Einrichtung als ESLint-Regel mit |_+_| ist, dass Code mit ESLints |_+_| . automatisch repariert werden kann Möglichkeit.

Automatisch korrigierender Code (VS-Code)

Für eine gute Entwicklererfahrung ist es nützlich, Ihren Editor so einzurichten, dass der automatische Fix-Befehl von ESLint (d. h. |_+_|) automatisch ausgeführt wird, wenn eine Datei gespeichert wird. Da ich VS Code verwende, ist hier die erforderliche Konfiguration im |_+_| Datei in VS Code, um beim Speichern einer Datei eine automatische Korrektur zu erhalten:

Zeichen des Versprechens bdo
module.exports = { parser: '@typescript-eslint/parser', // Specifies the ESLint parser extends: [ 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin ], parserOptions: { ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features sourceType: 'module', // Allows for the use of imports }, rules: { // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs // e.g. '@typescript-eslint/explicit-function-return-type': 'off', }, };

Wenn Sie auch |_+_| . eingestellt haben Option zu |_+_| in Ihrem |_+_| müssen Sie die folgende Konfiguration hinzufügen, um zu verhindern, dass 2 Formatierungsbefehle beim Speichern für JavaScript- und TypeScript-Dateien ausgeführt werden:

.eslintrc

Und da hast du es. So können Sie ein TypeScript-Projekt mit ESLint linten. Wenn Sie sicherstellen möchten, dass alle Dateien, die Sie an git übergeben, die ESLint-Prüfungen bestehen, werfen Sie einen Blick auf fussel-inszeniert , die ESLint auf Dateien ausführen kann, die festgeschrieben werden.

Ursprünglich veröffentlicht bei robertcooper.me

#typescript #javascript