英文:
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 显示值,以确定其中的空白是否重要,
> - 并以一种方式包装标签,以避免添加或删除重要的空白。
希望这有所帮助
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论