Installing Prettier on VSCode

Question

I would like to use Prettier to format my code 'on save' but I am struggling to set it up.

Here are the steps I've taken:

1. installed Prettier globally as node package using npm install -g prettier.

2. installed Prettier as VS Code extension.

3. In VSCode I went to file > preferences > settings: then searched for "Format On Save" and made sure that option was checked.

I understand that I now need to go to Visual Studio Code's 'User's settings/preferences' as JSON and put in the following configuration:

"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

The problem is, I can't find the "User's settings/preferences"?

If I go to 'file > preferences > settings' I don't see anywhere which will allow me to input java.

Answer 1

Install Prettier

Install the "Prettier - Code formatter" extension from the extensions sidebar. Once this is complete, open a code file and press Alt + Shift + F to auto format it. You should see a prompt asking you to choose which code formatter you would like to use since you now have two available. Select Prettier from the prompt.

Enable formatting on save for all files

Open the settings menu via "File > Preferences > Settings". Type editor.formatonsave into the search bar and enable the "Format On Save" setting. Now, whenever you save any file it should be formatted automatically.

Enable formatting on save for only certain file types

Open the settings.json file by navigating to "File > Preferences > Settings" and clicking the "Open Settings (JSON)" button at the top right of the screen.

Search the file for any preexisting "editor.formatOnSave" setting and delete it. Then add the following, replacing "javascript" with whatever language you want to enable format on save for.

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