How do you format code in Visual Studio Code (VSCode)?

Mastering Code Formatting in Visual Studio Code

Learn how to effectively format your code in VSCode using built-in features, extensions, and custom settings for consistent and readable code.

Consistent code formatting is crucial for readability, maintainability, and collaborative development. Visual Studio Code (VSCode) offers robust features to help you keep your code clean and standardized. This article will guide you through the various methods of formatting code in VSCode, from basic built-in commands to advanced extension configurations.

Basic Code Formatting with VSCode's Built-in Features

VSCode comes with powerful built-in formatting capabilities that support many languages out of the box. These features allow you to quickly format a selection of code or an entire document with simple commands.

1. Format Document

To format the entire active document, use the keyboard shortcut Shift + Alt + F (Windows/Linux) or Shift + Option + F (macOS). Alternatively, you can open the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type "Format Document".

2. Format Selection

If you only want to format a specific block of code, select the desired lines and then use the keyboard shortcut Ctrl + K Ctrl + F (Windows/Linux/macOS). This will apply formatting only to the highlighted section.

3. Format on Save

For automatic formatting, enable the "Format On Save" setting. Go to File > Preferences > Settings (or Code > Preferences > Settings on macOS), search for editor.formatOnSave, and check the box. This ensures your code is formatted every time you save the file.

Enhancing Formatting with Extensions

While VSCode's built-in formatters are good, extensions often provide more advanced, language-specific, or highly configurable formatting options. Popular formatters like Prettier, ESLint (with formatting rules), and Black (for Python) are widely used.

flowchart TD
    A[Start: Code Formatting Need] --> B{Choose Formatting Method}
    B --> C{Built-in VSCode Formatter}
    B --> D{Install Extension Formatter}
    C --> E[Format Document/Selection]
    D --> F[Configure Extension Settings]
    F --> G[Format Document/Selection]
    E --> H{Satisfied?}
    G --> H
    H -->|No| I[Adjust Settings/Try Another Formatter]
    H -->|Yes| J[End: Consistently Formatted Code]

Decision flow for choosing and applying code formatting in VSCode.

Let's look at an example of how to install and configure a popular formatter like Prettier.

1. Install the Extension

Open the Extensions view (Ctrl + Shift + X or Cmd + Shift + X), search for "Prettier - Code formatter", and click "Install".

2. Set as Default Formatter

After installation, open the Command Palette and search for "Format Document With...". Select "Configure Default Formatter..." and choose "Prettier - Code formatter".

3. Configure Prettier Settings

You can customize Prettier's behavior through VSCode settings. Go to File > Preferences > Settings and search for prettier. Common settings include prettier.singleQuote, prettier.tabWidth, and prettier.semi.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.semi": false
}

Example VSCode settings.json configuration for Prettier.

Workspace-Specific Formatting and EditorConfig

For team projects, it's essential to enforce consistent formatting across all developers. VSCode supports workspace-specific settings and .editorconfig files to achieve this.

Workspace Settings

Workspace settings override user settings and are stored in a .vscode/settings.json file within your project folder. This allows you to define formatting rules that apply only to that specific project, ensuring everyone on the team uses the same standards.

// .vscode/settings.json
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "javascript.format.semicolons": "remove"
}

Example of workspace-specific settings to enforce project formatting.

EditorConfig

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. VSCode has built-in support for EditorConfig via an extension. Install the "EditorConfig for VS Code" extension to enable it.

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Example .editorconfig file for project-wide formatting rules.