So fügen Sie ESLint zu einem React-Projekt hinzu

Das Hinzufügen von Linting-Regeln zu einem React-Projekt ist ein Muss, wenn es darum geht, die Codequalität zu verbessern, den Code konsistenter zu machen und Fehler zu vermeiden.

Dieser Artikel wurde zuerst im MyDevPa.ge-Blog veröffentlicht. Hier finden Sie hilfreiche Tutorials für Softwareentwickler.

Es gibt ein beliebtes Open-Source-JavaScript-Linting-Tool namens ESLint, das zur automatischen Erkennung fehlerhafter Muster im JavaScript-Code verwendet wird.

Hier ist eine Schritt-für-Schritt-Methode zum Hinzufügen von Linting-Regeln zu React-Projekten:

ESLint installieren

Zuerst müssen wir ESLint in unserem React-Projekt als devDependencies installieren, da wir sie in der Produktion nicht benötigen.

Zur Installation verwenden wir den folgenden Befehl.

npm i -D eslint

Initialisieren Sie ESLint

Als nächstes müssen wir die ESLint-Konfiguration initialisieren, indem wir eine Konfigurationsdatei .eslintrc.json im Stammordner unseres Projekts hinzufügen.

Hier ist eine Beispielkonfiguration.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Fügen Sie in unserer .eslintrc.json Erweiterungen und Plugin-Eigenschaften hinzu.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

Da wir verschiedene Plugins hinzugefügt haben, müssen wir diese zunächst als devDependencies installieren, indem wir den unten angegebenen Befehl ausführen.

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Regeln hinzufügen

Regeln werden zu Konfigurationszwecken verwendet. Wir können die Fehlerstufe von Regeln auf drei verschiedene Arten festlegen.

• Aus oder 0: Dadurch wird die Regel deaktiviert.
• Warnung oder 1: Dadurch wird die Regel als Warnung aktiviert.
• Fehler oder 2: Dadurch wird die Regel als Fehler aktiviert.

? JavaScript-Strings-Cheatsheets für alle Methoden

Lassen Sie uns einige Regeln zu unserer Konfigurationsdatei hinzufügen. Wir können beliebige andere Regeln nach unserer Wahl aus der Liste aller oben genannten Regeln hinzufügen.

"rules": {
  "react/prop-types": 0,
  "indent": ["error", 2],
  "linebreak-style": 1,
  "quotes": ["error", "double"]
}

Hinzufügen von Skripten für Linting

Zu guter Letzt fügen wir noch einige Befehle zu unserer package.json „scripts“-Eigenschaft hinzu, um ESLint auszuführen.

"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx}\"",
  "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}

Herzlichen Glückwunsch, wenn Sie jetzt versuchen, einen dieser Befehle auszuführen, sollte es funktionieren!

Danach können Sie die Linting-Regeln weiterhin nach Ihren Wünschen anpassen, um die Konsistenz und Qualität des Codes sicherzustellen.

Besuchen Sie MyDevPa.ge, um in einer Minute kostenlos Ihre kostenlose Portfolio-Website zu erstellen!

Das obige ist der detaillierte Inhalt vonSo fügen Sie ESLint zu einem React-Projekt hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!