如何配置prettier以在Vue.js模板语法中以特定方式运行?

huangapple go评论56阅读模式
英文:

How do I configure prettier to behave in a specific way for Vue.js template syntax?

问题

我想自定义Prettier中的特定行为。我想知道是否有一种快速的方法来实现以下解决方案,而无需编写自己的解析器。

我的 .prettierrc.js

module.exports = {
   $schema: 'https://json.schemastore.org/prettierrc',
   semi: true,
   tabWidth: 3,
   singleQuote: true,
   printWidth: 100,
   trailingComma: 'es5',
   bracketSpacing: true,
   bracketSameLine: false,
   arrowParens: 'always',
   vueIndentScriptAndStyle: false,
   singleAttributePerLine: true,
};

我想要格式化的Vue模板(HTML)

<template>
   <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a>
</template>

当前结果

<template>
   <a
      href="https://vitejs.dev/"
      target="_blank"
      rel="noopener"
      >Vite</a
   >
</template>

期望结果

<template>
   <a
      href="https://vitejs.dev/"
      target="_blank"
      rel="noopener"
   >
      Vite
   </a>
</template>

是否有办法实现上述期望的结果?

英文:

I want to customize a specific behavior in Prettier. I'm wondering if there's a quick way to implement below solution without having to write my own parser.

My .prettierrc.js:

module.exports = {
   $schema: 'https://json.schemastore.org/prettierrc',
   semi: true,
   tabWidth: 3,
   singleQuote: true,
   printWidth: 100,
   trailingComma: 'es5',
   bracketSpacing: true,
   bracketSameLine: false,
   arrowParens: 'always',
   vueIndentScriptAndStyle: false,
   singleAttributePerLine: true,
};

Vue template (HTML) that I want to format:

<template>
   <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a>
</template>

Current outcome:

<template>
   <a
      href="https://vitejs.dev/"
      target="_blank"
      rel="noopener"
      >Vite</a
   >
</template>

Desired outcome:

<template>
   <a
      href="https://vitejs.dev/"
      target="_blank"
      rel="noopener"
   >
      Vite
   </a>
</template>

Is there a way to achieve above desired outcome?

答案1

得分: 2

你可能正在寻找HTML 空白敏感性设置

https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting:
> 正如你在日常的 HTML 工作中可能会注意到的,以下两种情况
> 不会产生相同的输出:
>
> | | html | output |
> |----------------|----------------|------------|
> | 带有空格 | 1<b> 2 </b>3 | 1 2 3 |
> | 没有空格 | 1<b>2</b>3 | 123 |
>
> 因此,我们不能安全地格式化
>
>

<a href="https://prettier.io/">Prettier is an opinionated code formatter.</a>

> 为

<a href="https://prettier.io/">
  Prettier is an opinionated code formatter.
</a>

>
> 因为这可能会修改在浏览器中显示的输出。
>
> 而不是破坏您的代码或什么都不做,我们引入了
> 空白敏感格式化,它:
>
> - 遵循每个元素的默认 CSS 显示值,以确定其中的空白是否重要,
> - 并以一种方式包装标签,以避免添加或删除重要的空白。

希望这有所帮助 如何配置prettier以在Vue.js模板语法中以特定方式运行?

英文:

You are probably looking for the HTML Whitespace Sensitivity Setting.

https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting:
> As you may notice during daily HTML works, the following two cases
> won't produce the same output:
>
> | | html | output |
> |----------------|----------------|------------|
> | with spaces | 1<b> 2 </b>3 | 1 2 3 |
> | without spaces | 1<b>2</b>3 | 123 |
>
> For this reason, we cannot safely format
>
>

<a href="https://prettier.io/">Prettier is an opinionated code formatter.</a>

> into

<a href="https://prettier.io/">
  Prettier is an opinionated code formatter.
</a>

>
> since it may modify the displayed output in the browser.
>
> Instead of breaking your code or just doing nothing, we introduce
> whitespace-sensitive formatting, which:
>
> - follows the default CSS display value for every element to identify if
> the whitespace inside it is significant,
> - and wraps the tags in such a
> way as to avoid adding or removing significant whitespace.

I hope this helps 如何配置prettier以在Vue.js模板语法中以特定方式运行?

huangapple
  • 本文由 发表于 2023年5月28日 02:49:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76348508.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定