stackblitz / core

Online IDE powered by Visual Studio Code ⚡️
https://stackblitz.com
MIT License
10.23k stars 888 forks source link

Support prettier formatting for Angular HTML template files #3034

Open arobinson opened 5 months ago

arobinson commented 5 months ago

Is your feature request related to a problem? Please describe.

With Angular >= 17, VS code formats the Angular HTML files in a very unreadable format when control flow is used. Prettier supports this new control flow syntax very well. Unfortunately, VS code does not support prettier out of the box and an extension must be used.

Describe the solution you'd like

Allow HTML files in a project to be formatted by prettier instead of the default VS code formatted

Describe alternatives you've considered

  1. Disable auto-formatting in the workspace
  2. In the web-container run npm i -D prettier
  3. Add a script to the package.json:
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "prettier": "prettier src --write"
    },
  4. Run in the terminal npm run prettier
  5. Repeat step 4 after changing any file, don't use the P button on the stackblitz editor ever again

Additional context

Very hard to read stackblitz formatting:

Screenshot 2024-04-17 at 10 23 02 PM

Using prettier after disabling stackblitz reformatting on save:

Screenshot 2024-04-17 at 10 24 18 PM