Auto Align Code in VS Code: Extensions & Native Shortcuts

To auto align code in VS Code instantly, press Shift + Alt + F on Windows/Linux or Shift + Option + F on macOS to run the built-in document formatter. If you need vertical column alignment for assignment operators or object properties, dedicated marketplace extensions or multi-cursor selection tools provide precise control that standard formatters skip over.

Maintaining clean, aligned code isn't just about making your editor look good—it's about reducing visual noise so you can spot bugs faster. When variable declarations, object keys, or trailing comments line up neatly, your eyes don't have to jump back and forth across uneven whitespace. While native VS Code settings take care of overall document indentation, getting variable assignments to align neatly down a single column usually requires a few extra tricks or tailored extensions.

Native Formatting vs. Alignment Extensions in VS Code

Auto-aligning code in VS Code can be done instantly using the native formatting shortcut Shift + Alt + F on Windows or Shift + Option + F on macOS. While this handles overall indentation based on your active language server, lining up specific assignment operators or object keys in vertical columns requires specialized extensions or multi-cursor edits.

Standard language formatters—like Prettier for JavaScript/TypeScript, Black for Python, or the built-in C# language service—focus primarily on abstract syntax tree (AST) rules. They enforce indentation depth, bracket placements, and line lengths. However, opinionated formatters often collapse custom vertical spacing, stripping away extra spaces around equals signs or colons. Understanding the difference between native structural formatting and character-level vertical alignment helps you choose the right tool for your specific codebase.

Popular Extensions for Vertical Code Alignment

Specialized alignment extensions solve vertical column spacing challenges that default language formatters usually ignore. These extensions let you select multi-line blocks of variable declarations, array items, or object properties and align assignment operators, colons, or equals signs automatically using simple keyboard shortcuts or command palette actions.

While full-document formatters handle whole files at once, alignment extensions typically work on targeted highlights. You select the messy lines, trigger a command, and the extension calculates the longest token in the selection before padding the surrounding lines with spaces to create clean vertical columns. Here are some of the most effective extensions developers rely on for this task.

Align by James Heidelberger

Align by James Heidelberger is a lightweight VS Code extension focused strictly on character-based vertical alignment across highlighted text blocks. By triggering the extension via command palette or keyboard shortcut, you can select any character, such as an equal sign or colon, and instantly snap selected lines into neat vertical columns.

Because Align operates as a text-manipulation tool rather than a language-aware parser, it works across virtually any programming language or plain-text file. You highlight a block of code, activate the command, and specify your target delimiter. The primary trade-off is that it won't automatically ignore characters embedded inside string literals, so you'll want to highlight only the lines that actually need realignment.

Visual Guidance with Bracket Colorization

Bracket pair colorization aids alignment visually by assigning matching colors to corresponding pairs of parentheses, brackets, and curly braces. While it doesn't mechanically move characters into vertical columns, this visual structure makes nested code blocks immediately readable and helps developers spot missing or misaligned closing tags during manual formatting.

Older extensions like Rainbow Brackets previously provided this capability, but modern versions of VS Code include high-performance bracket pair colorization right in the core editor engine. Enabling native bracket colorization gives you structural clarity across deep object trees or nested conditional blocks without adding extra overhead or conflicts from third-party extensions.

TabAlign for Tab-Based Indentation

TabAlign focuses specifically on aligning code lines that rely on tab stops rather than space-based padding. It is particularly useful when working with legacy codebases, plain text tables, or specific indentation rules where standard language formatters usually collapse multiple tab characters or distort column alignments across long data structures.

Tab-based alignment behaves differently than space padding because tab width can vary depending on a developer's local editor configuration. TabAlign helps bridge that gap by aligning target characters to the nearest elastic tab stop, making it easier to preserve uniform columns in files designed for variable tab rendering.

Customizing Built-In VS Code Settings for Auto Alignment

You can automate basic code alignment in VS Code without installing extra tools by enabling editor.formatOnSave and configuring editor.tabSize inside your user or workspace settings. Configuring these properties alongside editor.insertSpaces ensures your code automatically tidies its indentation every time you save your active file.

To set up native auto-formatting on save, open your settings.json file or access the Settings UI (Ctrl+, or Cmd+,) and add these configurations:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false
}

