如何在Vue中去除数字属性的引号？

在Vue模板里给组件设置数字类型Prop时，Prettier会自动给数字值加上引号，导致控制台抛出类型不匹配警告；手动移除引号后，格式化文档时引号又会恢复。针对这个问题，有以下几种可行方案：

方案1：用v-bind绑定数字值 #

Vue中带冒号的v-bind属性会被当作JavaScript表达式解析，直接写数字就能被正确识别为数字类型，Prettier也不会给这类值添加引号。修改后的代码如下：

<star-rating
  class="star"
  :show-rating="false"
  :star-size="15"
  active-color="#f54748"
  :increment="1"
  :glow="2"
  :active-on-click="true"
  v-model:rating="averageRatings[product.id]"
  :read-only="true"
></star-rating>

这是最规范的解决方式，完全契合Vue语法，不会和Prettier的规则冲突。

方案2：使用Prettier专用插件处理 #

安装prettier-plugin-vue-numeric-prop插件，它能自动识别Vue模板中可转换为数字的属性值，移除多余引号。

1. 安装插件：

npm install prettier-plugin-vue-numeric-prop --save-dev

2. 在Prettier配置文件（如.prettierrc）中启用插件：

{
  "plugins": ["prettier-plugin-vue-numeric-prop"]
}

之后格式化代码时，插件会自动处理数字属性的引号问题。

方案3：调整Prettier全局引号配置（不推荐） #

通过修改quoteProps配置来调整属性引号规则，但这是全局设置，可能影响其他场景的属性格式化，容易引发新问题。示例配置：

{
  "quoteProps": "as-needed"
}

该配置会让Prettier仅在必要时给属性值加引号，但对Vue模板的支持不够精准，所以不建议优先使用。

内容的提问来源于stack exchange，提问作者coochie