VSCode中JS/JSX保存自动格式化配置（Prettier无效）

要让Prettier把JSX元素的每个属性都单独换行，你需要调整它的配置，同时确保VSCode的格式化设置正确：

1. 确认VSCode基础设置 #

打开VSCode的设置（快捷键Ctrl+,/Cmd+,），搜索并设置以下选项：

• 开启「保存时格式化」：将editor.formatOnSave设置为true
• 把Prettier设为默认格式化器：将editor.defaultFormatter设置为esbenp.prettier-vscode

2. 配置Prettier强制拆分JSX属性 #

在项目根目录创建或修改 .prettierrc（或 .prettierrc.json）文件，添加以下配置：

{
  "singleAttributePerLine": true,
  "jsxBracketSameLine": false,
  "printWidth": 80,
  "jsxSingleQuote": true
}

• singleAttributePerLine：核心配置，强制每个JSX属性单独占一行
• jsxBracketSameLine：确保按钮闭合的>单独换行，和目标格式匹配
• 其余配置可根据你的代码风格需求调整

如果不想用项目配置文件，也可以在VSCode设置中直接搜索prettier.singleAttributePerLine并勾选，同时将prettier.jsxBracketSameLine设为false。

3. 排查工具冲突 #

如果还是没生效，检查是否有其他工具干扰：

• 若使用ESLint，确保安装eslint-config-prettier禁用和Prettier冲突的ESLint规则
• 检查是否有其他格式化插件（比如Beautify）被设为默认格式化器，确保只有Prettier处理JS/JSX文件

完成以上步骤后，保存你的JSX文件，就能得到预期的格式化效果。

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