ESLint 路由插件 | TanStack Router 文档

TanStack Router 自带一个 ESLint 插件。此插件用于强制执行最佳实践并帮助您避免常见错误。

安装

该插件是一个独立的包，您需要安装它

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

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

或

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

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

或

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

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

或

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

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

扁平配置 (eslint.config.js)

ESLint 9.0 的发布引入了一种使用扁平配置格式配置 ESLint 的新方法。这种新格式更灵活，允许您以比传统 .eslintrc 格式更精细的方式配置 ESLint。TanStack Router ESLint 插件支持这种新格式，并提供了一个推荐配置，您可以使用它来启用插件的所有推荐规则。

自定义扁平配置设置

或者，您可以加载插件并仅配置您想要使用的规则

// 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...
]

传统配置 (.eslintrc)

在 ESLint 9.0 发布之前，配置 EsLint 最常见的方式是使用 .eslintrc 文件。TanStack Router ESLint 插件仍然支持这种配置方法。

自定义传统配置设置

或者，将 @tanstack/eslint-plugin-router 添加到 plugins 部分，并配置您想要使用的规则

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"
  }
}

规则

TanStack Router ESLint 插件中提供了以下规则

@tanstack/router/create-route-property-order

与其他 ESLint 插件的冲突

如果您安装了其他 ESLint 插件，它们可能包含与此插件冲突的规则。如果发生这种情况，您需要进行一些调整，以使这些插件能够协同工作。

typescript-eslint

默认情况下，recommended-type-checked 和 strict-type-checked 规则集中启用了 @typescript-eslint/only-throw-error 规则，该规则禁止抛出非 Error 值作为异常，这被认为是一种良好实践。

为确保它不与 TanStack Router 冲突，您应该将 redirect 添加到允许作为可抛出对象的列表中。

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"
          }
        ]
      }
    ]
  }
}

ESLint 插件 Router

安装