Vetur/Prettier formatting problem with space after function keyword

[mfoitzik]

After installing Vetur and prettier in Visual Studio Code (Windows 10 Pro), when I format a vue document (Shift Alt F) it formats the HTML fine, but in the Script section of the file it is removing the space after the function keyword

function (e) becomes function(e)

My vscode settings file looks like this:

{
  "git.path": "C:\\Program Files\\Git",
  //05/04/2019 - added in to support drag and drop
  // /https://github.com/Microsoft/vscode/issues/1046
  "editor.dragAndDrop": true,
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,

  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Does anyone have any suggestions or can point me in the right direction? Thanks.

[mfoitzik]

I am going to answer my own question in case it helps someone else. The core solution for me was to update the prettier npm module in the project (yarn upgrade prettier@^2.0.5). The article I read that got me on the right track is at https://joshuatz.com/posts/2020/prettier-function-parenthesis-spacing-opinionated-is-key/ (the author actually had the reverse issue of what I had, but it helped me). I am not sure if there is something else I did that was wrong that required the fix I used, so if anyone has comments, please post them here.