Rule Proposal: `vue/top-level-function-style-in-script-setup`

[ntnyq]

Please describe what the rule should do:

Enforce a consistent style to declare functions in script setup.

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:

Option declaration:

<!-- Good -->
<script setup>
function foobar () {}
</script>

<!-- Bad -->
<script setup>
const foo = () => {}
const bar = function () {}
</script>

import { defineComponent } from 'vue'

<!-- Good -->
export default defineComponent ({
  setup() {
    function foobar () {}
    return {
      foobar
    }
  }
})

<!-- Bad -->
export default defineComponent ({
  setup() {
    const foo = () => {}
    const bar = function () {}
    return {
      foo,
      bar,
    }
  }
})

Additional context

Other options:

• arrow

Refs:

• antfu/eslint-plugin-antfu - top-level-function

[FloEdelmann]

1. Why enforce a specific function style? Just for consistency, or are there other reasons?
2. Why only for top-level functions?
3. Why only for Vue files, or more specifically only for <script setup> or inside the setup function?

Can the core func-style rule be used instead?