VS Code中prettyhtml与prettier是否相同？为何settings.json无prettier配置？

1. prettyhtml 与 prettier 不是同一工具 #

• prettyhtml 是一款已废弃的HTML格式化工具，你在VS Code下拉列表中看到的「已废弃」标注也能佐证这一点。
• prettier 是一款通用型代码格式化工具，支持JS、CSS、HTML、Vue等多类文件，是当前前端生态中主流的格式化工具，Vetur 也将它设为多数模块的默认格式化工具。

2. 为什么 settings.json 中没有 prettier 相关配置 #

VS Code 的配置逻辑是未修改过的默认配置不会写入本地 settings.json：

• Vetur 内置了 prettier 的默认格式化规则，只要你没有手动修改过 prettier 的选项，这些默认配置就不会被保存到本地的 settings.json 里。
• 你看到的 js-beautify-html 和 prettyhtml 配置，是因为它们曾被手动修改过（或是旧版本遗留的配置），所以才会被记录在 settings.json 中。

如果需要自定义 prettier 的格式化规则，可直接在 settings.json 中添加配置，示例如下：

"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "printWidth": 120,
        "singleQuote": true,
        // 按需添加其他自定义规则
    },
    "js-beautify-html": {
        "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
        "printWidth": 100,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
    }
}

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