如何阻止Visual Studio 2022格式化时为JS模板字符串重复加空格

方法一：修改VS2022内置格式化设置 #

• 打开VS2022，依次点击「工具」→「选项」→「文本编辑器」→「JavaScript/TypeScript」→「格式化」→「高级」
• 找到**「格式化模板字符串字面量」**（对应英文选项Format template string literals），取消勾选该选项
• 确认设置后，再次执行格式化操作，模板字符串内的缩进就不会被自动修改

方法二：使用Prettier自定义格式化规则 #

如果需要更灵活的格式化控制，可借助Prettier插件：

• 在VS2022扩展市场搜索并安装「Prettier - Code formatter」
• 在项目根目录创建.prettierrc配置文件，添加以下内容：

  {
    "templateLiteralIndentation": "preserve"
  }
  

• 回到VS2022设置，将JavaScript的默认格式化器改为「Prettier - Code formatter」
• 格式化时会保留模板字符串原有缩进，不会出现持续增加的问题

方法三：调整模板字符串写法（临时方案） #

如果不想修改设置或安装插件，可将模板字符串内容顶格编写，或使用String.raw避免自动缩进：

return String.raw`
<div class="text-nowrap">
    <i class="bi bi-pencil-square"></i>
    <i class="bi bi-trash"></i>
</div>
`;

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