trivago/prettier-plugin-sort-imports

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

Tanimodori opened this issue · 2 comments

Your Environment

  • prettier-plugin-sort-imports: 4.1.1
  • Prettier version: 2.8.4
  • node version: 16.19.0
  • package manager: pnpm@7.16.1
  • 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

PHli37YJhC

<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 🥇

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

I suppose this is causing the problem.