Prettier格式化.vue文件时i18n相关属性排版不一致如何解决

问题诱因 #

该问题由Prettier对Vue模板内属性表达式的换行判断逻辑触发，核心原因有两个：

1. Prettier计算属性长度时会将当前节点的缩进空格数一同计入长度阈值，并非只统计属性本身的字符数。当$t()包裹的i18n key长度加上缩进长度，触发了Prettier内置的表达式换行规则时，就会将属性值拆分为多行，该规则的优先级高于你设置的全局printWidth参数，因此单独调大printWidth不会生效。
2. 若你配置的htmlWhitespaceSensitivity参数为strict，Prettier会严格统计模板内的所有空格占用，会进一步提高换行触发的概率。

解决方法 #

• 调整项目根目录下Prettier配置文件（.prettierrc、prettier.config.js等）的相关参数：

{
  "printWidth": 120,
  "htmlWhitespaceSensitivity": "ignore",
  "bracketSameLine": true,
  "singleAttributePerLine": false
}

htmlWhitespaceSensitivity设为ignore后，会忽略Vue模板内无意义的缩进空格统计；bracketSameLine设为true会强制$t()的括号和内部表达式同行，避免单独拆行。

• 若仍有超长i18n key的属性被强制换行，可以在对应属性上方加单行忽略注释，跳过Prettier格式化：

<!-- prettier-ignore -->
:label="$t('watercourseStructureProtocol.generalWaterbodyInfo.waterbodySamplingLocation')"

• 打开VSCode设置，搜索Prettier: Use Editor Config和Prettier: Config Path，确认插件优先读取项目本地的Prettier配置，避免全局配置和本地配置冲突导致格式化效果不一致。

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