VS Code按Ctrl+S保存时EJS语法自动插入空格错乱如何解决

问题本质 #

VS Code内置HTML格式化工具没有适配EJS模板语法规则，会把EJS输出标签<%-识别为非法HTML字符序列，格式化执行时自动在<%和-之间插入空格，直接破坏EJS语法逻辑，导致服务端渲染输出失败。

可落地解决方法 #

• 更换EJS文件的默认格式化器
  不要用内置HTML格式化器处理.ejs后缀文件，安装支持EJS语法的格式化扩展，在VS Code设置中右键任意.ejs文件，选择「使用...格式化文档」-「配置默认格式化程序」，选中安装的EJS专属格式化器即可，这类工具原生识别EJS标签规则，不会错误插入空格。
• 修改内置HTML格式化器的忽略规则
  如果不想更换格式化器，可以在VS Code的settings.json中添加如下配置，让格式化器跳过EJS标签相关内容的处理：

  {
    "html.format.unformatted": "%",
    "html.format.contentUnformatted": "script,style"
  }
  

  配置生效后，格式化器不会调整包含%字符的EJS标签结构，也不会重新排版script、style标签内的内容，从规则层面避免语法被篡改。
• 调整变量传递写法彻底规避冲突
  不推荐直接在script标签内用EJS输出JS变量，可改为通过DOM的data属性挂载服务端数据，前端JS再从节点上读取解析，完全避开格式化器对script内EJS语法的处理：
  易被格式化破坏的原始写法：

  <script>
    const user = <%- JSON.stringify(user) %>
  </script>
  

  替换为无冲突写法：

  <div id="app" data-user="<%- JSON.stringify(user) %>"></div>
  <script>
    const user = JSON.parse(document.getElementById('app').dataset.user)
  </script>
  

  这种写法除了解决格式化错乱问题，还能降低XSS注入风险，稳定性更高。
• 添加代码块级格式化忽略标记
  对于少量需要保留原始写法的代码块，可以在代码前添加对应格式化器支持的忽略注释，指定目标代码块跳过格式化处理，不会影响文件其他部分的正常格式化。

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