Prettier not working on my vscode.I've installed it on my vscode and do all the important settings

Viewed 7215

I've installed prettier on my vscode and do all the settings for that. But it is still not working. Settings I've applied: default formatter prettier, format on save. But it still not working. Please help me.!!

3 Answers
  1. press shift + alt + f together
  2. if its open select folder then choose the folder you want for prettier
  3. if gives you 2 options prettier or any other things then hit prettier

or if you using Javascript and its frameW n libs then create file .prettierrc.js and then add those commends

module.exports = {
  trailingComma: "all",
  tabWidth: 4,
  singleQuote: "avoid",
};

good luck

I can't comment yet so here's my best try at an answer:

Prettier mainly supports these languages according to their page: JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML Make sure you're formatting one of those languages for best results.

If Editor: Format On Save Mode is set to modifications then you may not be able to go to an existing file and instantly format all of it.

If none of that helps I'm stumped and recommend looking at Why Prettier does not format code in VSCODE? if you haven't already

Try this : 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!

Related