如何在VS Code中用Prettier实现Vue组件属性每行一个？

我在VS Code中使用Prettier扩展版本9.5.0处理Vue代码，现有代码：

<q-select label="Fruits" :options="['apple', 'mango']" />

希望保存时自动格式化为每个属性单独一行：

<q-select 
label="Fruits" 
:options="['apple', 'mango']"
/>

我按照Prettier 2.6.0的发布说明，在VS Code的settings.json中配置了singleAttributePerLine:true，但VS Code不识别该配置，扩展设置菜单里也找不到这个选项，放到.editorconfig里也无效。我的settings.json配置如下：

"editor.codeActionsOnSave": ["source.fixAll.eslint"],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.singleAttributePerLine":true,

以下是针对该问题的排查和解决步骤：

• 确认Prettier核心版本：VS Code的Prettier扩展版本（9.5.0）和内置的Prettier核心版本是两个概念。打开VS Code命令面板（Ctrl+Shift+P），运行Prettier: Show Version，确保核心版本≥2.6.0（singleAttributePerLine是这个版本开始支持的）。如果版本不够，尝试更新Prettier扩展到最新版。

• 限定Vue文件的格式化配置：将Prettier的配置放在Vue文件的专属设置中，避免全局配置不生效。修改settings.json：

  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleAttributePerLine": true
  }
  

• 排查ESLint冲突：你开启了source.fixAll.eslint，如果ESLint中有强制属性单行的规则，会覆盖Prettier的格式化结果。解决方法：

  1. 安装eslint-config-prettier：

     npm install eslint-config-prettier --save-dev
     

  2. 在你的ESLint配置文件（如.eslintrc.json）中引入该配置，禁用冲突规则：

     {
       "extends": [
         // 保留你原有的扩展，比如"plugin:vue/vue3-recommended"
         "prettier"
       ]
     }
     

• 使用本地Prettier配置文件：在项目根目录创建.prettierrc文件，写入配置，本地配置优先级高于VS Code设置：

  {
    "singleAttributePerLine": true
  }
  

• 强制指定格式化工具：打开Vue文件，右键选择「格式化文档方式」→「配置默认格式化程序」，确认选择的是esbenp.prettier-vscode，避免其他工具干扰。

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