How to Automatically Format and Align Code in VS Code with Prettier

When coding in Visual Studio Code you may find yourself trying to format your code manually by using a combination of keyboard keys like Command + Shift + C, enter, and delete.

Thankfully there is a way to automatically format your code with the Prettier extension. With Prettier you can either format with a shortcut (Shift Option F on Mac) or set up automatic format on every file save.

Steps to Install Prettier

1. Within your Visual Studio code project go to extensions in the left sidebar (the icon with building blocks).
2. In the search bar, type Prettier
3. Select Prettier - Code Formatter by Prettier and click the blue Install button

How to Auto Format with keyboard shortcut from Prettier

• Option 1: After making an update to your code use the Keybinding Shift Option F on Mac to fomat your code.
• Option 2: Hold Command Shift P to run a command in the Visual Studio Code search bar, type Format Document then hit Enter

How to Auto Format on every save with Prettier

1. Type Command Shift P to run a command in the Visual Studio Code search bar or click the search bar in the top bar and enter the caret > symbol
2. After the caret symbol type Preferences:Open Workspace Settings (JSON)
3. Apply the following code to the JSON string

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Now on every save of your file you will see Prettier go into affect. You’ll also know that Prettier is correctly installed if you see it in the bottom right corner of the status bar.