trivago / prettier-plugin-sort-imports

A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.
Apache License 2.0
3.35k stars 130 forks source link

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

Open Tanimodori opened 1 year ago

Tanimodori commented 1 year ago

Your Environment

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

Tanimodori commented 1 year ago

https://github.com/trivago/prettier-plugin-sort-imports/blob/a3b98939207af6b854c0588b44ad9166d17c3c19/src/preprocessors/vue-preprocessor.ts#L8

I suppose this is causing the problem.

seanogdev commented 5 months ago

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

Caffeine19 commented 1 month ago

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