Indentation with Angular 17 new control flow in VS Code

Question

I'm using VS Code and having issues with the Angular 17 indentation (Alt+Shift+F). I'd like to change how the indentation is working with Angular 17 views. Currently with the new control flow it's doing this:

I'd like to see it do this:

I'm not sure if the issue is with the Angular Language Service, Prettier, or VS Code.

Can anyone please guide me as this is driving me a bit crazy.

Answer 1

Prettier 3.1 supports intending Angular's new control flow.

Run npm i [email protected] --save-dev to install v3.1 in your package.json as a dev dependency. Then, be sure that you have the Prettier VSCode extension installed, which uses the version from your node_modules. Finally, press Cmd+Shift+P, search for Format..., and format with Prettier.

Answer 2

The angular service doesn't do any formatting, it's responsible for syntax highlighting and parsing the template to match the tokens with the component file.

This is a prettier issue.

You should track this issue on the Prettier repo.

Answer 3

For any future visitors tackling with indentation of Prettier. I mean something like this:

@if (pageData$ | async; as model) { @if (!model.loading) { @if (model.value) { @for (item of model.value; track item.id)){
...
}  }  }  }

Note that all of IFs and FOR are in one line!!

I could finally fix this with the help of this comment!

Please install the latest version of prettier and then generate a .prettierrc file in the root directory.

Then add this json to it

{
    "parser": "angular"
}

After adding this json the prettier must work like a charm!

Result:

@if (pageData$ | async; as model) {
    @if (!model.loading) {
      @if (model.value) {
        @for (item of model.value; track item.id) {
           ...
        }    
      }
    }
  }

Hope this helps:)

Answer 4

None of the other answers worked for me individually, but combining dylhunn and Sadra Rahmani's answers did the trick:

1. Install Prettier as a Dev Dependency

   First, add Prettier to your project. This is important because the globally installed Prettier didn't work for me. Use this command:

   npm i -D prettier
   

2. Add a .prettierrc File

   Then, create a .prettierrc file in your project's root. Put the following inside:

   {
     "overrides": [
       {
         "files": "*.html",
         "options": {
           "parser": "angular"
         }
       }
     ]
   }
   

   Note: Simply putting {"parser": "angular"} there broke formatting for .ts files for me.

3. Restart

   Restart Visual Studio Code to start using the new configuration.