VS Code auto save afterDelay w/Prettier not working

Question

VS Code version: 1.64.2
Prettier Extension version: 9.2.0

I want it so Prettier runs on auto save, which should be every 500 milliseconds. I have the following in my workspace JSON:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "prettier.trailingComma": "all",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500
}

And the same in my user JSON:

{
  "workbench.colorTheme": "Darcula",
  "workbench.iconTheme": "material-icon-theme",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.trailingComma": "all",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500
}

Note: That's the entirety of both JSON files. No other formatters are listed in the settings.

And the following test snippet:

let                    = "blah"

But nothing is happening. The file - which has been saved to the file system previously - isn't saving in the current state after 500 milliseconds, so Prettier isn't running.

I'm at a loss, and any help would be greatly appreciated.

EDIT: A manual save (e.g., ctrl + s) has the following output:

["INFO" - 8:27:41 PM] Formatting file:///c%3A/Users/Kevin/Documents/Programming%20Stuff/JS/scratchpad.js ["INFO" - 8:27:41 PM] Using ignore file (if present) at c:\Users\Kevin\Documents\Programming Stuff\JS.prettierignore ["INFO"

8:27:41 PM] File Info: { "ignored": false, "inferredParser": "babel" } ["INFO" - 8:27:41 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration ["INFO" - 8:27:41 PM] Prettier Options: {
"arrowParens": "always", "bracketSpacing": true, "endOfLine": "lf", "htmlWhitespaceSensitivity": "css", "insertPragma": false,
"jsxBracketSameLine": false, "jsxSingleQuote": false,
"printWidth": 80, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true,
"singleQuote": false, "tabWidth": 2, "trailingComma": "all",
"useTabs": false, "vueIndentScriptAndStyle": false, "filepath": "c:\Users\Kevin\Documents\Programming Stuff\JS\scratchpad.js",
"parser": "babel" } ["INFO" - 8:27:41 PM] Formatting completed in 0.069ms.

No errors

score 5 · Accepted Answer · answered Feb 20 '22 at 02:38

Going by this answer, the editor cannot format on save when the afterDelay option is selected. It has to be either onFocusChange or onWindowChange.

As an example, a user level JSON file that looks like this will work. It will automatically save and format the file when focus is taken off the editor (by, say, clicking on another open file):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.autoSave": "onFocusChange",
}

VS Code auto save afterDelay w/Prettier not working

1 Answers1