Framework
Version
Search

ESLint Plugin Query

TanStack Query comes with its own ESLint plugin. This plugin is used to enforce best practices and to help you avoid common mistakes.

Installation

The plugin is a separate package that you need to install:

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

or

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

or

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

or

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

Flat Config (eslint.config.js)

To enable all of the recommended rules for our plugin, add the following config:

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

export default [
  ...pluginQuery.configs['flat/recommended'],
  // Any other config...
]
import pluginQuery from '@tanstack/eslint-plugin-query'

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

Custom setup

Alternatively, you can load the plugin and configure only the rules you want to use:

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

export default [
  {
    plugins: {
      '@tanstack/query': pluginQuery,
    },
    rules: {
      '@tanstack/query/exhaustive-deps': 'error',
    },
  },
  // 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...
]

Legacy Config (.eslintrc)

To enable all of the recommended rules for our plugin, add plugin:@tanstack/query/recommended in extends:

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

Custom setup

Alternatively, add @tanstack/query to the plugins section, and configure the rules you want to use:

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

Rules

scarf analytics