feat: add no-unused-props rule

Author: baseballyama

.changeset/twelve-beers-talk.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: add `no-unused-props` rule

README.md

@@ -362,6 +362,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-reactive-literals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-literals/) | don't assign literal values in reactive statements | :star::bulb: |
 | [svelte/no-svelte-internal](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-svelte-internal/) | svelte/internal will be removed in Svelte 6. | :star: |
 | [svelte/no-unused-class-name](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-class-name/) | disallow the use of a class in the template without a corresponding style |  |
+| [svelte/no-unused-props](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-props/) | Warns about defined Props properties that are unused | :star: |
 | [svelte/no-unused-svelte-ignore](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/) | disallow unused svelte-ignore comments | :star: |
 | [svelte/no-useless-children-snippet](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-children-snippet/) | disallow explicit children snippet where it's not needed | :star: |
 | [svelte/no-useless-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-useless-mustaches/) | disallow unnecessary mustache interpolations | :star::wrench: |

docs/rules.md

@@ -59,6 +59,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-reactive-literals](./rules/no-reactive-literals.md)                           | don't assign literal values in reactive statements                                                                                        | :star::bulb:   |
 | [svelte/no-svelte-internal](./rules/no-svelte-internal.md)                               | svelte/internal will be removed in Svelte 6.                                                                                              | :star:         |
 | [svelte/no-unused-class-name](./rules/no-unused-class-name.md)                           | disallow the use of a class in the template without a corresponding style                                                                 |                |
+| [svelte/no-unused-props](./rules/no-unused-props.md)                                     | Warns about defined Props properties that are unused                                                                                      | :star:         |
 | [svelte/no-unused-svelte-ignore](./rules/no-unused-svelte-ignore.md)                     | disallow unused svelte-ignore comments                                                                                                    | :star:         |
 | [svelte/no-useless-children-snippet](./rules/no-useless-children-snippet.md)             | disallow explicit children snippet where it's not needed                                                                                  | :star:         |
 | [svelte/no-useless-mustaches](./rules/no-useless-mustaches.md)                           | disallow unnecessary mustache interpolations                                                                                              | :star::wrench: |

docs/rules/no-unused-props.md

