본문으로 건너뛰기

ESLint Router 플러그인

TanStack Router에는 자체 ESLint 플러그인이 포함되어 있습니다. 이 플러그인은 모범 사례를 적용하고 일반적인 실수를 방지하는 데 사용합니다.

설치​

플러그인은 별도로 설치해야 하는 패키지입니다.

react: @tanstack/eslint-plugin-router solid: @tanstack/eslint-plugin-router

Flat Config (eslint.config.js)​

ESLint 9.0 릴리스에서는 flat config 형식을 사용해 ESLint를 구성하는 새로운 방법이 도입되었습니다. 이 형식은 더 유연하며 기존 .eslintrc 형식보다 세밀하게 ESLint를 구성할 수 있습니다. TanStack Router ESLint Plugin은 이 새로운 형식을 지원하고 플러그인의 모든 권장 규칙을 활성화하는 데 사용할 수 있는 권장 구성을 제공합니다. .

플러그인의 모든 권장 규칙을 활성화하려면 다음 구성을 추가합니다.

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

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

사용자 지정 Flat 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)​

ESLint 9.0 릴리스 이전에는 .eslintrc 파일을 사용해 EsLint를 구성하는 방법이 가장 일반적이었습니다. TanStack Router ESLint Plugin은 이 구성 방법도 계속 지원합니다.

플러그인의 모든 권장 규칙을 활성화하려면 extends에 plugin:@tanstack/eslint-plugin-router/recommended를 추가합니다.

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

사용자 지정 Legacy Config 설정​

또는 plugins 섹션에 @tanstack/eslint-plugin-router를 추가하고 사용하려는 규칙을 구성합니다.

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

규칙​

TanStack Router ESLint Plugin에서는 다음 규칙을 사용할 수 있습니다.

다른 ESLint 플러그인과의 충돌​

다른 ESLint 플러그인이 설치되어 있다면 이 플러그인과 충돌하는 규칙이 있을 수 있습니다. 이 경우 플러그인들이 함께 작동하도록 일부를 조정해야 합니다.

typescript-eslint​

recommended-type-checked 및 strict-type-checked 규칙 세트에서 기본적으로 활성화되는 @typescript-eslint/only-throw-error 규칙은 Error가 아닌 값을 예외로 던지지 못하게 합니다. 이는 좋은 관행으로 여겨집니다.

TanStack Router와 충돌하지 않도록 redirect와 notFound를 예외로 던질 수 있는 객체로 허용해야 합니다.

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