feat: add ignorePropertyPatterns property and rename ignorePatterns to ignoreTypePatterns in no-unused-props rule (#1132)

Author: baseballyama

.changeset/crazy-peas-laugh.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: add `ignorePropertyPatterns` property and rename `ignorePatterns` to `ignoreTypePatterns` in `no-unused-props` rule. The `ignorePatterns` option existed only for a few hours and is removed by this PR. Technically, this is a breaking change, but we’ll handle it as a minor release since very few users are likely affected.

docs/rules/no-unused-props.md

@@ -159,14 +159,17 @@ Note: Properties of class types are not checked for usage, as they might be used
   "svelte/no-unused-props": ["error", {
     // Whether to check properties from imported types
     "checkImportedTypes": false,
+    // Patterns to ignore when checking property types
+    "ignoreTypePatterns": [],
     // Patterns to ignore when checking for unused props
-    "ignorePatterns": []
+    "ignorePropertyPatterns": [],
   }]
 }
 ```
 
-- `checkImportedTypes` ... Controls whether to check properties from imported types. Default is `false`.
-- `ignorePatterns` ... Patterns to ignore when checking for unused props. Default is an empty array.
+- `checkImportedTypes` ... Controls whether to check properties from types defined in external files. Default is `false`, meaning the rule only checks types defined within the component file itself. When set to `true`, the rule will also check properties from imported and extended types.
+- `ignoreTypePatterns` ... Regular expression patterns for type names to exclude from checks. Default is `[]` (no exclusions). Most useful when `checkImportedTypes` is `true`, allowing you to exclude specific imported types (like utility types or third-party types) from being checked.
+- `ignorePropertyPatterns` ... Regular expression patterns for property names to exclude from unused checks. Default is `[]` (no exclusions). Most useful when `checkImportedTypes` is `true`, allowing you to ignore specific properties from external types that shouldn't trigger warnings.
 
 Examples:
 
@@ -187,8 +190,26 @@ Examples:
 ```svelte
 <!-- ✓ Good Examples -->
 <script lang="ts">
