Open
Description
Please describe what the rule should do:
This is similar to #2172 but I would like to allow the use of implicit props and would like to warn/error when a variable shadowing a prop is defined.
<script setup lang="ts">
import {computed} from 'vue';
const props = defineProps<{ isDisabled: boolean }>();
// Creating variables with the same name as props
// creates an ambiguity in the template
const isDisabled = computed(() => props.isDisabled ? 'yes' : 'no'));
</script>
<template>
<!-- Is this `isDisabled.value` or `props.isDisabled` ? -->
<h1>Disabled: {{ isDisabled }}</h1>
</template>What category should the rule belong to?
- Enforces code style (layout)
- Warns about a potential error (problem)
- Suggests an alternate way of doing something (suggestion)
- Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
<script setup lang="ts">
import {ref} from 'vue';
const props = defineProps<{foo: boolean}>();
// BAD
const foo = ref(false);
</script><script setup lang="ts">
import {computed} from 'vue';
const props = defineProps<{foo: boolean}>();
// BAD
const foo = computed(() => {
return props.foo ? 'yes' : 'no';
});
</script><script setup lang="ts">
defineProps<{ foo: 'yes' | 'no' }>();
// BAD
const foo = false;
</script>Additional context
It might be worthwhile to abstract #2172 and this proposal into a rule that can support either with options as they do seem fairly closely related.