TO START:

Its helpful to know which "settings.json" your configuring. You need to make sure that both your workspace ".vscode/settings.json" file, and your user "settings.json" file (path is contingent on the O.S. your running) are configured to work harmoniously, and that one is not overriding the other with the same configuration twice.

SECONDLY

Remove all configurations you added to your "./settings.json" file for prettier. Those settings were added by the extension author. Despite the esbenp.prettier-vscode being the official prettier extension for VS Code, Prettier was never intended to be configured via VS Code's configuration files. Prettier is very nit-picky about its "./.prettierrc" configuration file. When we use the VS Code config ("settings.json") when attempt to use a prettier config that the extension generates somewhere. If you end up with settings in some project workspace vscode configurations (e.g. ".vscode/settings.json" files) the extension will try to regenerate a file each time one loads a prettier setting. It may even try to load multiple, depending on the scope of your settings.json file. Some how it has to handle that the user-scoped settings.json file should always be overriden by a workspace "settings.json" configuration file. That's not to mention that prettier configs often contain there own overridden rule sets within the ".prettierrc" configuration file.

• Note: Just FYI, the most problematic configuration your using is the "prettier.configPath" setting.

_I'm going to stop going down the rabbit hole, hopefully you get the point I am making, which is: Don't use VS Code settings.json configuration files to configure "Prettier".

This will be more easy to explain with a bullet-list

The following will help you configure a clean environment, one where Prettier will work as you have configure it to work.

To start...

1. ...delete all Prettier settings that you added to all settings.json files. This includes any Prettier settings you added to project ".vscode/settings.json" files, and it especially includes all Prettier-settings that you added to your user "settings.json" file. After you finish, reload VS Code, by closing it out completely, and reopening it.

2. Rather than delete all prettier configuration files from any projects you have open, I am going to instead ask that when you reopen VS Code, that you only open one instance of VS Code. If VS Code opens a project (aka project-folder) after restarting, you're going to want to close that project w/o opening another one. To do that you can...
   • Use the keybinding ALT + K followed by the F key.
   • Alternatively you can use the title-bar menu like so: FILE  >>  CLOSE FOLDER

Additionally, make sure all tabs are closed as well.

3. At this point your instance of VS Code should be totally empty, completely a blank canvas. From here you are going to want to create a new file. To do this...

   • You have one of two options

     • (A) You can use the keybinding CTRL + ALT + SUPER + N
     • (B) Another way to achieve the same thing is to use the title-bar menu like so:   FILE  >>  NEW FILE

   • Once you've prompted VS Code to create a new file VS Code will want you to pick a location where it's to be created at. The location doesn't matter, so long as it is in a completely empty file, with nothing else in it. To name the file, VS Code will probably use the drop-down that is often refereed to as the quick input menu. The file needs to be a JavaScript file, as a consequence, the file must end with the file extension ".js". So I can reference the file later, I will call mine "main.js", but you can call your whatever you want, so long as you know which file I am referencing when you read "main.js".

   • In the same folder as "main.js", create one more new file without a file extension. This file MUST HAVE THE NAME...

   • .prettierrc

NOTE: "The file has a period (or dot) as the first character in its name (this makes it a hidden file)."

4. Add the following prettier configuration to the ".prettierrc" file you just created.

Copy{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}

5. **Execute the following commands"

   1. Copy $ npm init
      

      • The command will ask a bunch of questions, just press enter for each one to quickly configure the environment with the default npm/Node.js configuration.
      • The purpose of this is simply to create a valid "package.json" file.

   2. Copy   $ sudo npm i -g prettier && npm i -D prettier
      
         // Or you can execute it as two commands, like this:
      
         $ sudo npm i -g prettier
         $ npm i -D prettier
      

      • The command (or commands, depending on how you enter them) install prettier as a project dependency, and as a global Node.js package.

NOTE: "Make sure that you have prettier installed as a vscode extension. And make sure that you have only one prettier extension. Having multiple can create problems and confusion. The one you should have should have the Extension ID: esbenp.prettier-vscode "

6. Prettier Should work now. Use the main.js file we created early to write some javascript, then press F1 to open the quick input, type the word "format document", until you see the option "Format Document", which you want to click. Then choose prettier from the menu. Prettier won't format if you have erroneous code, it needs to be free from error. (if you want to fix errors use a linter like ESLint).

You can add a bunch of blank lines, or put braces on the wrong line, leave out semi colons, and prettier should format all of those mistakes.

I think you need to change the version of Prettier in package.json (this should resolve the error: "Invalid version Error: Invalid version") and downgrade VS Code to get Prettier working. This solution worked for me.

But try downgrading VS Code first. Maybe this will be enough.

I followed this YouTube video to downgrade VS Code to version 1.87: https://www.youtube.com/watch?v=9dhQm-9IbHA

Here are the versions I have in package.json:

• prettier: ^2.8.8

on my local machine:

• node: v18.18.0
• npm: v10.7.0

1. Select File -> Preferences -> Settings (Ctrl + comma) and search form formatter
2. Set Prettiers as Default formatter.

If above does not work:

ctrl+shift+p > Format Document With... > Configure Default Formatter... > Prettier - Code formatter

This also work with ctrl+shift+I