-  /* eslint svelte/no-unused-props: ["error", { "ignorePatterns": ["^_"] }] */
-  // Ignore properties starting with underscore
+  /* eslint svelte/no-unused-props: ["error", { "ignoreTypePatterns": ["/^Internal/"] }] */
+  // Ignore properties from types matching the pattern
+  interface InternalConfig {
+    secretKey: string;
+    debugMode: boolean;
+  }
+  interface Props {
+    config: InternalConfig;
+    value: number;
+  }
+  let { config, value }: Props = $props();
+  console.log(value, config.secretKey);
+</script>
+```
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: ["error", { "ignorePropertyPatterns": ["/^_/"] }] */
+  // Ignore properties with names matching the pattern
   interface Props {
     _internal: string;
     value: number;

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -535,7 +535,8 @@ type SvelteNoUnusedClassName = []|[{
 // ----- svelte/no-unused-props -----
 type SvelteNoUnusedProps = []|[{
   checkImportedTypes?: boolean
-  ignorePatterns?: string[]
+  ignoreTypePatterns?: string[]
+  ignorePropertyPatterns?: string[]
 }]
 // ----- svelte/no-useless-mustaches -----
 type SvelteNoUselessMustaches = []|[{

packages/eslint-plugin-svelte/src/rules/no-unused-props.ts

@@ -8,6 +8,8 @@ import { getFilename } from '../utils/compat.js';
 
 type PropertyPath = string[];
 
+let isRemovedWarningShown = false;
+
 export default createRule('no-unused-props', {
 	meta: {
 		docs: {
@@ -23,7 +25,14 @@ export default createRule('no-unused-props', {
 						type: 'boolean',
 						default: false
 					},
-					ignorePatterns: {
+					ignoreTypePatterns: {
+						type: 'array',
+						items: {
+							type: 'string'
+						},
+						default: []
+					},
+					ignorePropertyPatterns: {
 						type: 'array',
 						items: {
 							type: 'string'
@@ -61,23 +70,48 @@ export default createRule('no-unused-props', {
 		}
 
 		const options = context.options[0] ?? {};
+
+		// TODO: Remove in v4
+		// MEMO: `ignorePatterns` was a property that only existed from v3.2.0 to v3.2.2.
+		// From v3.3.0, it was replaced with `ignorePropertyPatterns` and `ignoreTypePatterns`.
+		if (options.ignorePatterns != null && !isRemovedWarningShown) {
+			console.warn(
+				'eslint-plugin-svelte: The `ignorePatterns` option in the `no-unused-props` rule has been removed. Please use `ignorePropertyPatterns` or/and `ignoreTypePatterns` instead.'
+			);
+			isRemovedWarningShown = true;
+		}
+
 		const checkImportedTypes = options.checkImportedTypes ?? false;
-		const ignorePatterns = (options.ignorePatterns ?? []).map((p: string | RegExp) => {
+
+		const ignoreTypePatterns = (options.ignoreTypePatterns ?? []).map((p: string | RegExp) => {
 			if (typeof p === 'string') {
 				return toRegExp(p);
 			}
 			return p;
 		});
 
-		function shouldIgnore(name: string): boolean {
-			return ignorePatterns.some((pattern: RegExp) => pattern.test(name));
+		const ignorePropertyPatterns = (options.ignorePropertyPatterns ?? []).map(
+			(p: string | RegExp) => {
+				if (typeof p === 'string') {
+					return toRegExp(p);
+				}
+				return p;
+			}
+		);
+
+		function shouldIgnoreProperty(name: string): boolean {
+			return ignorePropertyPatterns.some((pattern: RegExp) => pattern.test(name));
 		}
 
 		function shouldIgnoreType(type: ts.Type): boolean {
+			function isMatched(name: string): boolean {
+				return ignoreTypePatterns.some((pattern: RegExp) => pattern.test(name));
+			}
+
 			const typeStr = typeChecker.typeToString(type);
 			const symbol = type.getSymbol();
 			const symbolName = symbol?.getName();
-			return shouldIgnore(typeStr) || (symbolName ? shouldIgnore(symbolName) : false);
+			return isMatched(typeStr) || (symbolName ? isMatched(symbolName) : false);
 		}
 
 		function isInternalProperty(symbol: ts.Symbol): boolean {
@@ -223,6 +257,8 @@ export default createRule('no-unused-props', {
 				if (!checkImportedTypes && !isInternalProperty(prop)) continue;
 
 				const propName = prop.getName();
+				if (shouldIgnoreProperty(propName)) continue;
+
 				const currentPath = [...parentPath, propName];
 				const currentPathStr = [...parentPath, propName].join('.');
 

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/custom-config-combination-config.json

@@ -0,0 +1,9 @@
+{
+	"options": [
+		{
+			"checkImportedTypes": true,
+			"ignoreTypePatterns": ["BaseProps"],
+			"ignorePropertyPatterns": ["/^(_|baz)/"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/custom-config-combination-errors.yaml

@@ -0,0 +1,12 @@
+- message: "'base' is an unused Props property."
+  line: 10
+  column: 6
+  suggestions: null
+- message: "'bar' in 'my_foo' is an unused property."
+  line: 10
+  column: 6
+  suggestions: null
+- message: "'qux' is an unused Props property."
+  line: 10
+  column: 6
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/custom-config-combination-input.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { BaseProps, FooDTO } from './shared-types';
+	interface Props {
+		base: BaseProps;
+		my_foo: FooDTO;
+		_my_bar: string;
+		baz: string;
+		qux: string;
+	}
+	let { my_foo }: Props = $props();
+	console.log(my_foo.foo);
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignore-property-patterns-custom-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignorePropertyPatterns": ["^foo$"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignore-property-patterns-custom-errors.yaml

@@ -0,0 +1,8 @@
+- message: "'foo' is an unused Props property."
+  line: 8
+  column: 8
+  suggestions: null
+- message: "'_foo' is an unused Props property."
+  line: 8
+  column: 8
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignore-property-patterns-custom-input.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	interface Props {
+		foo: string;
+		_foo: string;
+		bar: string;
+	}
+
+	const { bar }: Props = $props();
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-pattern-partial-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignoreTypePatterns": [".*DTO$"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-type-patterns-custom-config.json

@@ -0,0 +1,9 @@
+{
+	"options": [
+		{
+			"checkImportedTypes": true,
+			"ignoreTypePatterns": ["BaseProps"],
+			"ignorePropertyPatterns": ["/^(_|baz)/"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-pattern-partial-errors.yaml renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-type-patterns-custom-errors.yaml

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { BaseProps, FooDTO } from './shared-types';
+	interface Props {
+		base: BaseProps;
+		my_foo: FooDTO;
+		_my_bar: string;
+		baz: string;
+	}
+	let { base, my_foo }: Props = $props();
+	console.log(base.age, my_foo.foo, my_foo.bar);
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-pattern-partial-input.svelte renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-type-patterns-custom-input.svelte

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignorePropertyPatterns": ["/^[#$@_~]/"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/custom-config-combination-config.json

@@ -0,0 +1,13 @@
+<script lang="ts">
+	interface Props {
+		_internal: string;
+		$store: boolean;
+		'@decorator': string;
+		'#private': number;
+		'~tilde': boolean;
+		normalUsed: string;
+	}
+
+	const { normalUsed }: Props = $props();
+	console.log(normalUsed);
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/custom-config-combination-input.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	interface Props {
+		foo: string;
+		bar: string;
+	}
+
+	const { foo, bar }: Props = $props();
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/ignore-property-patterns-custom-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignoreTypePatterns": ["/^Conditional/"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/ignore-property-patterns-custom-input.svelte

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignoreTypePatterns": ["/^Internal/"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/ignore-property-patterns-default-input.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface InternalConfig {
+		secretKey: string;
+		debugMode: boolean;
+	}
+	interface Props {
+		config: InternalConfig;
+		value: number;
+	}
+	let { config, value }: Props = $props();
+	console.log(value, config.secretKey);
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/ignored-conditional-type-config.json

@@ -1,5 +1,6 @@
 export interface BaseProps {
 	name: string;
+	age: number;
 }
 
 export interface FooDTO {