TanStack
Router v1
Auto
Framework
Version
Menü
Erste Schritte
Routing
Anleitungen
Anleitungen (How-To)
API
Integrationen
ESLint
Router-Beispiele

ESLint-Plugin Router

TanStack Router kommt mit seinem eigenen ESLint Plugin. Dieses Plugin wird verwendet, um Best Practices durchzusetzen und Ihnen zu helfen, häufige Fehler zu vermeiden.

Installation

Das Plugin ist ein separates Paket, das Sie installieren müssen

sh
npm install -D @tanstack/eslint-plugin-router

npm install -D @tanstack/eslint-plugin-router

oder

sh
pnpm add -D @tanstack/eslint-plugin-router

pnpm add -D @tanstack/eslint-plugin-router

oder

sh
yarn add -D @tanstack/eslint-plugin-router

yarn add -D @tanstack/eslint-plugin-router

oder

sh
bun add -D @tanstack/eslint-plugin-router

bun add -D @tanstack/eslint-plugin-router

Flat Config (eslint.config.js)

Die Veröffentlichung von ESLint 9.0 hat eine neue Art der Konfiguration von ESLint mithilfe eines Flat-Config-Formats eingeführt. Dieses neue Format ist flexibler und ermöglicht es Ihnen, ESLint granularer zu konfigurieren als das Legacy-Format .eslintrc. Das TanStack Router ESLint Plugin unterstützt dieses neue Format und bietet eine empfohlene Konfiguration, mit der Sie alle empfohlenen Regeln für das Plugin aktivieren können.

Empfohlene Flat Config Einrichtung

Um alle empfohlenen Regeln für unser Plugin zu aktivieren, fügen Sie die folgende Konfiguration hinzu

js
// eslint.config.js
import pluginRouter from '@tanstack/eslint-plugin-router'

export default [
  ...pluginRouter.configs['flat/recommended'],
  // Any other config...
]

// eslint.config.js
import pluginRouter from '@tanstack/eslint-plugin-router'

export default [
  ...pluginRouter.configs['flat/recommended'],
  // Any other config...
]

Benutzerdefinierte Flat Config Einrichtung

Alternativ können Sie das Plugin laden und nur die Regeln konfigurieren, die Sie verwenden möchten

js
// eslint.config.js
import pluginRouter from '@tanstack/eslint-plugin-router'

export default [
  {
    plugins: {
      '@tanstack/router': pluginRouter,
    },
    rules: {
      '@tanstack/router/create-route-property-order': 'error',
    },
  },
  // Any other config...
]

// eslint.config.js
import pluginRouter from '@tanstack/eslint-plugin-router'

export default [
  {
    plugins: {
      '@tanstack/router': pluginRouter,
    },
    rules: {
      '@tanstack/router/create-route-property-order': 'error',
    },
  },
  // Any other config...
]

Legacy Config (.eslintrc)

Vor der Veröffentlichung von ESLint 9.0 war die gebräuchlichste Methode zur Konfiguration von ESLint die Verwendung einer .eslintrc-Datei. Das TanStack Router ESLint Plugin unterstützt diese Konfigurationsmethode weiterhin.

Empfohlene Legacy Config Einrichtung

Um alle empfohlenen Regeln für unser Plugin zu aktivieren, fügen Sie plugin:@tanstack/eslint-plugin-router/recommended in extends hinzu

json
{
  "extends": ["plugin:@tanstack/eslint-plugin-router/recommended"]
}

{
  "extends": ["plugin:@tanstack/eslint-plugin-router/recommended"]
}

Benutzerdefinierte Legacy Config Einrichtung

Alternativ fügen Sie @tanstack/eslint-plugin-router zum plugins-Abschnitt hinzu und konfigurieren die Regeln, die Sie verwenden möchten

json
{
  "plugins": ["@tanstack/eslint-plugin-router"],
  "rules": {
    "@tanstack/router/create-route-property-order": "error"
  }
}

{
  "plugins": ["@tanstack/eslint-plugin-router"],
  "rules": {
    "@tanstack/router/create-route-property-order": "error"
  }
}

Regeln

Die folgenden Regeln sind im TanStack Router ESLint Plugin verfügbar

Konflikte mit anderen ESLint Plugins

Wenn Sie andere ESLint-Plugins installiert haben, können diese Regeln haben, die mit diesem Plugin in Konflikt stehen. In diesem Fall müssen Sie einige Anpassungen vornehmen, damit diese Plugins zusammenarbeiten können.

typescript-eslint

Die Regel @typescript-eslint/only-throw-error, die standardmäßig in den Regelsätzen recommended-type-checked und strict-type-checked aktiviert ist, verbietet das Werfen von Nicht-Error-Werten als Ausnahmen, was als gute Praxis gilt.

Um sicherzustellen, dass es nicht mit TanStack Router in Konflikt gerät, sollten Sie redirect zu den zulässigen auswerfbaren Objekten hinzufügen.

json
{
  "rules": {
    "@typescript-eslint/only-throw-error": [
      "error",
      {
        "allow": [
          {
            "from": "package",
            "package": "@tanstack/router-core",
            "name": "Redirect"
          }
        ]
      }
    ]
  }
}

{
  "rules": {
    "@typescript-eslint/only-throw-error": [
      "error",
      {
        "allow": [
          {
            "from": "package",
            "package": "@tanstack/router-core",
            "name": "Redirect"
          }
        ]
      }
    ]
  }
}
Auf GitHub bearbeiten
TanStack Query
Reihenfolge der Eigenschaften beim Erstellen eines Routers
Unsere Partner
Code Rabbit
Netlify
Neon
Clerk
Convex
Sentry
Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.

Bytes abonnieren

Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.

Bytes

Kein Spam. Jederzeit kündbar.