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:
1$ npm i -D @tanstack/eslint-plugin-query
2# or
3$ pnpm add -D @tanstack/eslint-plugin-query
4# or
5$ yarn add -D @tanstack/eslint-plugin-query
6# or
7$ bun add -D @tanstack/eslint-plugin-query
Flat Config (eslint.config.js) #
Recommended setup #
To enable all of the recommended rules for our plugin, add the following config:
1import pluginQuery from '@tanstack/eslint-plugin-query'
2
3export default [
4 ...pluginQuery.configs['flat/recommended'],
5 // Any other config...
6]
Custom setup #
Alternatively, you can load the plugin and configure only the rules you want to use:
1import pluginQuery from '@tanstack/eslint-plugin-query'
2
3export default [
4 {
5 plugins: {
6 '@tanstack/query': pluginQuery,
7 },
8 rules: {
9 '@tanstack/query/exhaustive-deps': 'error',
10 },
11 },
12 // Any other config...
13]
Legacy Config (.eslintrc) #
Recommended setup #
To enable all of the recommended rules for our plugin, add plugin:@tanstack/eslint-plugin-query/recommended in extends:
1{
2 "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
3}
Custom setup #
Alternatively, add @tanstack/eslint-plugin-query to the plugins section, and configure the rules you want to use:
1{
2 "plugins": ["@tanstack/query"],
3 "rules": {
4 "@tanstack/query/exhaustive-deps": "error"
5 }
6}