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.

Shulins

did you find a solution on this? – Belostok

@OriolLopez, it's sorted out now with the new version of Prettier. It's not everything I'm looking for, but close. – Shulins

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.

Timi

IT supports it but doesn't indent – Lissettelissi

Works great with VSCode Insiders 1.91.0 – Gonzalo

Had to restart extensions before it took effect, but worked. :) – Intercalation

Answer 2

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.

Rayner

Yeah! This works. Make sure you restart the vscode after applying these changes. – Praxis

In my case the formatting effectively changed but it fromats in a weird way tags from ionic framework (as <ion-button>). Instead of keeping it on the same line it breaks a line before the closing tag ">" of each ionic tags. Any clue how to solve that? – Lindsay

The only thing that worked. I think the most important step is the one with installing the latest prettier version locally for your project... – Cephalochordate

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:)

Blue

Out of all, this is the solution works 🤷🏻‍♂️ – Caruncle

Answer 4

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.

Statolith

But what is the solution for those who don't use Prettier? I don't really like to have my attributes aligned like Prettier is forcing me to. I'd like to have the default formatter of Visual Studio Code but with indentation for the code flow. – Gausman

I agree with this. I'm not a fan of all the things Prettier does, but I'm willing to go along with it if it means my entire project follows a standard that I don't have to put a ton of time into maintaining. These are the settings I used to get it closest to my liking: "prettier": { "tabWidth": 4, "useTabs": true, "singleAttributePerLine": false, "bracketSameLine":true, "printWidth": 400, "proseWrap": "never", "htmlWhitespaceSensitivity": "css" } – Shulins

You should open a specific issue on the framework repo. (ie formatting without prettier). Not sure what approache the team would take though – Statolith

Prettier 3.1 is now available. AFAIK, it is the only formatter that supports Angular's new template syntax features. In the past, you could use any old HTML formatter, but now that Angular templates have evolved into non-HTML syntax, you need custom support, above and beyond the default HTML formatting in VSCode. – Timi

@Timi but it doesn't seem like Prettier 3.1 indents the code inside the brackets. – Lissettelissi

@Lissettelissi For me prettier does indent the code correctly. If you have issues with it, you should open an issue in their issue tracker. – Middlebrow

@JSONDerulo thanks . Awesome name you have btw :) – Lissettelissi