Cannot sort <script setup> if multiple <script> are provided in vue sfc

[Tanimodori]

Your Environment

• prettier-plugin-sort-imports: 4.1.1
• Prettier version: 2.8.4
• node version: 16.19.0
• package manager: [email protected]
• IDE: VScode
• prettier-plugin-sort-imports: 4.1.1
• OS: Windows 11

Describe the bug

If multiple <script> blocks are provided in vue sfc, the <script setup> block will be ignored where imports inside are not sorted while other prettier functions still work.

It is common that both <script> and <script setup> are required in the same sfc (e.g. you need to use defineComponent to define the name of the component, or exports something from sfc).

To Reproduce

1. git clone https://github.com/Tanimodori/prettier-import-vue-repro.git
2. cd prettier-import-vue-repro
3. pnpm i
4. pnpm format
5. inspect diff of src/App.vue. The imports in <script setup> are not sorted.

Expected behavior

The imports in <script setup> should also be sorted.

Screenshots, code sample, etc

<script lang="ts">
import { dummy } from './dummy'
import { ref } from 'vue'

export const foo = ref(dummy)
</script>

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import { computed } from 'vue'

const bar = computed(() => foo.value)
</script>

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

Error log

N/A

Contribute to @trivago/prettier-plugin-sort-imports

• I'm willing to fix this bug 🥇

[Tanimodori]

prettier-plugin-sort-imports/src/preprocessors/vue-preprocessor.ts

Line 8 in a3b9893

const content = (descriptor.script ?? descriptor.scriptSetup)?.content;

I suppose this is causing the problem.

[seanogdev]

FWiW, in Vue 3.3+ we now have defineOptions() which can now define these global properies on the components

[Caffeine19]

FWiW, in Vue 3.3+ we now have defineOptions() which can now define these global properies on the components

<script lang="ts">
/** 页脚 */
export default {};
</script>
<script setup lang="ts"></script>

But I need to add a description for the components. The defineOptions didn't help with this