prettier-vscode: Format document not running prettier?

What’s the best way to diagnose this issue? I have prettier installed and enabled. It used to work fine. I don’t know when exactly it stopped working. When I have for instance this:

  <p>test</p>
<Modal     open={this.state.addingReview}        ></Modal>

And run Format Document, it results in this:

<p>test</p>
<Modal open={this.state.addingReview}      ></Modal>

Whereas running prettier from the command line results in:

<p>test</p>
<Modal open={this.state.addingReview} />

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 12
  • Comments: 36 (4 by maintainers)

Most upvoted comments

@lorensr Seems the extension did not start. Can you take a look at dev console? Help -> toggle developer tools -> console

Try reinstalling:

  • Uninstall extension
  • Close VSCode
  • Be sure $HOME/.vscode{,-insider}/extensions/esbenp.prettier-vscode-1.2.2 doesn’t exist
  • Install extension

What happened in my case, is VSC update deleted some of my user settings, one of which was the formatOnSave , which is why the extension seemed broken ( as i’m used to format on save ).

Setting the property back was easy enough. If that’s the case, check if you have "editor.formatOnSave": true set within the settings.

My settings were intact. Here was the error:

image

Activating extension esbenp.prettier-vscode failed: Cannot find module 'resolve'.

Fixed by reinstalling. Did have to manually delete the folder. Thank you CiGit!

Just updated to 1.33.0 and suddenly had the same problem of it not working on save… the way I got it fixed was that I ran “Format Document” through the command palette. Then VS Code showed a notification that there are multiple formatters for .ts files installed and asked me to set a default, which added

"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

to my settings. Maybe that’s a feature of the new version but sadly it doesn’t show the notification when trying to run the formatter by saving the file, but the default formatter thing seems to be a nice feature.

For future idiots like me, make sure the file you’re saving isn’t in your .prettierignore file! 🤦‍♂️

For me the fix was simply going to the global settings at VS Code, and checking the field at:

Preferences >> Settings >> Text Editor >> Formatting >> Format on Save (check this!)

In my case, I had this in my settings "prettier.requireConfig": true which when I removed started working.

Disabling eslint and reloading has no effect. @RobinMalfait do you mean this output tab? It’s not an option.

image

Prettier is def enabled:

image

Here are other extensions:

image

@ramsanath thanks, work for me

"prettier.requireConfig": true

For those of you using TypeScript, perhaps this is your issue: I noticed this in my VSCode settings.json:

  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

This was blocking Prettier from running on my .ts and .tsx files. Removing these fixed the issue for me.

Whoah, that’s weird… Thanks for the suggestion, @CiGit . I disabled the ESLint extension, and re-enabled it. Now prettier seems to be running again?

It’s possible I changed something else without realizing, as well. I’ll report back if any issues resurface.

For me the fix was simply going to the global settings at VS Code, and checking the field at:

Preferences >> Settings >> Text Editor >> Formatting >> Format on Save (check this!)

This worked for me, although i am not entirely sure if it uses prettier or standard formatting from [shift] + [alt] + [f]

Do you have multiple formatter installed? eslintIntegration?

You could try disabling prettier and see if format does the same. If so, search for the extension formatting like this.

@ajhyndman I’m on the latest vscode version and the extensions still works for me.

@lorensr Do you see any errors in the prettier output window? (press the right bottom prettier item)

I was having the same problem all of a sudden. I checked the box called “indent lines with tabs” under “prettier” in settings and checked another box called “format on save” under “editors” and that worked for me. I am a beginner so I do not have much idea about any of this still and I just messed around the settings.

For anyone who reached here, you might as well try this dumb solution(which happened to work for me).

Just click on prettier button in the bottom right of your vscode application. 😅

For me this was broken in 1.34.0 and I tracked it down to config.json:

"prettier.eslintIntegration": true,

When I removed this everything worked again.

I run into this problem and in my particular case the “solution” required to address flow errors first, as prettier won’t run if there are flow errors.

My problem was my editor.formatOnSaveTimeout config somehow got changed to 0. Found this out by checking in the ‘Log (Window) Output’ tab.

[2019-06-06 16:06:39.432] [renderer1] [warning] Aborted format on save after 0ms

increased it to 1000 and now its working fine.

I was getting the error “Prettier cannot format code”. Uninstalling and reinstalling Prettier worked for me too.

For me, I don’t see any errors/output from Prettier on the dropdown in the OUTPUT panel.

I’m noticing if I remove the plugin:prettier/recommended from .eslintrc:

"extends": ["airbnb","plugin:prettier/recommended"]

It works again (but obviously under different rules) so I dunno

I had an error on my code that was preventing prettier to run. Was able to see the error through the output panel and selecting prettier on the dropdown on the right, as suggested by @RobinMalfait.