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.28k stars 129 forks source link

Unnecessary removal of `$$()` when using Vue Reactivity Transform macros #247

Open AnotiaWang opened 1 year ago

AnotiaWang commented 1 year ago

Your Environment

Describe the bug

I'm using Vue with the Reactivity Transform macros. There's a $$() macro to keep reactivity of refs when passing them to functions. However this plugin always tries to rename $$() to $(), which leads to Vue throwing an error $ can only be used as the initializer of a variable declaration.

To Reproduce

  1. Create a Vue 3 project. Please install the Reactivity Transform macros if you're using Vue 3.3+, or enable it in config if using Vue 3.2+.
  2. Write a component, and use it in another component. Specify a ref for the component.
    
    <template>
    <some-component ref="componentRef" />
    </template>
3. Save the file. `$$(componentRef)` is changed to `$(componentRef)`.
4. Run the project

<!-- IMPORTANT:
 - How to reproduce the issue
 - Steps to reproduce the issue

Be aware, the lack of reproducible steps the issue might cause your ticket to be closed.
-->

**Expected behavior**

<!-- A clear and concise description of what you expected to happen. -->

The `$$()` macros shouldn't be changed.

**Screenshots, code sample, etc**

<!-- If applicable, add screenshots to help explain your problem.  -->

**Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)**
.prettierrc.json
```json
{
  "arrowParens": "avoid",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^@/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

Error log

[plugin:commonjs] $ can only be used as the initializer of a variable declaration

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

adamDilger commented 7 months ago

I think this issue https://github.com/trivago/prettier-plugin-sort-imports/issues/276 is related, it's due to the $$ being a special replacement group in a call to "".replace(), which this plugin uses in pre-processing vue code.

I've submitted a fix PR which should address this issue