VS Code Prettier: Remove semicolon or trailing comma

avatar
Borislav Hadzhiev

Last updated: Apr 6, 2024
4 min

banner

# Table of Contents

  1. VS Code Prettier: Remove semicolons
  2. VS Code Prettier: Remove trailing commas

# VS Code Prettier: Remove semicolons

If you need to remove semicolons when using VS Code Prettier:

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings and select Preferences: Open User Settings.

open user settings

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

  1. Type prettier semi and uncheck the Prettier: Semi setting.

uncheck prettier semi

When the Prettier: Semi checkbox is unchecked, semicolons aren't added at the end of every line.

semicolons removed

# Remove semicolons using a .prettierrc file

Alternatively, you can create a .prettierrc file in the root directory of your project (where your package.json file is) and set the semi property to false.

.prettierrc
{ "semi": false }

remove semicolons using prettierrc

When the semi property is set to false, no semicolons are added at the end of lines.

# Removing semicolons using the command line

If you want to remove semicolons using the command line, use the following command.

shell
npx prettier --write --no-semi index.js

remove semicolons using command line

Make sure to replace index.js with the name of your file.

# VS Code Prettier: Remove trailing commas

If you need to remove trailing commas when using VS Code Prettier:

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings and select Preferences: Open User Settings.

open user settings

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

  1. Type prettier trailing and set the Prettier: Trailing Comma setting to none.

vscode prettier remove trailing comma

When the Prettier: Trailing Comma setting is set to none, no trailing commas are added.

The option can also be set to:

  • es5 - trailing commas are added where valid in ES5 (objects, arrays, etc).
  • all - trailing commas are added wherever possible (including function arguments).

# Remove trailing commas using a .prettierrc file

Alternatively, you can create a .prettierrc file in the root directory of your project (where your package.json file is) and set the trailingComma property to none.

.prettierrc
{ "trailingComma": "none" }

set trailing comma property to none in prettierrc

The global VS Code setting sometimes gets overridden, so using a .prettierrc file is a solid choice because it takes precedence.

If you only want to add trailing commas where valid in ES5 (objects, arrays, etc), set the trailingComma property to es5.

.prettierrc
{ "trailingComma": "es5" }

# Remove trailing commas using the command line

If you want to remove the trailing commas when using the command line, use the following command.

shell
npx prettier --write --trailing-comma none index.js

remove trailing commas using command line

Make sure to replace index.js with the name of your file.

# Removing trailing commas or semicolons in settings.json

You can also remove the trailing commas or semicolons in a settings.json file:

  1. In the root directory of your project, create a .vscode folder.
  2. Create a settings.json file in the .vscode folder.

Add the following code to the .vscode/settings.json file.

.vscode/settings.json
{ // remove semicolons "prettier.semi": false, // remove trailing commas "prettier.trailingComma": "none" }

removing trailing commas or semicolons in settings json

Make sure the .vscode/settings.json file is located in the root directory of your project.

Note that setting the properties in a settings.json file has no effect if you have a .prettierrc file in the root directory of your project.

# Removing trailing commas or semicolons using your settings.json file

You can also remove trailing commas or semicolons in your global settings.json file:

  1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).
Note: you can also press F1 to open the Command Palette.
  1. Type user settings json.

  2. Click on Preferences: Open User Settings (JSON)

preferences open user settings

  1. Add the following properties to the object in the settings.json file.
settings.json
// Remove semicolons "prettier.semi": false, // Remove trailing commas "prettier.trailingComma": "none",

Make sure the properties are wrapped in an object if your settings.json file is empty.

settings.json
{ // Remove semicolons "prettier.semi": false, // Remove trailing commas "prettier.trailingComma": "none", }

Setting the prettier.semi property to false removes the semicolons.

Setting the prettier.trailingComma property to none removes the trailing commas.

I've also written an article on how to enable Font Ligatures in VS Code.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.