Trailing comma after last line in object

Question

I'm using Prettier in VS Code. I noticed that when using format on save, Prettier adds trailing commas on the last line of an object every time.

For example, let's say I had a JS object like this:

obj = {
 hello: 'hello',
 world: 'world'
}

Prettier turns it into this:

obj = {
 hello: 'hello',
 world: 'world',
}

Notice the extra comma after 'world'

Didn't find in the settings an option to fix this.

I have no idea about prettier but isn't this related? https://prettier.io/docs/en/options.html#trailing-commas — ASDFGerte, Apr 22 '20 at 16:53
for me the behavior of prettier is opposite, it removes trailing comma. — Shub, Apr 22 '20 at 16:55
You can try `"trailingComma": "all"` then or check if you are eslint also. That might be overriding some setting. — Zuckerberg, Apr 22 '20 at 16:56

score 119 · Accepted Answer · answered Apr 22 '20 at 16:54

119

You can update .prettierrc.json and set option trailingComma to none like:

{
  "trailingComma" : "none",
  ...
}

answered Apr 22 '20 at 16:54

Zuckerberg

1,781
2
10
19

score 52 · Answer 2 · edited Mar 01 '21 at 12:51

52

Trailing commas are a code-style convention that was introduced to avoid spurious differences in version controls (ie Git).

Imagine you have version controlled code and you have to change it. When you add a new line to your object without the trailing comma, you will have to change the original last line by adding a comma. In version control this then shows up as two changed lines. The code reviewer or a future dev have to check if you effectively changed the last line, or only added the comma.

Zuckerberg's answer shows you how to change it. However, it is better to change your style, than change prettier's style.

edited Mar 01 '21 at 12:51

lidkxx

2,731
2
25
44

answered Apr 22 '20 at 16:56

gschenk

827
9
17

4

Solution: apply the change to your entire codebase, commit that, and add the commit to `.git-blame-ignore-revs` so it doesn't show up in blame — see e.g. https://akrabat.com/ignoring-revisions-with-git-blame/ – gimboland Jun 01 '21 at 15:13
1

But the commit that adds a new item should not be ignored! – merwok Mar 12 '23 at 19:22
This is a great point, I highly feel why the last item should be in the change history if the change is unrelated. Highly recommend using `trailingComma: "es5"` ( the default is changed from `none` to `es5` from `v2.0.0` ) – Anjan Talatam Apr 15 '23 at 02:58

score 16 · Answer 3 · edited Mar 01 '21 at 12:47

16

Trailing commas are a standard already because they result in a cleaner commit history. If you have to add a property down the road, git will show a single line changed instead of a new line AND the new comma on the previous line.

edited Mar 01 '21 at 12:47

lidkxx

2,731
2
25
44

answered Apr 22 '20 at 16:57

David Federspiel

281
2
7

score 7 · Answer 4 · answered Aug 04 '20 at 19:25

To modify the setting in VSCode:

Go to FILE -> PREFERENCES -> SETTINGS. (VS Code Menus)
Settings window should open. Above (Top) there is a search. Type "Prettier"
You should see the available Prettier settings. You can modify them

Now change trailingComma to none

score 4 · Answer 5 · answered Apr 22 '20 at 16:53

4

Trailing commas are modern JS, but if you really don't like them they can be disabled.

answered Apr 22 '20 at 16:53

Andrew Dibble

782
6
15

11

could you add any source, any article about "trailing comma - modern js " ? – Yevhenii Herasymchuk Oct 21 '20 at 10:31
3

@YevheniiHerasymchuk It's not only JS. It's, for example, PHP too. Trailing commas avoid conflicts when two people add items to an array/object and then want to merge with git. With a trailing comma, instead of a modified line + inserted line, you only get an inserted line which won't produce any conflicts. – Mārtiņš Briedis Apr 27 '22 at 09:23

score 2 · Answer 6 · answered Feb 11 '23 at 10:39

In my case, the configuration above was not enough:

{
  "trailingComma" : "none",
}

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

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

And with the extension already installed Prettier 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 2 · Answer 7 · answered Feb 18 '23 at 12:56

If anyone's wondering how to have VSCode's prettier extension behave like pre-commit's prettier hook, this worked for me:

  "prettier.trailingComma": "all"

The above should be used in combination with prettier as thedefaultFormatter for the relevant files, as suggested by others.

If that alone is not enough and you're also using EditorConfig for other customizations, you may need to also add:

  "prettier.useEditorConfig": false

Trailing comma after last line in object

7 Answers7

Linked