Answer a question

I am using handlebars as templeting engine for my project. I am using prettier for formatting but during formatting hbs file i am getting error as SyntaxError: Handlebars partials are not supported . I tried to find solution on internet but failed.

Here is complete log of error:

SyntaxError: Handlebars partials are not supported:

(error occurred in 'an unknown module' @ line 2 : column 2) (2:2)

1 |

2 | {{> header}}

|  ^^^^^^^^^^^^

3 |

4 |

5 |

at n (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode

9.0.0\node_modules\prettier\parser-glimmer.js:1:1320)

at Object.parse (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode

9.0.0\node_modules\prettier\parser-glimmer.js:1:183895)

at Object.parse$a [as parse] (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode

9.0.0\node_modules\prettier\index.js:12513:19)

My code is:

{{> header}}
     <header>
       <nav class="navbar">
         <a href="#" style="display: inline-block">
           <object
             data="./images/background.png"
             width="100"
             height="80"
             style="pointer-events: none"
           ></object>
         </a>
         <div class="navbar_search">
           <input
             type="text"
             name="search-bar"
             id="search"
             placeholder="Search..."
             maxlength="15"
           />
           <a href=""
             ><i data-feather="search" class="navbar_search-icon"></i
           ></a>
         </div>
         <div class="navbar_icons">
           <a href=""><i data-feather="bell"></i></a>
           <a href=""><i data-feather="user"></i></a>
           <a href=""><i data-feather="settings"></i></a>
         </div>
       </nav>
     </header>
     <br></br>
      <h1 class="heading_pink" align = "center">WHAT TO DO AFTER 12TH?</h1>
      <hr  color = "black">
       <section class="chain">
       <ul class="chain_list">
         <li class="chain_list-item">TIP 1</li>
         <li class="chain_list-item">TIP 2</li>
         <li class="chain_list-item">TIP 3</li>
         <li class="chain_list-item">TIP 4</li>
         <li class="chain_list-item">TIP 5</li>
          <li class="chain_list-item">TIP 6</li>
           <li class="chain_list-item">TIP 7</li>
       </ul>
     </section>
    {{> footer}}

Answers

You can use a .prettierignore file to ignore templates.

# if your files are in a templates folder for example
# add this folder to the .prettierignore
templates

On the same docs page is also a section about handlebars. If you prefer to ignore only parts of your file you can follow this.

{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This
      is  =  "also preserved as is"
    />
  {{/my-crazy-component}}
</div>