如何解决使用Vetur更好地格式化HTML标签?
我注意到Vetur现在使用prettier
来格式化Vue文件的HTML部分。我并不总是了解它的格式:
<b-button v-else pill variant="primary" @click="submit"
>Finish</b-button
>
如果我仅添加一个class
元素,它将变为:
<b-button
v-else
pill
class="pb-2"
variant="primary"
@click="submit"
>Finish</b-button
>
但是,由于我的编辑器的宽度超过100个字符,因此将其格式设置为:
<b-button v-else pill class="pb-2" variant="primary" @click="submit">
Finish
</b-button>
我查看了Prettier的options,但没有发现与此相关的任何相关配置设置。
如何告诉我的vscode格式化程序根据需要格式化HTML标签?
在我的.prettierrc.json
中,我有:
{
"singleQuote": true,"arrowParens": "avoid","jsxBracketSameLine": true
}
解决方法
更漂亮为您提供两种选择:
- printWidth为行长https://prettier.io/docs/en/options.html#print-width
- htmlWhitespaceSensitivity用于处理括号https://prettier.io/docs/en/options.html#html-whitespace-sensitivity
要获得所需的输出,您可能需要:
{
"printWidth": 100,"htmlWhitespaceSensitivity": "ignore"
}
默认情况下,htmlWhitespaceSensivity
设置为'css'
,因为:
在日常HTML工作中您可能会注意到,以下两种情况不会产生相同的输出:
1 2 3 => 1 2 3
1 2 3 => 123
之所以会这样,是因为内联元素中的空白很重要。
来自:https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。