VSCode中Prettier格式化合法Handlebars/HTML代码报错如何解决

• 替换格式化工具为djLint
  djLint对Handlebars语法的兼容性远高于当前版本Prettier，原生支持标签内嵌套{{#if}}这类块级指令的写法，不会抛出语法错误。
  VSCode配置步骤：
  1. 本地安装djLint依赖：pip install djlint
  2. VSCode插件市场搜索安装djLint官方插件
  3. 在编辑器设置中指定Handlebars类型文件的默认格式化工具：

  "[handlebars]": {
    "editor.defaultFormatter": "monosans.djlint"
  }
  

  可在项目根目录新增.djlintrc配置文件，自定义缩进长度、换行规则等格式化规则。
• 调整模板写法兼容Prettier
  不需要更换工具的前提下，可把块级条件改写成内联if助手的写法，符合Glimmer解析规则，Prettier可正常格式化：

  <div 
    onclick={{if myOnclick myOnclick}}
  >
    Click me!
  </div>
  

  带默认值、字符串拼接的属性也可以用相同写法实现：

  <div 
    class="base-btn {{if isActive 'active' 'disabled'}}"
  >
    Click me!
  </div>
  

• 局部跳过Prettier格式化
  仅个别文件存在这类写法的话，给对应代码块加上Prettier忽略注释即可：

  {{! prettier-ignore }}
  <div 
    {{#if myOnclick}}
      onclick="{{myOnclick}}"
    {{/if}}
  >
    Click me!
  </div>
  

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