Formatting Angular 17 template flow control in VS Code

[HalHaynes]

I've had the Prettier extension installed in Visual Studio Code. I've looked online about Prettier's support for the new template flow control syntax, @if and so forth. As far as I can tell, it was supplied in Prettier 3.1. But the latest Prettier extension for VS Code, 10.1.0, is based on Prettier 2.0. Am I supposed to remove the extension, install the Prettier NPM package, and somehow configure VS Code directly to work with it? I've tried that but the formatting I'm getting now isn't what Prettier provided.

Questions:

• Am I wrong about removing the extension? Do I need it?
• If I use the extension, is there a way to get it to act like Prettier 3.1 (or the current version, 3.2.5)?
• If I have to use the extension for Prettier to work, and there isn't any way now to get the template flow control formatting out of it, how long before a new version of the extension comes out? The last one was eight months ago, and that rolled back its underlying Prettier version from 3.0 to 2.0.
• If removing the extension was the right thing to do, is there a single reference that will show me end-to-end how to set it up for Angular in VS Code?

[sosukesuzuki]

If prettier is installed in your project's node_modules, prettier vscode uses it. The task of updating the default prettier version of prettier vscode has not been completed due to lack of my time.

[HalHaynes]

Ah, OK. Well, I've reinstalled the extension and I installed the Prettier NPM package, 3.2.5. In my Code settings it's set as the default formatter. But, for example, given this code:

<div ngbAccordion #acc="ngbAccordion" *ngIf="groups">
    @for(grp of groups; track grp.key){ @if(!grp.key.startsWith('Manager')){
    <div ngbAccordionItem>      <h2 ngbAccordionHeader>
        <button ngbAccordionButton>{{ filteredUsers(grp.members).length + ' ' + grp.key }}</button>
      </h2>

When I format it (either with Alt+Shift+F or by saving the file), I get this:

  <div ngbAccordion #acc="ngbAccordion" *ngIf="groups">
    @for(grp of groups; track grp.key){ @if(!grp.key.startsWith('Manager')){
    <div ngbAccordionItem>
      <h2 ngbAccordionHeader>
        <button ngbAccordionButton>{{ filteredUsers(grp.members).length + ' ' + grp.key }}</button>
      </h2>

So the HTML is being formatted but the control statements aren't. Am I missing something? If, instead I start with the following, with the two control statements on separate lines but with unusual indentation

  <div ngbAccordion #acc="ngbAccordion" *ngIf="groups">
    @for(grp of groups; track grp.key){
          @if(!grp.key.startsWith('Manager')){
          <div ngbAccordionItem>
          <h2 ngbAccordionHeader>
        <button ngbAccordionButton>{{ filteredUsers(grp.members).length + ' ' + grp.key }}</button>
      </h2>

I get this:

  <div ngbAccordion #acc="ngbAccordion" *ngIf="groups">
    @for(grp of groups; track grp.key){
    @if(!grp.key.startsWith('Manager')){
    <div ngbAccordionItem>
      <h2 ngbAccordionHeader>
        <button ngbAccordionButton>{{ filteredUsers(grp.members).length + ' ' + grp.key }}</button>
      </h2>

with no extra indentation of the inner @if for the div tag under it. Is that as intended? Or should the inner @if be indented, and should the div be further indented?

[HalHaynes]

I do see that I'd missed this in the installation documentation: "Note: Don’t skip the regular local install! Editor plugins will pick up your local version of Prettier, making sure you use the correct version in every project. (You wouldn’t want your editor accidentally causing lots of changes because it’s using a newer version of Prettier than your project!)"

[HalHaynes]

I fixed it. I did have this:

But when I clicked the "HTML > User", it showed me this:

So I set that as well, and now everything's fine. VS Code's way of organizing the settings is confusing, though.