VS Code中使用Prettier解决Vue文件闭合括号单独换行问题

你不能在[vue]配置项下添加参数来控制该格式化行为，该配置块仅支持编辑器针对Vue文件的通用行为配置（比如默认格式化器、缩进大小等），不支持传递Prettier的格式化规则。具体解决方案如下：

解决方案 #

1. 使用正确的Prettier配置项

Prettier 2.4及以上版本已废弃jsxBracketSameLine，替换为通用配置bracketSameLine，该配置同时适配JSX、Vue模板等场景，设置为true即可禁止多属性元素的闭合括号单独换行。

2. 解决VS Code Prettier扩展兼容问题

扩展自带的Prettier版本落后于官方版本，会导致新配置不生效，按以下步骤处理即可：

• 在项目本地安装最新版Prettier：

npm install prettier --save-dev

• 在项目根目录新建.prettierrc.json配置文件，写入配置：

{
  "bracketSameLine": true
}

Prettier扩展会优先读取项目本地的版本和配置，不会再出现配置不兼容的问题。

3. 验证生效

配置完成后重启VS Code，打开Vue文件触发格式化，即可看到闭合括号已跟随最后一个属性放在同一行，不会单独换行。

备选方案（搭配ESLint使用）

如果团队已经在使用ESLint校验Vue代码，也可以直接用eslint-plugin-vue的规则强制控制闭合括号换行行为，不需要依赖Prettier配置：
在你的ESLint配置文件中添加规则：

{
  "rules": {
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }]
  }
}

开启ESLint自动修复后，格式化时会自动按照规则调整闭合括号位置。

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