The end of line ($) in a regex, is replaced by <script setup> in a Vue 3

[NNikulenkovSmapo]

Example:

<script setup>  
  const pattern = new RegExp(`/user/d+$`);  
</script>  
  
<template>  
  <div>{{pattern}}</div>  
</template>

After formatting, it becomes:

<script setup>  
  
  const pattern = new RegExp(`/user/d+<script setup>);  
</script>  
  
<template>  
  <div>{{ pattern }}</div>  
</template>

If I add $ to the end of the string separately:

const pattern = new RegExp(`/user/d+` + '$');  

When formatting, Prettier throws an error "SyntaxError: Unexpected closing tag 'script'. It may happen when the tag has already been closed by another tag." Without the plugin, all errors disappear.

.prettierrc

{  
  "plugins": ["@trivago/prettier-plugin-sort-imports"],  
  "importOrder": [],  
  "importOrderSeparation": true,  
  "importOrderSortSpecifiers": true  
}

Packages:

• prettier: 3.3.3,
• @trivago/prettier-plugin-sort-imports: 4.3.0

[adamDilger]

I think I have come across the same issue, PR here https://github.com/trivago/prettier-plugin-sort-imports/pull/283

[dongchengjie]

It seems to have nothing to do with regex and setup in Vue.

<script>
  import { clone } from "lodash-es";

  const foo = "$&";
</script>

It becomes:

<script>
  import { clone } from "lodash-es";


  const foo = "
    import { clone } from "lodash-es";

    const foo = "$&";
  ";
</script>