prettier / prettier

Prettier is an opinionated code formatter.
https://prettier.io
MIT License
49.28k stars 4.33k forks source link

Prettier breaks vue2 syntax when using filters in template #16137

Open lfire opened 7 months ago

lfire commented 7 months ago

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 commented 6 months ago

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

lfire commented 6 months ago

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

No, not found yet