@shayanthenerd/eslint-config 0.31.0 → 0.32.0

package/README.md

@@ -43,6 +43,7 @@ Legend:
 | [Astro][plugin-astro] ([jsx-accessibility][plugin-jsx-a11y])                                          |     🔍      |
 | [React][plugin-react] ([jsx-accessibility][plugin-jsx-a11y], [@html-eslint/react][plugin-html-react]) |     🔍      |
 | [Next][plugin-next]                                                                                   |     🔍      |
+| [TanStack Start][plugin-tanstack-start], [TanStack Query][plugin-tanstack-query], [TanStack Router][plugin-tanstack-router]                                                                              |     🔍      |
 | [Vue & Nuxt][plugin-vue] ([vue-accessibility][plugin-vue-a11y])                                       |     🔍      |
 | [Tailwind][plugin-tailwind]                                                                           |     ⚙️      |
 | [Zod & Zod Mini][plugin-zod]                                                                          |     🔍      |
@@ -62,7 +63,7 @@ Legend:
 ## Installation and Configuration
 1. Install the package and ESLint as dev dependencies:
    ```shell
-   npm i -D @shayanthenerd/eslint-config eslint
+   pnpm i -D @shayanthenerd/eslint-config eslint
    ```
 
 2. Create an ESLint configuration file (_eslint.config.js_) at the root of your project:
@@ -88,9 +89,9 @@ Legend:
 ---
 
 After installation:
