Sentry Answers>VS Code>

Format code in Visual Studio Code

Format code in Visual Studio Code

David Y.

The Problem

How do I make Visual Studio Code (VS Code) automatically format my code – i.e. normalize indentation, line breaks, and spacing?

The Solution

Code formatting in VS Code can be invoked through keyboard shortcuts or the command palette. To format the contents of the current file, we can either use the shortcut Ctrl+Shift+I (Command+Shift+I on macOS) or bring up the command palette with Ctrl+Shift+P (Command+Shift+P on macOS) and then search for and execute “Format Document”.

VS Code comes with formatters for JavaScript, TypeScript, JSON, HTML, and CSS. Formatters for other languages, as well as alternative formatters for these languages, can be found in the VS Code Marketplace, which is accessible from the editor’s Extensions pane.

Specific options for each formatter can be configured in the editor settings, which is accessible from File -> Preferences -> Settings or by entering “Settings” into the command palette. Formatting options will be available in the Extensions section, including options for built-in formatters. For example, we use the option Brace Style in CSS Language Features > CSS to choose whether CSS opening braces should be placed on the same line as rules (collapse) or on their own line (expand).

Click to Copy
body { /* collapse */ font-family: serif; }
Click to Copy
body { /* expand */ font-family: serif; }
  • Syntax.fmListen to the Syntax Podcast
  • ResourcesWhat is Distributed Tracing
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.