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 | |
 | [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 | |
 | [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,74 @@
+---
+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>
+
+## :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
+
+<!--eslint-skip-->
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+ // Direct property access
+ const props = $props<{ value: string }>();
+ console.log(props.value);
+
+ // Destructuring assignment
+ const { width, height } = $props<{ width: number; height: number }>();
+ console.log(width, height);
+
+ // Method calls
+ const props2 = $props<{ callback: () => void }>();
+ props2.callback();
+
+ // Computed property access
+ const props3 = $props<{ 'data-value': string }>();
+ const value = props3['data-value'];
+
+ // Constructor calls
+ const props4 = $props<{ config: { new(): any } }>();
+ new props4.config();
+</script>
+
+<!-- ✗ Bad Examples -->
+<script lang="ts">
+ // Unused property 'b'
+ const props = $props<{ a: string; b: number }>();
+ console.log(props.a);
+
+ // Unused property in destructuring
+ const { x } = $props<{ x: number; y: number }>();
+ console.log(x);
+</script>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :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/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,122 @@
+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: false
+},
+schema: [],
+messages: {
+unusedProp: "'{{name}}' is an unused Props property."
+},
+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)[] = [];
+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') {
+usedNames.push(...getUsedPropertyNames(prop.argument));
+}
+}
+} else if (node.id.type === 'Identifier' && node.id.typeAnnotation) {
+usedNames.push(...getUsedPropertyNames(node.id));
+}
+
+if (usedNames.includes(unknown)) {
+return;
+}
+for (const propName of propNames) {
+if (!usedNames.includes(propName)) {
+context.report({
+node: node.id,
+messageId: 'unusedProp',
+data: {
+name: propName
+}
+});
+}
+}
+}
+};
+}
+});

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

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+interface BaseProps {
+id: string;
+type: 'user' | 'admin';
+role: string; // unused
+}
+
+interface Props extends BaseProps {
+name: string;
+email: string; // unused
+}
+
+let props: Props = $props();
+console.log(props.id, props.type, props.name);
+</script>