Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prettier breaks vue2 syntax when using filters in template #16137

Open
lfire opened this issue Mar 6, 2024 · 2 comments
Open

Prettier breaks vue2 syntax when using filters in template #16137

lfire opened this issue Mar 6, 2024 · 2 comments
Labels
lang:vue Issues affecting Vue type:bug Issues identifying ugly output, or a defect in the program

Comments

@lfire
Copy link

lfire commented Mar 6, 2024

Prettier 3.2.5
Playground link

Input:

    <!-- error: use vue2 filter syntax with | -->
    <!-- the breakline between "{ will case the vue-loader error -->
    <h1
      :data-exposureval="{ module_id: 'recommend_service1',
        banner_id: 'bb132445', name: 'test',
        mmsurl: 'https://baidu.com', jumpurl: 'https://qq.com',
        docid: 'aa134154', title: 'test json',
        abtestid: 'adfasdf', abverid: '12341',
      } | jsonStringify"
    >
      {{ msg }}
    </h1>

Output:

    <!-- error: use vue2 filter syntax with | -->
    <!-- the breakline between "{ will case the vue-loader error -->
    <h1
      :data-exposureval="
        {
          module_id: 'recommend_service1',
          banner_id: 'bb132445',
          name: 'test',
          mmsurl: 'https://baidu.com',
          jumpurl: 'https://qq.com',
          docid: 'aa134154',
          title: 'test json',
          abtestid: 'adfasdf',
          abverid: '12341',
        } | jsonStringify
      "
    >
      {{ msg }}
    </h1>

Expected output:

    <!-- error: use vue2 filter syntax with | -->
    <!-- the breakline between "{ will case the vue-loader error -->
    <h1
      :data-exposureval="{
        module_id: 'recommend_service1',
        banner_id: 'bb132445',
        name: 'test',
        mmsurl: 'https://baidu.com',
        jumpurl: 'https://qq.com',
        docid: 'aa134154',
        title: 'test json',
        abtestid: 'adfasdf',
        abverid: '12341',
      } | jsonStringify"
    >
      {{ msg }}
    </h1>

Why?
Cause vue-loader to report an error:
image

@sosukesuzuki sosukesuzuki added type:bug Issues identifying ugly output, or a defect in the program lang:vue Issues affecting Vue labels Apr 6, 2024
@sosukesuzuki
Copy link
Member

@lfire Are there any related issues etc. on the Vue side?

@lfire
Copy link
Author

lfire commented Apr 21, 2024

@lfire Are there any related issues etc. on the Vue side?

No, not found yet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang:vue Issues affecting Vue type:bug Issues identifying ugly output, or a defect in the program
Projects
None yet
Development

No branches or pull requests

2 participants