javascript - Trailing comma after last line in object - Stack Overflow

admin管理员组

文章数量:1135091

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'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.

• javascript
• visual-studio-code
• prettier

Share Improve this question Follow edited Dec 30, 2020 at 14:41 Penny Liu 17.3k55 gold badges8686 silver badges108108 bronze badges asked Apr 22, 2020 at 16:49 SiiilverSurferSiiilverSurfer 93911 gold badge77 silver badges1313 bronze badges 4

• 3 I have no idea about prettier but isn't this related? prettier.io/docs/en/options.html#trailing-commas – ASDFGerte Commented Apr 22, 2020 at 16:53
• 1 for me the behavior of prettier is opposite, it removes trailing comma. – Shub Commented Apr 22, 2020 at 16:55
• 4 You can try "trailingComma": "all" then or check if you are eslint also. That might be overriding some setting. – Zuckerberg Commented Apr 22, 2020 at 16:56
• Interesting fact Default value changed from es5 to all in v3.0.0 – Bernhard Döbler Commented Jul 17, 2024 at 8:33

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 154

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

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

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.

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.

To modify the setting in VSCode:

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

Now change trailingComma to none

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

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
}

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

To disable trailing comma for one specific file:

1. Update prettier.config.cjs file:

config: {
 overrides: [
        {
            files: ['.hintrc'],
            options: {
                trailingComma: 'none',
            },
        },
    ],
}

2. Restart your editor/ESLint server after making this change.

本文标签： javascriptTrailing comma after last line in objectStack Overflow