"Prettier - Code formatter" is not working in Visual Studio code

Question

I have Visual Code Studio(1.41.1) Editor and I need Auto Formatter

I have installed this code format: Prettier - Code formatter Successfully installed but not working,

I also tried to use the command ext install esbenp.prettier-vscode that too was successful installation but is not working.

I checked that the composer is installed properly and the environment variable path is given correctly in my system, Also, I added it to the settings.json file by looking in the document: "phpformatter.composer": true but not success in auto-formatting my code

Visual Studio Code and System Restart also tried but did not succeed

Why can't I Auto Formatter in my Visual Studio code use this "Prettier - Code Formatter"? No errors are received, but the auto formatter is not working

or you can press Ctrl+shift+p and type format document then select prettier format — harkesh kumar, Dec 24 '19 at 17:56
@harkeshkumar windows 10, yes I tried **Ctrl+shift+p** but not a success — Udhav Sarvaiya, Dec 24 '19 at 17:56
@UdhavSarvaiya can you try to right click and click format document with then choice — harkesh kumar, Dec 24 '19 at 18:00
@vsh It was not set before as suggested by you but now I set the default formatter still did not succeed — Udhav Sarvaiya, Dec 24 '19 at 18:03
Yes @harkeshkumar I have already tried but my code is not auto-formatting — Udhav Sarvaiya, Dec 24 '19 at 18:06
@harkeshkumar If success is not achieved at the end, it will have to reinstall vscode — Udhav Sarvaiya, Dec 24 '19 at 18:10

score 27 · Answer 1 · edited Sep 12 '22 at 06:05

27

try this, it worked for me

File -> Preferences -> Settings (for Windows)

Code -> Preferences -> Settings (for Mac)

Search for "Default Formatter". In the dropdown, prettier will show as esbenp.prettier-vscode.

edited Sep 12 '22 at 06:05

Bhavya Koshiya

1,262
2
8
22

answered Aug 25 '21 at 10:20

Manan Gadhiya

480
4
6

score 14 · Answer 2 · edited Oct 12 '20 at 08:13

14

Maybe the prettier extension is not working for javascript file. Open your settings.json for vs code and paste

{ "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }

This might work for you

edited Oct 12 '20 at 08:13

n0nvme

1,248
8
18

answered Oct 12 '20 at 01:13

Anant Rawat

141
1
3

2

I have these settings. It worked yesterday but not today. Why is auto format so hard to make sticky in VSCode? – Methodician Jun 29 '22 at 19:49
Looks like it has to have the language explicitly set like this answer to override the user settings in a workspace. – Travis Reeder Jul 05 '23 at 13:36

score 6 · Answer 3 · answered Jan 12 '21 at 19:00

6

You may have local .vscode directory in the root of your project with settings that prevent formatting. Try to edit or remove .vscode local configurations if you have. After close and reopen VS Code.

answered Jan 12 '21 at 19:00

Konrad Grzyb

1,561
16
12

This was my problem. A repo I added had it's own prettier setup. I need to run "npm install" so that it added the correct local prettier setup. – Sean Rasmussen May 13 '21 at 13:47
After spending a week in almost my 2 different Mac I came along this and this resolved the issue.just deleted that and every setting is now applied from global settings.json file – Ravi Yadav Aug 07 '21 at 14:38

score 2 · Answer 4 · answered Feb 27 '21 at 23:33

2

as @harkesh kumar said : press Ctrl+shift+p and type format document then select prettier format, it may work for you

answered Feb 27 '21 at 23:33

selharem

74
12

Super helpful , thanks for sharing – Ferhi Malek Jun 03 '23 at 19:50

score 2 · Answer 5 · answered Aug 07 '22 at 20:08

2

For me it was failing silently because I was using await inside of a function that wasn't marked with async. That raises another question - why would it fail silently here. Regardless, once I fixed that error then prettier began working again.

answered Aug 07 '22 at 20:08

Nick Manning

2,828
1
29
50

1

Same issue for me... lesson try it on a known good file when you are installing the plugin – Justin Ohms Feb 15 '23 at 01:53

score 1 · Answer 6 · answered Apr 08 '21 at 17:10

Make sure you have a file in the root folder with this name .prettierrc.js

inside you should have something like:

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
};

score 1 · Answer 7 · answered Jan 16 '22 at 00:37

1

If you don't have and don't want a prettier config file for some reason, you can uncheck the option "Prettier: Require Config"

In settings.json it's "prettier.requireConfig": true

In the UI it looks like this:

answered Jan 16 '22 at 00:37

Félix Paradis

5,165
6
40
49

score 0 · Answer 8 · answered Jun 06 '22 at 19:08

I finally found the issue. I was trying to format code on a remote server.

In the extension page for Prettier, it says:

This extension is disabled in this workspace because it is defined to run in the Remote Extension Host

Then I clicked on the button "install on remote host ..." and it worked

Filip · Answer 9 · 2023-05-24T13:24:08.483

0

If you wish you can add this formatter instead of prettier for javascript. Open settings.json and enter this for js formatter: "vscode.typescript-language-features"

steps here

edited May 24 '23 at 13:24

answered May 24 '23 at 13:22

Filip

1
2

I don't think that's what OP wants. – ryanwebjackson May 24 '23 at 17:08

score 0 · Answer 10 · answered Jun 03 '23 at 20:04

My answer is for vs code formatting in C#: and I had this same issue, thanks to @selharem's answer above, I followed the same steps, but encountered " Prettier is the default formatter, but I could not format c# code", upon pressing configure, I had three c# formatter option to select from, one of them was "Csharpier" the c# code formatted in vs code. There is this, and the second option was the command "dotnet Format", which is included in the official .Net SDK since .Net6

score 0 · Answer 11 · answered Aug 29 '23 at 09:30

0

disable Prettier -> reload your VSCode -> enable Prettier again. Sometime it cache and not apply your setting.

answered Aug 29 '23 at 09:30

Kien Nguyen Ngoc

404
3
6

"Prettier - Code formatter" is not working in Visual Studio code

11 Answers11