How to turn off the prettier trailing comma in VS Code?

Question

I go to settings. Select none for the prettier trailing comma. Restart VS Code. Select a piece of TypeScript, press Ctrl + Shift + F and the trailing commas still appear. How could I fix it?

Maybe you have a `.prettierrc` config file in your project that overrides the VSCode settings ? — Ewaren, May 18 '20 at 18:56
@Ewaren, by searching in a project (`Ctrl` + `P` and typing the `.prettierrc`) I can not find such a file. But by searching through all the files (`Ctrl` + `Shift` + `F`) I can find a file `settings.json` and in the file I has only this: `{"prettier.trailingComma": "none"}`. — manymanymore, May 18 '20 at 19:03
the `settings.json` file contains your workspace settings : it is just the JSON transcription of the settings you chose in VSCode's graphical interface. There must be a config file in your project overriding these settings, it would be easier to help you if you could show us the folder structure of your project (for example with the `tree -a` command). — Ewaren, May 18 '20 at 19:15
@Ewaren, I am not sure where I should execute the command. My folder structure is an ordinary Angular app structure. I got it after running the `ng new angular-tour-of-heroes`. When I try to run the command in my project folder I am getting the error: `$ tree -a bash: tree: command not found` — manymanymore, May 18 '20 at 19:18
I just looked up the source code for Tour of Heroes, there is no .prettierrc file there, maybe the .editorconfig file introduces conflicts... Try adding a .prettierrc file at the root of your project, with `{ "trailingComma": "none" }` in it maybe. — Ewaren, May 18 '20 at 21:50
@Ewaren, just have checked. That helped. Thank you a lot. Could you post your last comment as an answer, please? :) — manymanymore, May 19 '20 at 20:17

score 54 · Accepted Answer · answered May 19 '20 at 23:35

Since you are working on the Tour of Heroes project, it is maybe the .editorconfig file there that introduces conflicts with your VSCode Prettier settings. Try adding the following .prettierrc file at the root of your project :

{
  "trailingComma": "none"
}

The .prettierrc file has the highest priority over any setting, so it should override any conflict.

score 14 · Answer 2 · answered Aug 29 '20 at 10:48

14

Adding this line to settings.json worked for me.

"prettier.trailingComma": "none"

answered Aug 29 '20 at 10:48

Er. Sachish

369
2
13

score 11 · Answer 3 · answered Apr 02 '21 at 19:38

11

At the root of the project create the Prettier configuration file: .prettierrc.json

Add this code to your file: .prettierrc.json

{
    "trailingComma": "none"
}

Save file and then restart your Visual Studio Code

answered Apr 02 '21 at 19:38

Udhav Sarvaiya

9,380
13
53
64

score 5 · Answer 4 · answered Apr 30 '21 at 04:53

5

I was facing same problem and I added this line in the settings and it worked for me.

"prettier.trailingComma": "none"

answered Apr 30 '21 at 04:53

Andrew

139
2
3

do you have a prettier extension installed? vscode tells me that this setting is uknown. – Stealth Rabbi Feb 22 '22 at 16:53
Yes I believe I do. – Andrew Jun 28 '22 at 01:47

score 4 · Answer 5 · answered May 09 '22 at 01:55

4

In VS Code Settings, go to json file and type this:

"prettier.useEditorConfig": false

answered May 09 '22 at 01:55

Sterling Diaz

3,789
2
31
35

1

This is the solution to all the prettier related problems. I think we shouldn't be touching `.editorconfig` unless we are doing for the whole team – newbie Jul 05 '22 at 09:39

John · Answer 6 · 2022-09-05T02:59:36.117

Prettier has the following rules for where to look for settings (in order of precedence):

A "prettier" key in your package.json file.

A .prettierrc file written in JSON or YAML.

A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.

A .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.

A .prettierrc.toml file.

Following the first rule, I was able to configure it by adding the following to package.json

"prettier": {
  "trailingComma": "none"
}

score 2 · Answer 7 · answered Feb 19 '21 at 18:16

2

I had the same experience as your screen recording. Restarting VSCode did the trick for me. I could not find a way to restart the prettier addon... maybe someone can chime in on how to do that.

answered Feb 19 '21 at 18:16

Ryan Wheale

26,022
8
76
96

score 1 · Answer 8 · edited Jul 29 '21 at 15:36

1

Run this command:

npm run lint --fix

after formatting...

edited Jul 29 '21 at 15:36

Reza Rahemtola

1,182
7
16
30

answered Jul 28 '21 at 03:42

Banushan Puviraj

27
4

this doesn't change anything in the vscode settings. – Stealth Rabbi Feb 22 '22 at 16:52
@banushan-puviraj what do u refer by running `npm run lint --fix` you should have shared the `lint` script as well, not sure but u may have configured `lint` to 'eslint .` from scripts in packgage.json file. Thanks – Wasit Shafi Mar 22 '23 at 15:19

score 1 · Answer 9 · answered Feb 11 '23 at 09:36

In my case, the configuration above was not enough.

For this to work for me, in addition to this setting, I had to remove from setting.json:

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

Next, enter the command ctrl + shift + P in vscode

Click on Configure...

Choose Prettier - Code formatter

Now this:

const a = {
  a: 10,
  b: 15,
};

turns into this:

const a = {
  a: 10,
  b: 15
}

score 0 · Answer 10 · edited Aug 31 '23 at 13:18

0

Try this in vs-code settings.json

// remove semicolons
"prettier.semi": false

edited Aug 31 '23 at 13:18

Emma

658
10
20

answered Aug 24 '23 at 15:58

Pedro Henrique Santos

1
1

How to turn off the prettier trailing comma in VS Code?

10 Answers10