vuejs自定义组件属性的Eslint换行问题，格式化以后为什么又恢复到之前的格式？

Question

使用VSCode开发时，关于Eslint的vue/max-attributes-per-line规则，Eslint会提示格式有问题，实际保存时会自动整理格式两次，第二次会变回修改之前有问题的格式。（项目在创建时是有prettier的，发现该问题后以删除，仍然未解决）

<!-- 会报错的格式 -->
<a-tree v-model:expanded-keys="expandedKeys" v-model:selectedKeys="selectedKeys" :load-data="onLoadData"
  :tree-data="treeData" @expand="onExpand">
</a-tree>

<!-- 第一次整理瞬间的格式（也是期望的格式） -->
<a-tree
  v-model:expanded-keys="expandedKeys"
  v-model:selectedKeys="selectedKeys"
  :load-data="onLoadData"
  :tree-data="treeData"
  @expand="onExpand"
></a-tree>

以下是我的eslint.config.js配置

import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'

export default [
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  {
    rules: {
      'comma-dangle': ['error', 'always-multiline'],
      'no-tabs': 'error',
      'no-trailing-spaces': 'error',
      'no-undef': 'off',
      'no-unused-vars': 'warn',
      semi: ['error', 'never'],
      'vue/multi-word-component-names': [
        'error',
        {
          ignores: ['index'],
        },
      ],
      'vue/max-attributes-per-line': [
        'error',
        {
          singleline: {
            max: 4,
          },
          multiline: {
            max: 1,
          },
        },
      ],
    },
  },
]

以下是package.json

{
  "name": "vite-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    // ...
  },
  "dependencies": {
    // ...
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "less": "^4.2.1",
    "unplugin-auto-import": "^0.19.0",
    "unplugin-vue-components": "^0.28.0",
    "vite": "^6.0.5",
    "vite-plugin-vue-devtools": "^7.6.8"
  }
}

以下是删除前的prettierrc.json文件

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

现在初步怀疑是与prettier冲突导致。但是已在项目中删除prettier和prettierrc.json，并且VSCode组件中也以删除prettier组件，仍然未解决。同一台设备上的VSCode打开其他项目并不会有这个问题（Eslint版本也不一样）。
现在希望保存后能是一个属性一行的格式，还望大神指点一二

Answer 1

我遇到过类似的问题，是由于 VS Code 用户级配置文件里指定了格式化，然后项目里也有格式化，所以格式化了两次，并且第二次是与 Lint 规则冲突的那一种。

我的用户级配置(C:\Users\知名喷子\AppData\Roaming\Code\User\settings.json，可以在设置面板搜索 “settings”，然后点击 Edit in settings.json访问它)：

{
    "[vue]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
...

我解决问题的方案：
在工作区配置文件(.vscode\settings.json，项目里没有这个文件夹的话，可以自建也可以在设置里随便整点工作区设置，然后项目里就会有这个文件)中添加：

// 我的 VS Code 似乎支持 json5，所以可以加注释
  "[vue]": {
    // "editor.formatOnSave": true,
    // "editor.defaultFormatter": "vscode.typescript-language-features"
  }
}

然后重启 VS Code 就完事了。