@@ -0,0 +1,157 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/no-unused-props'
+description: 'Warns about defined Props properties that are unused'
+---
+
+# svelte/no-unused-props
+
+> Warns about defined Props properties that are unused
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :gear: This rule is included in `"plugin:svelte/recommended"`.
+
+## :book: Rule Details
+
+This rule reports properties that are defined in Props but never used in the component code.  
+It helps to detect dead code and improve component clarity by ensuring that every declared prop is utilized.
+
+This rule checks various usage patterns of props:
+
+- Direct property access
+- Destructuring assignment
+- Method calls
+- Computed property access
+- Object spread
+- Constructor calls (new expressions)
+- Assignment to other variables
+- Index signatures (e.g. `[key: string]: unknown`)
+
+Additionally, this rule checks if index signatures are properly used. When an index signature is defined but not captured using the rest operator (`...`), the rule will suggest using it.
+
+:warning: This rule requires `@typescript-eslint/parser` to work. Make sure you have installed `@typescript-eslint/parser` and configured it in your ESLint configuration. Therefore, the rule violations cannot be seen in the examples on this page because this documentation does not use `@typescript-eslint/parser`.
+
+<!--eslint-skip-->
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Direct property access
+  const props: { value: string } = $props();
+  console.log(props.value);
+</script>
+```
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Destructuring assignment
+  const { width, height }: { width: number; height: number } = $props();
+  console.log(width, height);
+</script>
+```
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Method calls
+  const props2: { callback: () => void } = $props();
+  props2.callback();
+</script>
+```
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Computed property access
+  const props3: { 'data-value': string } = $props();
+  const value = props3['data-value'];
+</script>
+```
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Constructor calls
+  const props4: { config: { new (): any } } = $props();
+  new props4.config();
+</script>
+```
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Using index signature with rest operator
+  interface Props {
+    a: number;
+    [key: string]: unknown;
+  }
+  let { a, ...rest }: Props = $props();
+  console.log(rest);
+</script>
+```
+
+```svelte
+<!-- ✗ Bad Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Unused property 'b'
+  const props: { a: string; b: number } = $props();
+  console.log(props.a);
+</script>
+```
+
+```svelte
+<!-- ✗ Bad Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Unused property in destructuring
+  const { x }: { x: number; y: number } = $props();
+  console.log(x);
+</script>
+```
+
+```svelte
+<!-- ✗ Bad Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: "error" */
+  // Unused index signature
+  interface Props {
+    a: number;
+    [key: string]: unknown; // This will be reported
+  }
+  let { a }: Props = $props();
+</script>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :gear: Required Configuration
+
+This rule requires `@typescript-eslint/parser` to work. Here's an example configuration:
+
+```json
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "svelte/no-unused-props": "error"
+  }
+}
+```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-unused-props.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/no-unused-props.ts)

packages/eslint-plugin-svelte/src/configs/flat/recommended.ts

@@ -32,6 +32,7 @@ const config: Linter.Config[] = [
 			'svelte/no-store-async': 'error',
 			'svelte/no-svelte-internal': 'error',
 			'svelte/no-unknown-style-directive-property': 'error',
+			'svelte/no-unused-props': 'error',
 			'svelte/no-unused-svelte-ignore': 'error',
 			'svelte/no-useless-children-snippet': 'error',
 			'svelte/no-useless-mustaches': 'error',

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

@@ -261,6 +261,11 @@ export interface RuleOptions {
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-class-name/
    */
   'svelte/no-unused-class-name'?: Linter.RuleEntry<SvelteNoUnusedClassName>
+  /**
+   * Warns about defined Props properties that are unused
+   * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-props/
+   */
+  'svelte/no-unused-props'?: Linter.RuleEntry<[]>
   /**
    * disallow unused svelte-ignore comments
    * @see https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-svelte-ignore/

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

@@ -0,0 +1,139 @@
+import { createRule } from '../utils/index.js';
+import { getTypeScriptTools } from '../utils/ts-utils/index.js';
+import type { TSESTree } from '@typescript-eslint/types';
+import type ts from 'typescript';
+import { findVariable } from '../utils/ast-utils.js';
+
+const unknown = Symbol('unknown');
+
+export default createRule('no-unused-props', {
+	meta: {
+		docs: {
+			description: 'Warns about defined Props properties that are unused',
+			category: 'Best Practices',
+			recommended: true
+		},
+		schema: [],
+		messages: {
+			unusedProp: "'{{name}}' is an unused Props property.",
+			unusedIndexSignature:
+				'Index signature is unused. Consider using rest operator (...) to capture remaining properties.'
+		},
+		type: 'suggestion',
+		conditions: [
+			{
+				svelteVersions: ['5'],
+				runes: [true, 'undetermined']
+			}
+		]
+	},
+	create(context) {
+		const tools = getTypeScriptTools(context);
+		if (!tools) {
+			return {};
+		}
+
+		const typeChecker = tools.service.program.getTypeChecker();
+		if (!typeChecker) {
+			return {};
+		}
+
+		function getUsedPropertyNames(node: TSESTree.Identifier): (string | typeof unknown)[] {
+			const variable = findVariable(context, node);
+			if (!variable) {
+				return [unknown];
+			}
+
+			const usedProps = new Set<string | typeof unknown>();
+
+			for (const reference of variable.references) {
+				const parent = reference.identifier.parent;
+				if (!parent) continue;
+
+				if (parent.type === 'MemberExpression' && parent.object === reference.identifier) {
+					if (parent.property.type === 'Identifier' && !parent.computed) {
+						usedProps.add(parent.property.name);
+					} else {
+						usedProps.add(unknown);
+					}
+				} else if (parent.type === 'CallExpression' || parent.type === 'NewExpression') {
+					if (
+						'arguments' in parent &&
+						Array.isArray(parent.arguments) &&
+						parent.arguments.some((arg): arg is TSESTree.Identifier => arg === reference.identifier)
+					) {
+						usedProps.add(unknown);
+					}
+				} else if (parent.type === 'AssignmentExpression' || parent.type === 'AssignmentPattern') {
+					usedProps.add(unknown);
+				} else if (parent.type === 'SpreadElement') {
+					usedProps.add(unknown);
+				}
+			}
+
+			return Array.from(usedProps);
+		}
+
+		return {
+			'VariableDeclaration > VariableDeclarator': (node: TSESTree.VariableDeclarator) => {
+				if (
+					node.init?.type !== 'CallExpression' ||
+					node.init.callee.type !== 'Identifier' ||
+					node.init.callee.name !== '$props'
+				) {
+					return;
+				}
+
+				const tsNode = tools.service.esTreeNodeToTSNodeMap.get(node) as ts.VariableDeclaration;
+				if (!tsNode || !tsNode.type) return;
+				const checker = tools.service.program.getTypeChecker();
+				const propType = checker.getTypeFromTypeNode(tsNode.type);
+				const properties = checker.getPropertiesOfType(propType);
+				const propNames = properties.map((p) => p.getName());
+
+				const usedNames: (string | typeof unknown)[] = [];
+				let hasRestElement = false;
+
+				if (node.id.type === 'ObjectPattern') {
+					for (const prop of node.id.properties) {
+						if (prop.type === 'Property' && prop.key.type === 'Identifier') {
+							usedNames.push(prop.key.name);
+						} else if (prop.type === 'RestElement' && prop.argument.type === 'Identifier') {
+							hasRestElement = true;
+							usedNames.push(...getUsedPropertyNames(prop.argument));
+						}
+					}
+				} else if (node.id.type === 'Identifier' && node.id.typeAnnotation) {
+					usedNames.push(...getUsedPropertyNames(node.id));
+				}
+
+				if (usedNames.includes(unknown)) {
+					return;
+				}
+
+				const indexType = propType.getStringIndexType();
+				const numberIndexType = propType.getNumberIndexType();
+				const hasIndexSignature = indexType || numberIndexType;
+
+				for (const propName of propNames) {
+					if (!usedNames.includes(propName)) {
+						context.report({
+							node: node.id,
+							messageId: 'unusedProp',
+							data: {
+								name: propName
+							}
+						});
+					}
+				}
+
+				if (hasIndexSignature && !hasRestElement) {
+					context.report({
+						node: node.id,
+						messageId: 'unusedIndexSignature'
+					});
+				}
+			}
+		};
+	}
+});

packages/eslint-plugin-svelte/src/utils/rules.ts

@@ -51,6 +51,7 @@ import noTargetBlank from '../rules/no-target-blank.js';
 import noTrailingSpaces from '../rules/no-trailing-spaces.js';
 import noUnknownStyleDirectiveProperty from '../rules/no-unknown-style-directive-property.js';
 import noUnusedClassName from '../rules/no-unused-class-name.js';
+import noUnusedProps from '../rules/no-unused-props.js';
 import noUnusedSvelteIgnore from '../rules/no-unused-svelte-ignore.js';
 import noUselessChildrenSnippet from '../rules/no-useless-children-snippet.js';
 import noUselessMustaches from '../rules/no-useless-mustaches.js';
@@ -123,6 +124,7 @@ export const rules = [
 	noTrailingSpaces,
 	noUnknownStyleDirectiveProperty,
 	noUnusedClassName,
+	noUnusedProps,
 	noUnusedSvelteIgnore,
 	noUselessChildrenSnippet,
 	noUselessMustaches,

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/_requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

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

@@ -0,0 +1,8 @@
+- message: "'email' is an unused Props property."
+  line: 13
+  column: 6
+  suggestions: null
+- message: "'role' is an unused Props property."
+  line: 13
+  column: 6
+  suggestions: null