在 Vue 单文件组件中,使用 Prettier 使多属性元素每个属性换行书写

Vue 风格指南 强烈推荐

多个 attribute 的元素应该分多行撰写,每个 attribute 一行。

bad:

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo" />

<MyComponent foo="a" bar="b" baz="c" />

good:

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
/>

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

在使用 Prettier 进行代码格式化时,将根据 printWidth 属性设置的值来决定是否换行。

默认的 printWidth 值为 80,当行位置超过此值时,代码会自动换行。然而,这导致部分元素的 attribute 被换行书写,而其他元素保持不变,使得换行条件不一致,从而影响了代码的美观度:

<img
  id="logo"
  ref="imgref"
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
/>

<MyComponent foo="a" bar="b" baz="c" />

修改 .prettierrc.json 的配置,增加 singleAttributePerLine 选项,如下:

{
  "singleAttributePerLine": true
}

该选项将强制在 HTML、Vue 和 JSX 中每行执行一个属性。

🎉 漂亮

<template>
  <img
    src="https://vuejs.org/images/logo.png"
    alt="Vue Logo"
    title="Vue Logo"
  />

  <img
    src="https://vuejs.org/images/logo.png"
    alt="Vue Logo"
  />
</template>
  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
云原生是一种软件开发和部署的方法论,旨在利用云计算的优势,实现更快、更灵活、更可靠的部署和运行。云原生的核心是容器化和微服务化,通过将应用程序打包成容器,使其更易于部署、扩展和管理。同时,云原生也强调自动化、可观察性、故障恢复等方面的技术和实践。 云平台是云计算的基础设施,提供了计算、存储、网络等基础服务。云平台可以提供虚拟机、容器、对象存储等不同的计算和存储资源,以满足不同的应用需求。云平台也提供了自动化的管理服务,如负载均衡、弹性伸缩、安全等,帮助用户快速构建和管理应用程序。 Kubernetes(简称K8s)是一种容器编排平台,提供了容器编排、自动化部署、扩展、负载均衡等功能。K8s可以自动管理应用程序的容器,使其更易于部署、扩展和管理。K8s也提供了自动化的管理服务,如服务发现、故障恢复、滚动升级等,帮助用户快速构建和管理应用程序。 微服务是一种架构风格,将应用程序划分成小型服务,每个服务独立部署和扩展。微服务架构强调松耦合、高内聚、自治性等特点,使得应用程序更易于扩展和维护。微服务也可以利用容器技术进行部署和管理,实现更高效的运维。 综上所述,云原生、云平台、K8s和微服务都是云计算的重要概念和技术,它们之间存在密切的关联。云平台提供了基础设施和自动化管理服务,支持云原生应用程序的部署和运行;K8s提供了容器编排和自动化管理服务,支持微服务架构的部署和运行;云原生、云平台、K8s和微服务共同构成了现代化的云计算架构,使得企业可以更加敏捷、高效地开发和运营应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值