The Prettier Extension is not correcting inconsistent formatting of code - prettier

Question

I have downloaded some exercise files to learn how to use Javascript. I am using Visual Studio Code as the editor and can open the exercise javascript files in the editor. I have installed the extensions Prettier - Code Formatter and ESlint and Live Server and npm-install and advised in the course video. The ESlint extension seems to work ok i.e. when I remove some of the code, errors in the code are underscored and when I move the mouse over the error a pop-up indicates what is missing. However, in the code below I removed the opening and closing brackets around the word 'update' and indented the line which begins with the word 'main.' and remove the semi colon which should follow the first bracket. However, the Prettier extension does not correct these amends, as the video advised it should and I received the error ["ERROR" - 14:55:15] Prettier could not be loaded. See previous logs for more information.
const updateBackpack = (update) => {
let main = document.querySelector("main"); // main is an element
main.innerHTML = markup(backpack);
console.info(update);
};
Do you know why Prettier is not working and how I can get it to work. Please bear in mind I am new to coding and Javascript.
Thanks,
Clive

Answer 1

I think you have the exact same problem as me, while following the exact same course as me :D!
First install prettier, using :
npm i prettier -g
Then configure the VS code to pick that downloaded package.
Here is what I did : Search for 'Prettier Path' in settings > select 'Edit in settings.json' and add the following config :
{
"editor.minimap.enabled": false,
"editor.fontSize": 12,
"editor.formatOnSave": true,
"editor.tabSize": 2,
"liveServer.settings.donotShowInfoMsg": true,
"editor.wordWrap": "on",
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top",
"[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true
},
"workbench.colorTheme": "Monokai",
"window.zoomLevel": 0,
"editor.columnSelection": false,
"explorer.compactFolders": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always",
"liveServer.settings.donotVerifyTags": true,
"prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
}
Make sure prettier is installed at the given path : "prettier.prettierPath": "/usr/local/lib/node_modules/prettier"
You can make prettier the default also by uncommenting the code : "editor.defaultFormatter": "esbenp.prettier-vscode"
It has my custom settings of visuals, so review those and then set, for beginners try pasting as-is!