-- Use `npm run lint` to lint files without modifying them (useful for CI).
-- Use `npm run lint:fix` to lint and fix files.
-- Use `npm run lint:inspect` to see a visual breakdown of your configuration.
+- Use `pnpm run lint` to lint files without modifying them (useful for CI).
+- Use `pnpm run lint:fix` to lint and fix files.
+- Use `pnpm run lint:inspect` to see a visual breakdown of your configuration.
 - See [IDE Support](#ide-support) for editor integration.
 - See [Customization](#customization) for advanced configuration.
 - See [Formatting](#formatting) for formatting options and Prettier integration.
@@ -313,7 +314,7 @@ For file types that ESLint Stylistic does not handle—such as CSS, JSON, YAML,
 
   1. Install Prettier as a dev dependency:
      ```shell
-     npm i -D prettier
+     pnpm i -D prettier
      ```
 
   2. Create a Prettier config file in the root of your project (_prettier.config.js_):
@@ -619,6 +620,12 @@ For file types that ESLint Stylistic does not handle—such as CSS, JSON, YAML,
         multilineSort?: boolean,
         overrides?: Overrides,
       },
+      tanstack?: boolean | {
+        query?: boolean,
+        router?: boolean,
+        start?: boolean,
+        overrides?: Overrides,
+      },
       test?: {
         maxNestedDescribe?: number,
         testFunction?: 'it' | 'test',
@@ -768,6 +775,9 @@ This project was inspired by the work of [Anthony Fu][antfu], whose generous con
 [plugin-storybook]: https://storybook.js.org/docs/configure/integration/eslint-plugin
 [plugin-stylistic]: https://eslint.style
 [plugin-tailwind]: https://github.com/schoero/eslint-plugin-better-tailwindcss
+[plugin-tanstack-query]: https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query
+[plugin-tanstack-router]: https://tanstack.com/router/latest/docs/eslint/eslint-plugin-router
+[plugin-tanstack-start]: https://tanstack.com/start/latest/docs/eslint/eslint-plugin-start
 [plugin-ts]: https://typescript-eslint.io
 [plugin-unicorn]: https://github.com/sindresorhus/eslint-plugin-unicorn
 [plugin-vitest]: https://github.com/vitest-dev/eslint-plugin-vitest

package/dist/configs/javascript.mjs

@@ -9,7 +9,7 @@ import globals from "globals";
 function getJavascriptConfig(options) {
 	const { env, configs: { vue, astro, javascript: { overrides } }, project: { globals: { bun, node, deno, vitest, worker, browser, commonjs, nodeBuiltin, audioWorklet, webextension, sharedWorker, serviceworker, vue: vueGlobals, astro: astroGlobals, custom: userGlobals } } } = options;
 	const baseConfig = {
-		name: "shayanthenerd/base",
+		name: "shayanthenerd/javascript",
 		files: [
 			globs.src,
 			globs.jsxTsx,

package/dist/configs/tanstack.mjs

@@ -0,0 +1,26 @@
+import { globs } from "../helpers/globs.mjs";
+import { defaultOptions } from "../helpers/options/defaultOptions.mjs";
+import { isEnabled } from "../utils/isEnabled.mjs";
+import { getTanstackRules } from "../rules/tanstack.mjs";
+import { mergeConfigs } from "eslint-flat-config-utils";
+import eslintPluginTanstackQuery from "@tanstack/eslint-plugin-query";
+import eslintPluginTanstackRouter from "@tanstack/eslint-plugin-router";
+import eslintPluginTanstackStart from "@tanstack/eslint-plugin-start";
+//#region src/configs/tanstack.ts
+function getTanstackConfig(options) {
+	const { tanstack } = options.configs;
+	const { overrides } = isEnabled(tanstack) ? tanstack : defaultOptions.configs.tanstack;
+	const tanstackConfig = {
+		name: "shayanthenerd/tanstack",
+		files: [globs.src, globs.jsxTsx],
+		plugins: isEnabled(tanstack) ? {
+			...isEnabled(tanstack.start) && { "@tanstack/start": eslintPluginTanstackStart },
+			...isEnabled(tanstack.query) && { "@tanstack/query": eslintPluginTanstackQuery },
+			...isEnabled(tanstack.router) && { "@tanstack/router": eslintPluginTanstackRouter }
+		} : {},
+		rules: getTanstackRules(options)
+	};
+	return mergeConfigs(tanstackConfig, overrides);
+}
+//#endregion
+export { getTanstackConfig };

package/dist/helpers/options/defaultOptions.mjs

@@ -131,6 +131,12 @@ const defaultOptions = {
 			multilineSort: true,
 			overrides: {}
 		},
+		tanstack: {
+			query: false,
+			router: false,
+			start: false,
+			overrides: {}
+		},
 		test: {
 			maxNestedDescribe: 1,
 			testFunction: "test",

package/dist/helpers/options/enableDetectedConfigs.mjs

@@ -25,6 +25,9 @@ function enableDetectedConfigs(options) {
 		astro: isPackageDetected("astro", options),
 		react: isPackageDetected("react", options),
 		next: isPackageDetected("next", options),
+		tanstackStart: isPackageDetected("@tanstack/react-start", options),
+		tanstackQuery: isPackageDetected("@tanstack/react-query", options),
+		tanstackRouter: isPackageDetected("@tanstack/react-router", options),
 		vue: isPackageDetected("vue", options),
 		nuxt: isPackageDetected("nuxt", options),
 		nuxtUI: isPackageDetected("@nuxt/ui", options),
@@ -55,6 +58,7 @@ function enableDetectedConfigs(options) {
 	options.configs.nuxt ??= autoDetectedPackages.nuxt;
 	options.configs.react ??= autoDetectedPackages.react;
 	options.configs.next ??= autoDetectedPackages.next;
+	options.configs.tanstack ??= autoDetectedPackages.tanstackStart || autoDetectedPackages.tanstackQuery || autoDetectedPackages.tanstackRouter;
 	options.configs.test.vitest ??= autoDetectedPackages.vitest;
 	options.configs.test.cypress ??= autoDetectedPackages.cypress;
 	options.configs.test.storybook ??= autoDetectedPackages.storybook;
@@ -76,6 +80,12 @@ function enableDetectedConfigs(options) {
 		options.configs.vue = options.configs.vue === true ? {} : options.configs.vue;
 		options.configs.vue.blockLang = { script: "ts" };
 	}
+	if (options.configs.tanstack) {
+		if (options.configs.tanstack === true) options.configs.tanstack = {};
+		options.configs.tanstack.start ??= autoDetectedPackages.tanstackStart;
+		options.configs.tanstack.query ??= autoDetectedPackages.tanstackQuery;
+		options.configs.tanstack.router ??= autoDetectedPackages.tanstackRouter;
+	}
 	if (options.configs.nuxt) {
 		if (options.configs.nuxt === true) options.configs.nuxt = {};
 		options.configs.nuxt.ui ??= autoDetectedPackages.nuxtUI;

package/dist/index.d.mts

@@ -1,8 +1,6 @@
 import { Options } from "./types/index.mjs";
 import { Linter } from "eslint";
 //#region src/index.d.ts
-/** Valid argument combinations for `defineConfig`. */
-type DefineConfigArguments = [] | [options: Options] | [configs: Linter.Config[]] | [options: Options, configs: Linter.Config[]];
 /**
  * Define your ESLint configuration based on the provided options and/or custom Flat Config Objects.
  *
@@ -37,6 +35,8 @@ type DefineConfigArguments = [] | [options: Options] | [configs: Linter.Config[]
  *   ],
  * );
  */
-declare function defineConfig(...args: DefineConfigArguments): Linter.Config[];
+declare function defineConfig(options: Options): Linter.Config[];
+declare function defineConfig(configs: Linter.Config[]): Linter.Config[];
+declare function defineConfig(options: Options, configs: Linter.Config[]): Linter.Config[];
 //#endregion
 export { defineConfig };

package/dist/index.mjs

@@ -19,6 +19,7 @@ import { getReactConfig } from "./configs/react.mjs";
 import { getStorybookConfig } from "./configs/storybook.mjs";
 import { getStylisticConfig } from "./configs/stylistic.mjs";
 import { getTailwindConfig } from "./configs/tailwind.mjs";
+import { getTanstackConfig } from "./configs/tanstack.mjs";
 import { getTypescriptConfig } from "./configs/typescript.mjs";
 import { getUnicornConfig } from "./configs/unicorn.mjs";
 import { getVitestConfig } from "./configs/vitest.mjs";
@@ -28,40 +29,6 @@ import { getIgnorePatterns } from "./helpers/ignores/getIgnorePatterns.mjs";
 import { mergeWithDefaults } from "./helpers/options/mergeWithDefaults.mjs";
 import { defineConfig as defineConfig$1, globalIgnores } from "eslint/config";
 //#region src/index.ts
-/**
-* Define your ESLint configuration based on the provided options and/or custom Flat Config Objects.
-*
-* @param {...DefineConfigArguments} args The configuration options and/or custom Flat Config objects.
-* @returns {Linter.Config[]} The merged ESLint configuration array
-*
-* @example
-* defineConfig();
-* // or
-* defineConfig({ autoDetectDeps: 'verbose' });
-* // or
-* defineConfig([
-*   {
-*     name: 'custom',
-*     rules: {
-*       'no-console': 'error',
-*     },
-*   },
-*   { ... },
-* ]);
-* // or
-* defineConfig(
-*   { autoDetectDeps: 'verbose' },
-*   [
-*     {
-*       name: 'custom',
-*       rules: {
-*         'no-console': 'error',
-*       },
-*     },
-*     { ... },
-*   ],
-* );
-*/
 function defineConfig(...args) {
 	let options = {};
 	let userConfigs = [];
@@ -72,7 +39,7 @@ function defineConfig(...args) {
 		userConfigs = secondArgument ?? [];
 	}
 	const mergedOptions = mergeWithDefaults(options);
-	const { gitignore, project: { rules, ignores, settings, linterOptions }, configs: { css, vue, zod, html, next, node, nuxt, react, astro, unicorn, importX, promise, baseline, markdown, tailwind, stylistic, typescript, packageJson, perfectionist, test: { vitest, cypress, storybook, playwright } } } = mergedOptions;
+	const { gitignore, project: { rules, ignores, settings, linterOptions }, configs: { css, vue, zod, html, next, node, nuxt, react, astro, unicorn, importX, promise, baseline, markdown, tailwind, tanstack, stylistic, typescript, packageJson, perfectionist, test: { vitest, cypress, storybook, playwright } } } = mergedOptions;
 	const ignorePatterns = getIgnorePatterns({
 		gitignore,
 		patterns: ignores
@@ -103,6 +70,7 @@ function defineConfig(...args) {
 		isEnabled(astro) && getAstroConfig(mergedOptions),
 		isEnabled(react) && getReactConfig(mergedOptions),
 		isEnabled(next) && getNextConfig(mergedOptions),
+		isEnabled(tanstack) && getTanstackConfig(mergedOptions),
 		isEnabled(vue) && getVueConfig(mergedOptions),
 		...isEnabled(nuxt) ? getNuxtConfigs(mergedOptions) : [],
 		isEnabled(storybook) && getStorybookConfig(mergedOptions),

package/dist/rules/tanstack.mjs

@@ -0,0 +1,39 @@
+import { isEnabled } from "../utils/isEnabled.mjs";
+//#region src/rules/tanstack.ts
+const tanstackStartRules = {
+	"@tanstack/start/no-async-client-component": "error",
+	"@tanstack/start/no-client-code-in-server-component": "error"
+};
+const tanstackQueryRules = {
+	"@tanstack/query/exhaustive-deps": "warn",
+	"@tanstack/query/no-rest-destructuring": "warn",
+	"@tanstack/query/stable-query-client": "error",
+	"@tanstack/query/no-unstable-deps": "error",
+	"@tanstack/query/infinite-query-property-order": "warn",
+	"@tanstack/query/no-void-query-fn": "error",
+	"@tanstack/query/mutation-property-order": "warn"
+};
+const tanstackRouterRules = {
+	"@tanstack/router/create-route-property-order": "warn",
+	"@tanstack/router/route-param-names": "error"
+};
+function getTanstackRules(options) {
+	const { tanstack, typescript } = options.configs;
+	const rules = {};
+	if (!isEnabled(tanstack)) return rules;
+	if (isEnabled(typescript)) tanstackRouterRules["@typescript-eslint/only-throw-error"] = ["error", { allow: [{
+		from: "package",
+		package: "@tanstack/router-core",
+		name: "Redirect"
+	}, {
+		from: "package",
+		package: "@tanstack/router-core",
+		name: "NotFoundError"
+	}] }];
+	if (isEnabled(tanstack.start)) Object.assign(rules, tanstackStartRules);
+	if (isEnabled(tanstack.query)) Object.assign(rules, tanstackQueryRules);
+	if (isEnabled(tanstack.router)) Object.assign(rules, tanstackRouterRules);
+	return rules;
+}
+//#endregion
+export { getTanstackRules };

package/dist/types/eslint-schema.d.mts

@@ -1557,6 +1557,66 @@ export interface ESLintSchema {
    * @see https://eslint.style/rules/yield-star-spacing
    */
   '@stylistic/yield-star-spacing'?: Linter.RuleEntry<StylisticYieldStarSpacing>;
+  /**
+   * Exhaustive deps rule for useQuery
+   * @see https://tanstack.com/query/latest/docs/eslint/exhaustive-deps
+   */
+  '@tanstack/query/exhaustive-deps'?: Linter.RuleEntry<TanstackQueryExhaustiveDeps>;
+  /**
+   * Ensure correct order of inference sensitive properties for infinite queries
+   * @see https://tanstack.com/query/latest/docs/eslint/infinite-query-property-order
+   */
+  '@tanstack/query/infinite-query-property-order'?: Linter.RuleEntry<[]>;
+  /**
+   * Ensure correct order of inference-sensitive properties in useMutation()
+   * @see https://tanstack.com/query/latest/docs/eslint/mutation-property-order
+   */
+  '@tanstack/query/mutation-property-order'?: Linter.RuleEntry<[]>;
+  /**
+   * Disallows rest destructuring in queries
+   * @see https://tanstack.com/query/latest/docs/eslint/no-rest-destructuring
+   */
+  '@tanstack/query/no-rest-destructuring'?: Linter.RuleEntry<[]>;
+  /**
+   * Disallow putting the result of query hooks directly in a React hook dependency array
+   * @see https://tanstack.com/query/latest/docs/eslint/no-unstable-deps
+   */
+  '@tanstack/query/no-unstable-deps'?: Linter.RuleEntry<[]>;
+  /**
+   * Ensures queryFn returns a non-undefined value
+   * @see https://tanstack.com/query/latest/docs/eslint/no-void-query-fn
+   */
+  '@tanstack/query/no-void-query-fn'?: Linter.RuleEntry<[]>;
+  /**
+   * Prefer using queryOptions() to co-locate queryKey and queryFn
+   * @see https://tanstack.com/query/latest/docs/eslint/prefer-query-options
+   */
+  '@tanstack/query/prefer-query-options'?: Linter.RuleEntry<[]>;
+  /**
+   * Makes sure that QueryClient is stable
+   * @see https://tanstack.com/query/latest/docs/eslint/stable-query-client
+   */
+  '@tanstack/query/stable-query-client'?: Linter.RuleEntry<[]>;
+  /**
+   * Ensure correct order of inference sensitive properties for createRoute functions
+   * @see https://tanstack.com/router/latest/docs/eslint/create-route-property-order
+   */
+  '@tanstack/router/create-route-property-order'?: Linter.RuleEntry<[]>;
+  /**
+   * Ensure route param names are valid JavaScript identifiers
+   * @see https://tanstack.com/router/latest/docs/eslint/route-param-names
+   */
+  '@tanstack/router/route-param-names'?: Linter.RuleEntry<[]>;
+  /**
+   * Disallow async components in client context. Async components are only valid inside server components.
+   * @see https://tanstack.com/start/latest/docs/eslint/no-async-client-component
+   */
+  '@tanstack/start/no-async-client-component'?: Linter.RuleEntry<TanstackStartNoAsyncClientComponent>;
+  /**
+   * Disallow client-only code inside server components
+   * @see https://tanstack.com/start/latest/docs/eslint/no-client-code-in-server-component
+   */
+  '@tanstack/start/no-client-code-in-server-component'?: Linter.RuleEntry<TanstackStartNoClientCodeInServerComponent>;
   /**
    * Require that function overload signatures be consecutive
    * @see https://typescript-eslint.io/rules/adjacent-overload-signatures
@@ -11595,6 +11655,21 @@ type StylisticYieldStarSpacing = [] | [(("before" | "after" | "both" | "neither"
   before?: boolean;
   after?: boolean;
 })];
+// ----- @tanstack/query/exhaustive-deps -----
+type TanstackQueryExhaustiveDeps = [] | [{
+  allowlist?: {
+    variables?: string[];
+    types?: string[];
+  };
+}];
+// ----- @tanstack/start/no-async-client-component -----
+type TanstackStartNoAsyncClientComponent = [] | [{
+  ignorePatterns?: string[];
+}];
+// ----- @tanstack/start/no-client-code-in-server-component -----
+type TanstackStartNoClientCodeInServerComponent = [] | [{
+  allowedServerHooks?: string[];
+}];
 // ----- @typescript-eslint/array-type -----
 type TypescriptEslintArrayType = [] | [{
   default?: ("array" | "generic" | "array-simple");

package/dist/types/index.d.mts

@@ -5,6 +5,7 @@ import { NuxtOptions } from "./options/nuxt.mjs";
 import { ReactOptions } from "./options/react.mjs";
 import { StylisticOptions } from "./options/stylistic.mjs";
 import { TailwindOptions } from "./options/tailwind.mjs";
+import { TanstackOptions } from "./options/tanstack.mjs";
 import { TestOptions } from "./options/test.mjs";
 import { TypescriptOptions } from "./options/typescript.mjs";
 import { VueOptions } from "./options/vue.mjs";
@@ -378,6 +379,12 @@ interface Options {
      * @default false
      */
     tailwind?: false | TailwindOptions;
+    /**
+     * Use [@tanstack/eslint-plugin-start](https://tanstack.com/start/latest/docs/eslint/eslint-plugin-start), [@tanstack/eslint-plugin-query](https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query), and [@tanstack/eslint-plugin-router](https://tanstack.com/router/latest/docs/eslint/eslint-plugin-router) to enforce best practices and avoid common mistakes when using TanStack Start, TanStack Router, and TanStack Query.
+     *
+     * @default false // `true` if either of "@tanstack/react-start", "@tanstack/react-query", or "@tanstack/react-router" are detected in the dependencies when `autoDetectDeps` is enabled
+     */
+    tanstack?: boolean | TanstackOptions;
     /**
      * Configuration options for the testing tools.
      */

package/dist/types/options/tanstack.d.mts

@@ -0,0 +1,32 @@
+import { PluginRules } from "../eslintRules.mjs";
+import { ConfigWithOverrides } from "../index.mjs";
+//#region src/types/options/tanstack.d.ts
+type ConfigRules = PluginRules<'@tanstack'>;
+interface TanstackOptions extends ConfigWithOverrides<ConfigRules> {
+  /**
+   * Whether [@tanstack/query](https://tanstack.com/query) is used in the project.
+   *
+   * @default false // `true` if "@tanstack/react-query" is detected in the dependencies when `autoDetectDeps` is enabled
+   *
+   * @see [@tanstack/eslint-plugin-query](https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query)
+   */
+  query?: boolean;
+  /**
+   * Whether [@tanstack/router](https://tanstack.com/router) is used in the project.
+   *
+   * @default false // `true` if "@tanstack/react-router" is detected in the dependencies when `autoDetectDeps` is enabled
+   *
+   * @see [@tanstack/eslint-plugin-router](https://tanstack.com/router/latest/docs/eslint/eslint-plugin-router)
+   */
+  router?: boolean;
+  /**
+   * Whether [@tanstack/start](https://tanstack.com/start) is used in the project.
+   *
+   * @default false // `true` if "@tanstack/react-start" is detected in the dependencies when `autoDetectDeps` is enabled
+   *
+   * @see [@tanstack/eslint-plugin-start](https://tanstack.com/start/latest/docs/eslint/eslint-plugin-start)
+   */
+  start?: boolean;
+}
+//#endregion
+export type { TanstackOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shayanthenerd/eslint-config",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "A modern, flexible ESLint configuration for enforcing best practices and maintaining a consistent coding style",
   "keywords": [
     "eslint",
@@ -44,7 +44,7 @@
   },
   "nano-staged": {
     "**/*.json": "pnpm format",
-    "**/*.ts": "pnpm lint",
+    "**/*.ts": "pnpm lint --no-warn-ignored",
     "package.json": "pnpm lint",
     "pnpm-lock.yaml": [
       "pnpm generate:types",
@@ -66,6 +66,9 @@
     "@next/eslint-plugin-next": "16.3.4",
     "@nuxt/eslint-plugin": "1.17.0",
     "@stylistic/eslint-plugin": "5.10.0",
+    "@tanstack/eslint-plugin-query": "5.102.8",
+    "@tanstack/eslint-plugin-router": "1.162.0",
+    "@tanstack/eslint-plugin-start": "0.1.0",
     "@vitest/eslint-plugin": "1.6.27",
     "astro-eslint-parser": "3.1.0",
     "defu": "6.1.7",
@@ -74,7 +77,7 @@
     "eslint-plugin-astro": "3.1.0",
     "eslint-plugin-baseline-js": "0.7.1",
     "eslint-plugin-better-tailwindcss": "4.7.0",
-    "eslint-plugin-cypress": "7.0.1",
+    "eslint-plugin-cypress": "7.0.2",
     "eslint-plugin-import-x": "4.17.1",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-n": "18.3.0",