Skip to content

Latest commit

 

History

History
116 lines (83 loc) · 2.53 KB

eslint-plugin-query.md

File metadata and controls

116 lines (83 loc) · 2.53 KB
id title
eslint-plugin-query
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:

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

Flat Config (eslint.config.js)

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...
]

Recommended type-checked setup

If you're using TypeScript and want to enable rules that require type information, you can use the flat/recommendedTypeChecked config:

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

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

ℹ️ This setup requires type-aware linting. You can follow the TypeScript ESLint documentation on type-checking to set up your ESLint config accordingly.

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)

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

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