Prettier in VS Code for Typescript

Wondering why prettier isn’t fixing your code formatting for you on save in VS Code (typescript)?

I spent a few minutes trying to figure out why this wasn’t working for me in Angular. Hopefully this helps someone not feel silly as I did when (in hindsight) the answer was pretty obvious.

I’m using the Prettier plugin for VS Code by Esben Peterson.

The instructions for setting it up to work on save are the following in the setting.json file:

Format On Save

Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
}

So why was this not working for Angular?

Because even though I think of it more broadly as javascript, it’s technically typescript. So you have to set the per-language name to typescript

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[typescript]": {
"editor.formatOnSave": true
}

Hopefully this simple tip will save someone a few moments of feeling silly, as did I. Cheers.