Imagine this simplified code snippet:
<template>
<div>Your number is {{number}}</div>
</template>
// since script setup tag doesn't allow for exports this is allowed.
// I use it to create a pinja store that can be exported.
<script lang="ts">
export const x = 10;
</script>
<script setup lang="ts">
const props = defineProps({
nr: Number
})
const number = props.nr * x;
</script>
After linting
This is a valid syntax, except ESLint seems to automatically move the exported value into the <script setup> tag:
<script lang="ts">
// This stays empty
</script>
<script setup lang="ts">
export const x = 10; //this gives an error
const props = defineProps({
nr: Number
})
const number = props.nr * x;
</script>
which gives an error as in Vue3 you cannot export from <script setup>.
How can I disable ESlint for automatically moving this code around, and how can I disable for export errors in vuefiles?!
The culprit causing this headache was actually the @vue/eslint-config-airbnb extension. Removing this extension fixed the mentioned issue, although it allso removed some airbnb defined rules I would want to have kept.