|
| 1 | +--- |
| 2 | +pageClass: 'rule-details' |
| 3 | +sidebarDepth: 0 |
| 4 | +title: 'svelte/no-unused-props' |
| 5 | +description: 'Warns about defined Props properties that are unused' |
| 6 | +--- |
| 7 | + |
| 8 | +# svelte/no-unused-props |
| 9 | + |
| 10 | +> Warns about defined Props properties that are unused |
| 11 | +
|
| 12 | +- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge> |
| 13 | +- :gear: This rule is included in `"plugin:svelte/recommended"`. |
| 14 | + |
| 15 | +## :book: Rule Details |
| 16 | + |
| 17 | +This rule reports properties that are defined in Props but never used in the component code. |
| 18 | +It helps to detect dead code and improve component clarity by ensuring that every declared prop is utilized. |
| 19 | + |
| 20 | +This rule checks various usage patterns of props: |
| 21 | + |
| 22 | +- Direct property access |
| 23 | +- Destructuring assignment |
| 24 | +- Method calls |
| 25 | +- Computed property access |
| 26 | +- Object spread |
| 27 | +- Constructor calls (new expressions) |
| 28 | +- Assignment to other variables |
| 29 | +- Index signatures (e.g. `[key: string]: unknown`) |
| 30 | + |
| 31 | +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. |
| 32 | + |
| 33 | +: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`. |
| 34 | + |
| 35 | +<!--eslint-skip--> |
| 36 | + |
| 37 | +```svelte |
| 38 | +<!-- ✓ Good Examples --> |
| 39 | +<script lang="ts"> |
| 40 | + /* eslint svelte/no-unused-props: "error" */ |
| 41 | + // Direct property access |
| 42 | + const props: { value: string } = $props(); |
| 43 | + console.log(props.value); |
| 44 | +</script> |
| 45 | +``` |
| 46 | + |
| 47 | +```svelte |
| 48 | +<!-- ✓ Good Examples --> |
| 49 | +<script lang="ts"> |
| 50 | + /* eslint svelte/no-unused-props: "error" */ |
| 51 | + // Destructuring assignment |
| 52 | + const { width, height }: { width: number; height: number } = $props(); |
| 53 | + console.log(width, height); |
| 54 | +</script> |
| 55 | +``` |
| 56 | + |
| 57 | +```svelte |
| 58 | +<!-- ✓ Good Examples --> |
| 59 | +<script lang="ts"> |
| 60 | + /* eslint svelte/no-unused-props: "error" */ |
| 61 | + // Method calls |
| 62 | + const props2: { callback: () => void } = $props(); |
| 63 | + props2.callback(); |
| 64 | +</script> |
| 65 | +``` |
| 66 | + |
| 67 | +```svelte |
| 68 | +<!-- ✓ Good Examples --> |
| 69 | +<script lang="ts"> |
| 70 | + /* eslint svelte/no-unused-props: "error" */ |
| 71 | + // Computed property access |
| 72 | + const props3: { 'data-value': string } = $props(); |
| 73 | + const value = props3['data-value']; |
| 74 | +</script> |
| 75 | +``` |
| 76 | + |
| 77 | +```svelte |
| 78 | +<!-- ✓ Good Examples --> |
| 79 | +<script lang="ts"> |
| 80 | + /* eslint svelte/no-unused-props: "error" */ |
| 81 | + // Constructor calls |
| 82 | + const props4: { config: { new (): any } } = $props(); |
| 83 | + new props4.config(); |
| 84 | +</script> |
| 85 | +``` |
| 86 | + |
| 87 | +```svelte |
| 88 | +<!-- ✓ Good Examples --> |
| 89 | +<script lang="ts"> |
| 90 | + /* eslint svelte/no-unused-props: "error" */ |
| 91 | + // Using index signature with rest operator |
| 92 | + interface Props { |
| 93 | + a: number; |
| 94 | + [key: string]: unknown; |
| 95 | + } |
| 96 | + let { a, ...rest }: Props = $props(); |
| 97 | + console.log(rest); |
| 98 | +</script> |
| 99 | +``` |
| 100 | + |
| 101 | +```svelte |
| 102 | +<!-- ✗ Bad Examples --> |
| 103 | +<script lang="ts"> |
| 104 | + /* eslint svelte/no-unused-props: "error" */ |
| 105 | + // Unused property 'b' |
| 106 | + const props: { a: string; b: number } = $props(); |
| 107 | + console.log(props.a); |
| 108 | +</script> |
| 109 | +``` |
| 110 | + |
| 111 | +```svelte |
| 112 | +<!-- ✗ Bad Examples --> |
| 113 | +<script lang="ts"> |
| 114 | + /* eslint svelte/no-unused-props: "error" */ |
| 115 | + // Unused property in destructuring |
| 116 | + const { x }: { x: number; y: number } = $props(); |
| 117 | + console.log(x); |
| 118 | +</script> |
| 119 | +``` |
| 120 | + |
| 121 | +```svelte |
| 122 | +<!-- ✗ Bad Examples --> |
| 123 | +<script lang="ts"> |
| 124 | + /* eslint svelte/no-unused-props: "error" */ |
| 125 | + // Unused index signature |
| 126 | + interface Props { |
| 127 | + a: number; |
| 128 | + [key: string]: unknown; // This will be reported |
| 129 | + } |
| 130 | + let { a }: Props = $props(); |
| 131 | +</script> |
| 132 | +``` |
| 133 | + |
| 134 | +## :wrench: Options |
| 135 | + |
| 136 | +Nothing. |
| 137 | + |
| 138 | +## :gear: Required Configuration |
| 139 | + |
| 140 | +This rule requires `@typescript-eslint/parser` to work. Here's an example configuration: |
| 141 | + |
| 142 | +```json |
| 143 | +{ |
| 144 | + "parser": "@typescript-eslint/parser", |
| 145 | + "parserOptions": { |
| 146 | + "project": "./tsconfig.json" |
| 147 | + }, |
| 148 | + "rules": { |
| 149 | + "svelte/no-unused-props": "error" |
| 150 | + } |
| 151 | +} |
| 152 | +``` |
| 153 | + |
| 154 | +## :mag: Implementation |
| 155 | + |
| 156 | +- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/src/rules/no-unused-props.ts) |
| 157 | +- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/packages/eslint-plugin-svelte/tests/src/rules/no-unused-props.ts) |
0 commit comments