Skip to content
dev-docs

ESLint Plugin Query

Source URL: https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query

ESLint Plugin Query

Section titled “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

Section titled “Installation”

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

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

or

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

or

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

or

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

Flat Config (eslint.config.js)

Section titled “Flat Config (eslint.config.js)”
Section titled “Recommended setup”

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

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


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

Custom setup

Section titled “Custom setup”

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

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)

Section titled “Legacy Config (.eslintrc)”
Section titled “Recommended setup”

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

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

Custom setup

Section titled “Custom setup”

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

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

Rules

Section titled “Rules”