본문으로 건너뛰기

ESLint 플러그인 쿼리

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

설치​

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

npm i -D @tanstack/eslint-plugin-query

or

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

or

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

or

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

플랫 구성 (eslint.config.js)​

플러그인에 권장되는 모든 규칙을 활성화하려면 다음 config를 추가합니다:

import pluginQuery from '@tanstack/eslint-plugin-query'

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

flat/recommended-strict 구성은 모범 사례를 더 적극적으로 적용하는 추가적인 독자적 규칙으로 flat/recommended를 확장합니다.

import pluginQuery from '@tanstack/eslint-plugin-query'

export default [
  ...pluginQuery.configs['flat/recommended-strict'],
  // Any other config...
]

사용자 지정 설정​

또는 플러그인을 로드하고 사용하려는 규칙만 구성할 수 있습니다:

import pluginQuery from '@tanstack/eslint-plugin-query'

export default [
  {
    plugins: {
      '@tanstack/query': pluginQuery,
    },
    rules: {
      '@tanstack/query/exhaustive-deps': 'error',
    },
  },
  // Any other config...
]

레거시 구성(.eslintrc)​

플러그인에 권장되는 모든 규칙을 활성화하려면 extends에 plugin:@tanstack/query/recommended를 추가합니다:

{
  "extends": ["plugin:@tanstack/query/recommended"]
}

recommendedStrict 구성은 추가적인 독자적 규칙으로 recommended를 확장합니다:

{
  "extends": ["plugin:@tanstack/query/recommendedStrict"]
}

사용자 지정 설정​

또는 plugins 섹션에 @tanstack/query를 추가하고 사용할 규칙을 구성합니다:

{
  "plugins": ["@tanstack/query"],
  "rules": {
    "@tanstack/query/exhaustive-deps": "error"
  }
}

규칙​