eslint-plugin-vue
eslint-plugin-vue copied to clipboard
disallow importing defineProps etc
Please describe what the rule should do: It should warn if defineProps, defineEmits and similar are imported from vue (autofixable)
What category should the rule belong to?
[x] 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:
bad:
<script setup>
import { defineProps } from '@vue/runtime-dom';
defineProps<{}>();
</script>
good:
<script setup>
defineProps<{}>();
</script>
good:
<script setup>
import { defineProps } from 'my-lib';
defineProps('whatever');
Additional context
Useful when define* are added to eslint globals, there's no need to import them manually. If project was using imports and then dev switched to globals then autofix would just automatically remove unnecessary imports
Thank you for the rule proposal! That rule is sounds good to me.
Isn't this case solved by the rule https://eslint.org/docs/latest/rules/no-restricted-imports?
An example:
'no-restricted-imports': [
'error',
{
patterns: [
{
group: ['@vue/*', 'vue'],
importNames: ['defineProps', 'defineEmits'],
message: "'defineProps' and 'defineEmits' can be used within <script setup> without importing.",
},
],
},
]
Also, we now have the vue/prefer-import-from-vue rule, which would also warn about the import. So I think the rule suggested in this issue is not required anymore.
@FloEdelmann this isn't the case, defineProps and defineEmits are compiler macro's and should not be imported