VSCode的格式化缩进问题

Question

VSCode中的格式化能从图一配置成图二的样式吗？相当于标签下也缩进

Answer 1

默认情况下，VS Code 的 JavaScript 代码格式化工具（如 Prettier 或 ESLint）会忽略 HTML 标签中的缩进。如果你想让标签下也缩进，可以使用 VS Code 的设置来进行配置。

• 打开 VS Code 设置：使用快捷键 Ctrl + , 或者选择菜单中的“文件”->“首选项”->“设置”。

• 搜索 “Prettier”（如果你使用的是 Prettier）或 “ESLint”（如果你使用的是 ESLint）。

• 在设置中找到 “Prettier: HTMLWhitespaceSensitivity”（如果你使用的是 Prettier）或 “eslint-plugin-html”（如果你使用的是 ESLint）。

• 将 “Prettier: HTMLWhitespaceSensitivity” 设置为 “css” 或者 “strict”，将 “eslint-plugin-html” 中的 “indent” 选项设置为 “tab” 或者 “space”。

设置完毕后，保存文件时自动格式化代码时，标签下的内容也会按照设置进行缩进了。但是需要注意的是，这种方式可能会导致 HTML 的渲染出现问题，因此需要谨慎使用。