Disabling editor.detectIndentation prevents VS Code from overriding your preferred tab size when opening legacy files with mixed spacing. Additionally, setting editor.defaultFormatter on a per-language basis guarantees that pressing the format shortcut applies the exact rules your project requires.

Advanced Alignment Techniques with Multi-Cursors and Snippets

Advanced vertical alignment in VS Code often relies on built-in multi-cursor editing rather than third-party extensions. Holding Alt + Click or using Option + Command + Up/Down on macOS lets you place cursors across consecutive lines, allowing you to insert spaces or align assignment operators simultaneously across dozens of statements.

Another powerful native feature is column (box) selection. By holding Shift + Alt (or Shift + Option on macOS) while dragging your mouse, you can select vertical boxes of text across multiple lines. This makes it trivial to indent, delete, or pad entire columns of code manually without needing regex search-and-replace expressions.

For repetitive structural patterns, custom snippets offer pre-aligned templates. You can define snippets in VS Code that insert pre-formatted object schemas, variable tables, or comment blocks with tab-stop placeholders already placed in matching columns.

Comparing Popular VS Code Alignment Tools

Choosing the right alignment method depends on whether you need strict column alignment for variables or broad AST-based document formatting. Full-document formatters handle overall syntax tree indentation across entire files, while character-alignment extensions step in when you need to align assignment operators, colons, or comments vertically.

🛍 Ready to buy? Check current prices on Amazon for the picks in this guide.

When picking an approach, start with native shortcuts and multi-cursor editing first. If you frequently find yourself lining up massive blocks of variable declarations or dictionary keys, installing a dedicated extension like Align will save you significant manual effort over time.

Troubleshooting VS Code Alignment and Formatting Conflicts

Alignment conflicts usually arise when opinionated formatters like Prettier strip away custom vertical spacing every time you save. To fix this, you can disable format-on-save for specific file types, tweak extension-specific settings, or add explicit ignore comments into your source code to prevent the formatter from modifying manual alignments.

If your manual column alignment disappears every time you hit Save, check if an opinionated formatter is active. For example, Prettier intentionally removes extra spaces inside assignment blocks to maintain its standard formatting style. You can tell formatters to skip specific code sections using ignore comments:

// prettier-ignore
const firstVariable  = 'value';
const secondVar      = 'another value';
const longVariableName = 'third value';

Additionally, check for conflicting settings between workspace files (.vscode/settings.json) and your global user settings. Workspace settings take precedence over user defaults, which can cause unexpected formatting behavior when switching between projects.

Summary of Best Practices for Clean Code Formatting

Keeping code clean and aligned requires combining automated save-time formatters with deliberate, multi-cursor or extension-based vertical adjustments. Establishing consistent workspace settings across your team ensures that automated formatters don't create git diff noise by constantly fighting over spaces, tabs, or custom column alignments.

To summarize key steps for an optimal setup:

• Use Shift + Alt + F (Shift + Option + F on Mac) for general file formatting.
• Enable editor.formatOnSave for hands-free indentation consistency.
• Install targeted extensions like Align when working heavily with columnar data or large object structures.
• Use multi-cursor column selections for quick manual adjustments.
• Use ignore comments (like // prettier-ignore) when auto-formatters wipe out intentional vertical alignments.

FAQ

What is the shortcut to auto align code in VS Code?

Press Shift + Alt + F on Windows/Linux or Shift + Option + F on macOS. This triggers your default active language formatter to clean up indentation across the current file.

Why does Prettier undo my vertical column alignment?

Prettier is an opinionated formatter that strictly enforces standard spacing rules, stripping out extra alignment spaces. Use // prettier-ignore above your block to preserve custom column alignment.

Should I use tabs or spaces for code alignment?

Spaces are generally preferred for character alignment because they render identically on every screen. Tab characters rely on individual editor settings, which can distort aligned columns across different machines.

How do I turn on format on save in VS Code?

Open your Settings (Ctrl+, or Cmd+,), search for "Format On Save", and check the box. Alternatively, add "editor.formatOnSave": true directly to your settings.json file.

Will auto-aligning code break my application build?

In almost all programming languages, extra whitespace and alignment spaces have zero effect on code execution. However, space-sensitive languages like Python require careful handling of leading indentation.