Prettier-vscode: formatOnSave is not working

[kpman]

After upgrade version to v1.0.0, the vscode setting formatOnSave is not working on my machine.
But when I changeprettier.eslintIntegration to true, the auto-format is working.

Are there some changes not listed on the Changelog between the version bumping? Or maybe I missed something on the vscode setting?

My Prettier - Code formatter: version 1.0.0
My vscode version: 1.18.1
My vscode setting:

"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",

[landvibe]

same here.
in my case, typescript project is not working, but javascript project works well.
A project with prettier 1.8.2 is not working, but a project with prettier 1.4.4 works well

[CiGit]

Can't reproduce (js and ts). Does it work if you call the action ("Format Document")
Are there any messages in the output panel or dev tool ?

Try reinstalling the extension, it fixed some other issues (don't know why...).

[pitkane]

In my case prettier was throwing error about proseWrap setting.

Fixed it by manually adding: "prettier.proseWrap": true

My Prettier - Code formatter: version 1.0.0
My vscode version: 1.18.1

Errors which Prettier throws:

Settings view:

[crazysaem]

Same issue here. I worked around it by downgrading to the prior version, 0.2.6.
You can downgrade to 0.26.0 by downloading the vsix file directly:
https://marketplace.visualstudio.com/_apis/public/gallery/publishers/esbenp/vsextensions/prettier-vscode/0.26.0/vspackage

[CiGit]

@pitkane Do you have a [email protected] installed locally ?

[pitkane]

@CiGit Oopsie doopsie. Working on two projects at the same time, and the other one had 1.8.2 installed mistakenly. I was quite sure I removed it from both projects... ;)

[landvibe]

@CiGit
A project with prettier 1.8.2 was not working
I updated it to 1.9.1 and then it works well

[CiGit]

Yes, we don't handle deprecated settings anymore. I would encourage anyone who wishes to use a different version (installed in package.json) to also provide a prettier config file

[CiGit]

Try uninstall/ install the extension and restart vscode (This has _fixed_ issues in the past ...)
Is there something in the output pane? It shouldn't in your case as you said the default formatter kicks in. How did you define that?
You can try to format this snippet:

const x = {
}
const y = {
       a: "Hello",
    b:'World'
}

Lastly, if you could debug it ? I'm unable to reproduce this.

[g3offrey]

Reinstalled as you said and it works fine now @CiGit
Thanks for all ! And again good job for this awesome extension 👌 😄

[crazysaem]

Reinstalling resolved it for me as well! Working fine now

[zebapy]

manually running format document isn't working for me. Tried reinstalling prettier ext.

[kpman]

I found the issue was caused by different local prettier version.

I used [email protected] at my project, so the new version of [email protected] can not do formatOnSave. But after I upgrade my project's prettier version to v1.9.2, theformatOnSave` is working on my machine.

@CiGit Thanks.

So, if there is some way to use perttier-vscode v1.0.0 with [email protected]?

[CiGit]

@kpman https://github.com/prettier/prettier-vscode/issues/290#issuecomment-350755610

[jonescr3]

if you have an editorconfig file, that was the problem for us

[konekoya]

@kpman Thanks, life without prettier is such a pain.

[pkyeck]

I have this in my .vscode/settings.json:

{
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true
  }

Was working before but now it doesn't format JS files on save anymore ☹️
When I change the global to true, it works. But I just want my JavaScript files to be formatted.

[CiGit]

@pkyeck is that your entire settings.json ? In this case, it seems } is missing.
If changing the global makes it work, I would say the issue is not in this project.

[pkyeck]

@CiGit no, sorry. thought I copy+pasted the important part.

This doesn't work:

{
  "eslint.enable": true,
  "files.exclude": {
    "node_modules": true,
    ".npm-offline-cache": true
  },
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

This works:

{
  "eslint.enable": true,
  "files.exclude": {
    "node_modules": true,
    ".npm-offline-cache": true
  },
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

First version was working before the November update.

[CiGit]

It works on my setup. I suspect you have an issue with something else. maybe your vscode installation.

[pkyeck]

mmm, strange. Then I'll have to look into this some more. Thanks for your help, though.

[ghost]

I've reinstalled everything many times and I can only get 'format selection' to work every time.

[CiGit]

I invite you to read https://code.visualstudio.com/updates/v1_22#_configurable-format-on-save-timeout
This may resolve troubles found in this thread.
Open a new issue if you encounter anything else.

[ajenkins-kyr]

@pkyeck I also had to add

"[javascriptreact]": {
        "editor.formatOnSave": true
    }

for it to work with .jsx files. Not sure if that was your issue.

[vaibhavsharma56]

Solution by pkyeck worked great, for typeScript, add in next lines ::
"[typescript]": {
"editor.formatOnSave": true
}

[sethlivingston]

For TypeScript I needed both to get it working again:

  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },

Prettier v1.6.1

[lucksp]

With Prettier 1.6.1, VSCode 1.27.2,
no ESLint

I also had to add

"[javascript]": {
    "editor.formatOnSave": true
  },

[code4cake]

Got finally worked for me was to add "[javascriptreact]": { "editor.formatOnSave": true } to my settings.json

|prettier | vscode |
|---|---|
|1.14.3 | 1.27.2 |

I have the following configuration.

// workspace.settings.json

{
  "prettier.printWidth": 120,
  "prettier.tabWidth": 2,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.bracketSpacing": true,
  "prettier.parser": "flow",
  "prettier.semi": true,
  "prettier.useTabs": false,
  "prettier.jsxBracketSameLine": false,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  }
}

[j0nd0n7]

This:
"[javascriptreact]": { "editor.formatOnSave": true }

from @dantesolis solved my problem! Thanks

[Izhaki]

Non of the solutions here worked for me.

I have had the same issue with a bare typescript project.

Turns out there was an extra comma in package.json that rendered it invalid. Removed and it was all working again.

ODD!!!!

[dmt0]

For me, format on save was not working because of eslint. Ran eslint from command line, turns out there were missing packages that it needed. So there were issues in the file that eslint didn't underline, that prevented prettier from auto-formatting.

[sbalay]

In my case, as @CiGit mentioned, the format on save was not working because of the timeout. You can check if this is your case reading the output of Log (Window). A message like this one will be displayed: [2019-03-07 17:59:04.135] [renderer2] [warning] Aborted format on save after 750ms

[eouw0o83hf]

Just so it shows up here explicitly as a comment, VS Code has a timeout for how long format-on-save actions are allowed to take. You can configure this with:

"editor.formatOnSaveTimeout": 750,

The default is 750 (in ms), but you can make it as high as you want. Moving up to 3000 fixed my problems.

[ericloong90]

@eouw0o83hf 's solution fixed it for me. Turns out it's just my computer being slow at formatting and VSCode automatically times out the formatting action for me.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.