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).

body { /* collapse */ font-family: serif; }
body { /* expand */ font-family: serif; }

Loved by over 4 million developers and more than 90,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.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

    A better experience for your users. An easier life for your developers.

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