如何在VS Code中配置HTML/Vue文件自动格式化实现全元素换行

如何在VS Code中设置自动格式化，让HTML或Vue文件里的每个属性、嵌套元素、标签及闭合括号都换行？当前效果与期望效果如图所示（）。已安装Vue官方格式化工具（Vue.volar）与Prettier，但未找到完全适配的配置方案，想确认是否可行及对应的配置方法。

当前默认格式化工具配置：

{
    "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

完整settings.json配置：

{
    "security.workspace.trust.untrustedFiles": "open",
    "files.autoSave": "afterDelay",
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,
    "files.associations": {
        "*.css": "tailwindcss",
        "*.vue": "vue"
    },
    "code-runner.clearPreviousOutput": true,
    "code-runner.showExecutionMessage": false,
    "launch": {
        "configurations": []
    },
    "editor.renderWhitespace": "none",
    "editor.renderLineHighlight": "none",
    "editor.minimap.maxColumn": 100,
    "editor.minimap.renderCharacters": false,
    "editor.guides.indentation": false,
    "editor.cursorBlinking": "solid",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.tabSize": 4,
    "editor.detectIndentation": false,
    "editor.insertSpaces": false,
    "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
    "editor.fontSize": 18,
    "editor.formatOnSave": true,
    "editor.tabCompletion": "on",
    "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
    },
    "prettier.tabWidth": 4,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "prettier.useTabs": true,
    "languageStylus.useSeparator": false,
    "html.format.wrapAttributes": "force-expand-multiline",
    "editor.lineHeight": 2,
    "js/ts.implicitProjectConfig.checkJs": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.stickyScroll.enabled": false,
    "prettier.semi": false,
    "window.menuBarVisibility": "compact",
    "breadcrumbs.enabled": false,
    "editor.minimap.showSlider": "always",
    "vue.autoInsert.dotValue": true,
    "chat.commandCenter.enabled": false,
    "workbench.layoutControl.enabled": false,
    "workbench.editor.enablePreview": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "remote.extensionKind": {
        "pub.name": [
            "ui"
        ]
    },
    "amazonQ.telemetry": false,
    "workbench.startupEditor": "none",
    "amazonQ.suppressPrompts": {
        "amazonQChatDisclaimer": true
    },
    "workbench.iconTheme": "material-icon-theme",
    "explorer.compactFolders": false,
    "prettier.printWidth": 100,
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "emmet.triggerExpansionOnTab": true,
    "tailwindCSS.classAttributes": [
        "class",
        "ui"
    ],
    "tailwindCSS.experimental.classRegex": [
        [
            "ui:\\s*{([^)]*)\\s*}",
            "('|\"|`)([^']*)('|\"|`)"
        ]
    ],
    "editor.snippetSuggestions": "top",
    "vue.inlayHints.missingProps": true,
    "vue.inlayHints.destructuredProps": true,
    "workbench.secondarySideBar.defaultVisibility": "hidden",
    "amazonQ.workspaceIndex": true,
    "amazonQ.workspaceIndexUseGPU": true,
    "workbench.colorCustomizations": {
        "editor.background": "#1f1f1f"
    }
}

测试代码：

<h3>
    You’ve successfully created a project with
    <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
    <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
</h3>

一、HTML文件（使用Prettier） #

要实现每个属性单独换行，需调整Prettier配置强制触发换行：

1. 在VS Code的settings.json中修改Prettier相关项：

{
    "prettier.printWidth": 1, // 极小打印宽度强制所有属性换行
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.tabWidth": 4,
    "prettier.useTabs": true,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

保留现有"html.format.wrapAttributes": "force-expand-multiline"确保VS Code自带格式化不冲突。

二、Vue文件（使用Volar/Prettier） #

方案1：用Prettier格式化Vue文件 #

1. 项目根目录创建.prettierrc.js配置文件：

module.exports = {
    tabWidth: 4,
    useTabs: true,
    printWidth: 1,
    htmlWhitespaceSensitivity: 'ignore',
    plugins: ['prettier-plugin-vue'],
    vueAttributesPerLine: {
        singleline: 1, // 单行标签最多1个属性，超过则换行
        multiline: 1  // 多行标签每个属性单独占一行
    }
}

2. 修改VS Code设置，将Vue默认格式化器改为Prettier：

{
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

方案2：用Volar自带格式化 #

若坚持使用Volar，在VS Codesettings.json中添加：

{
    "vue.format.options": {
        "wrapAttributes": "force-expand-multiline",
        "attributesPerLine": 1
    }
}

三、效果验证 #

应用配置后，测试代码会被格式化为：

<h3>
    You’ve successfully created a project with
    <a
        href="https://vite.dev/"
        target="_blank"
        rel="noopener"
    >
        Vite
    </a> +
    <a
        href="https://vuejs.org/"
        target="_blank"
        rel="noopener"
    >
        Vue 3
    </a>. What's next?
</h3>

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