Skip to content

[Vue] Don't format custom blocks #5448

@coxy

Description

@coxy

Prettier 1.15.2
Playground link

--parser vue

Input:

<template>
  <p>Templates are not formatted yet ...
    </p>
</template>

<i18n>
  en:
    one: One
    two: Two
</i18n>

<script>
let Prettier = format => { your.js('though') }
</script>

<style>
.and { css: too !important }
</style>

Output:

<template>
  <p>Templates are not formatted yet ...</p>
</template>

<i18n> en: one: One two: Two </i18n>

<script>
let Prettier = format => {
  your.js("though");
};
</script>

<style>
.and {
  css: too !important;
}
</style>

Expected behavior:
In my project I'm using https://kazupon.github.io/vue-i18n/guide/sfc.html#yaml-loading with a custom <i18n> block in the component file for translations. Here the format is yaml and prettier is formatting it incorrectly (I assume it treats it as plaintext not yaml).

More generally, vue-loader has support for any type of custom block https://vue-loader.vuejs.org/guide/custom-blocks.html#example - so my suggestion would be to ignore these blocks unless their type can be accurately identified (vue-loader uses the 'lang' attribute for this).

Perhaps ideally something like:

<myBlock lang="yaml">
  yaml: Some text
</myBlock>

=> Prettier recognises the type and formats as yaml

<myBlock>
  Some text
      With a weird format
</myBlock>

=> Prettier doesn't know what type this block is and so ignores it and leaves formatting exactly as given in input

Metadata

Metadata

Assignees

No one assigned

    Labels

    lang:vueIssues affecting Vuelocked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.priority:highCode is printed in a way that alters the AST, breaks syntax, or is a significant regression. Urgent!status:has prIssues with an accompanying pull request. These issues will probably be fixed soon!

    Type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions