How to Format Code in VS Code (Shortcut & Settings Guide)

Introduction

Clean, well-formatted code isn’t just about looks—it improves readability, reduces bugs, and makes collaboration easier. Luckily, VS Code makes code formatting incredibly simple, whether you prefer shortcuts or automatic formatting.

In this guide, you’ll learn how to format code in VS Code, including keyboard shortcuts, settings, and popular extensions like Prettier.

Why Code Formatting Matters

Proper formatting helps you:

• Read code faster
• Avoid syntax mistakes
• Follow team standards
• Look professional as a developer

Most modern teams expect consistent formatting, and VS Code helps you achieve that effortlessly.

Format Code Using VS Code Shortcut

The fastest way to format code is using a keyboard shortcut.

Format Document Shortcut

• Windows / Linux: Shift + Alt + F
• macOS: Shift + Option + F

This formats the entire file instantly.

Format Selected Code

1. Select the code
2. Right-click
3. Choose Format Selection

Perfect for formatting specific blocks without touching the whole file.

Format Code from Command Palette

You can also format code using the Command Palette:

1. Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (macOS)
2. Type Format Document
3. Press Enter

This works even if you forget the shortcut.

Enable Auto Format on Save

One of the best features in VS Code is auto-formatting on save.

How to Enable It

1. Open Settings (Ctrl + ,)
2. Search for Format On Save
3. Enable Editor: Format On Save

Now your code formats automatically every time you save the file 💡

Using Prettier to Format Code

Prettier is the most popular formatting extension for VS Code.

Install Prettier

1. Open Extensions (Ctrl + Shift + X)
2. Search Prettier – Code formatter
3. Install it

Set Prettier as Default Formatter

1. Open Settings
2. Search Default Formatter
3. Select Prettier

Now VS Code uses Prettier every time you format.