ESLint Plugin 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 Plugin Router

安装

扁平配置 (eslint.config.js)

推荐的扁平配置设置

自定义扁平配置设置

传统配置 (.eslintrc)

推荐的传统配置设置

自定义传统配置设置

规则