How to solve handlebar partials are not supported in VS Code? - express

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">
<i data-feather="bell"></i>
<i data-feather="user"></i>
<i data-feather="settings"></i>
</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}}

Answer 1

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>

Answer 2

Old question but ran into this and thought was worth posting here, if you are using handlebars with prettier, configure your .hbs files to use the Glimmer parser in your .prettierrc file, like so:
{
"overrides": [
{
"files": "**/*.{hbs}",
"options": {
"parser": "glimmer"
}
}
]
}
If you dont have a .prettierrc file, create one in the root of your project with the contents above, and you should be good to go.
This way all your templates also get properly formatted, better than ignoring them.