解决vscode 中保存后html自动格式化的问题

VSCode 是一款非常优秀的代码编辑器，它支持多种编程语言和插件，能够帮助开发者高效地编写代码。但是，在使用 VSCode 编写 HTML 文件时，有时保存后自动格式化会成为一个问题。在本文中，我们将介绍如何解决 VSCode 中保存后 HTML 自动格式化的问题。

1. 关闭自动保存功能

默认情况下，VSCode 在保存文件时会自动格式化 HTML 代码。如果你想避免这个问题，可以尝试关闭自动保存功能。在 VSCode 中，选择 File -> Auto Save，在下拉菜单中选择“off”即可关闭自动保存。这样，当你保存文件时，代码将不会被自动格式化。

2. 安装 HTML 插件

VSCode 有一些非官方 HTML 插件，可以帮助你解决自动格式化问题。其中 的插件是“Beautify”。这个插件可以格式化 HTML、CSS 和 JavaScript 代码，并且可以配置更多的格式选项。

要安装“Beautify”插件，可以通过以下步骤：

1. 打开 VSCode，并点击左侧的“Extensions”按钮。

2. 在搜索框中输入“Beautify”，然后选择“Beautify - Code formatter”进行安装。

3. 安装完毕后，重新启动 VSCode。

在安装“Beautify”插件后，“Ctrl + Shift + P”打开命令面板。在命令面板中输入“Format Document”，并选择“Beautify HTML”选项，VSCode 将按照插件的配置格式化 HTML 代码。

3. 使用配置文件

如果你不想安装额外的插件，你还可以使用配置文件来控制自动格式化。在 VSCode 中，你可以通过创建一个名为“.jsbeautifyrc”或“.jsbeautifyrc.json”的文件来配置 HTML 格式化选项。在此文件中，可以指定要应用的格式选项，例如缩进、间距、行末逗号等。

例如，以下是一个简单的 .jsbeautifyrc 文件：

{

  "html": {

    "indent_size": 2,

    "indent_char": " ",

    "indent_with_tabs": false,

    "eol": "

",

    "end_with_newline": true,

    "max_preserve_newlines": 1,

    "preserve_newlines": true,

    "wrap_line_length": 0,

    "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong"]

  }

}

这个文件中指定了一些 HTML 格式化选项，包括缩进大小、缩进字符、换行符等。如果你将此文件放置在你的项目根目录中，则 VSCode 将使用它自定义 HTML 格式化。

总结

在本文中，我们介绍了解决 VSCode 中保存后 HTML 自动格式化的三种方法。你可以关闭自动保存功能、安装 HTML 插件或者使用配置文件来实现自定义格式化。希望这篇文章能对你有所帮助。