vscode vue 代码格式化

### 推荐的扩展程序

为了更好地支持 Vue 项目中的代码格式化，建议安装以下 Visual Studio Code 扩展程序：

- **ESLint**: 提供 JavaScript 和 Vue 文件的静态分析和错误检测功能[^1]。
- **Prettier - Code formatter**: 自动美化多种编程语言的代码风格，包括 HTML、CSS 及 JavaScript 等。
- **Vetur**: 集成对 Vue.js 的语法高亮显示、Emmet 支持以及智能感知等功能。

这些插件可以协同工作来帮助开发者保持一致性的编码标准并提高开发效率。

### 设置配置文件

对于 `.vue` 文件中 ESLint 格式化的失效问题，可以在 `settings.json` 中做适当调整。具体来说是在 `"eslint.validate"` 数组内增加对 HTML 类型的支持，这样即使编辑器将 `.vue` 文件当作 HTML 来处理也能正常触发 ESLint 规则验证[^2]:

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "html", // 添加此项以确保 .vue 文件被正确解析
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}

此更改使得 ESLint 能够更全面地覆盖到不同类型的源码片段上执行自动修复操作。

### 解决常见格式化异常

当遇到 `<span>` 或其他标签内部结构被打乱的情况时，这可能是由于默认格式化工具有限制所引起的。为了避免这种情况发生，可以通过修改 Vetur 插件的相关选项来进行优化[^3]。尝试向用户的全局或工作区级别的 `settings.json` 加入下面的内容:

{
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }
}

上述设置指定了使用 js-beautify 工具作为 HTML 片段的主要格式化引擎，并通过自定义参数控制属性换行方式，从而达到更好的视觉效果；同时也设定了在打开 `.vue` 文件时优先选用 Vetur 进行整体格式化处理。