Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>Split HTML Attributes (Vue, React, Angular)New to Visual Studio Code? Get it now.
Split HTML Attributes (Vue, React, Angular)

Split HTML Attributes (Vue, React, Angular)

Danny Connell

|
135,415 installs
| (20) | Free
Split your Vue, React & Angular directives & props (and HTML attributes) onto new lines, instantly!
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Split HTML Attributes (Vue, React, Angular) - VSCode Extension

Inline (VSCode extension) version badge Inline (VSCode extension) installs badge Inline (VSCode extension) rating badge

Tired of manually splitting your HTML attributes (or Vue.js / React / Angular directives & props) up onto multiple lines?

You can now do it instantly with this extension:

Demo
Theme: Make Apps Theme

Created by Danny, from Make Apps with Danny (YouTube Channel):

MakeAppsWithDanny

Contents

  • Support
  • Features
    • Opening Tags
    • Self-Closing Tags
    • Multiple Selections
    • Closing Bracket on New Line
    • Ordering
    • Unsplit Attributes
  • Usage
  • Extension Settings
    • Settings
    • Keybindings
  • Don't Forget...
  • Known Issues
  • Change Log
  • My Other VSCode Extensions

Support

Find this extension useful? Please support it by leaving a review:

LeaveAReview

Features

Opening Tags

The extension works on opening tags:

OpeningTags
Theme: Make Apps Theme

Self-Closing Tags

As well as self-closing tags:

SelfClosingTags
Theme: Make Apps Theme

Multiple Selections

And even works with multiple selections:

MultipleSelections
Theme: Make Apps Theme

Closing Bracket on New Line

You can choose whether to place your closing bracket (> or />) on a new line or not:

DemoClosingBracket
Theme: Make Apps Theme

Ordering

You can set the sort order for your attributes. For example, as a Vue.js developer, you can make sure your important Vue directives & handlers come first:

AttributeSorting
Theme: Make Apps Theme

Unsplit Attributes

If you trigger the extension on an opening (or self-closing) tag that's already split, it will unsplit it back onto a single line:

Unsplit
Theme: Make Apps Theme

Usage

Just select your opening (or self-closing) tag - from the opening angle bracket (<) up to the closing angle bracket (>) and either:

  • Open Command Pallette (CMD/CTRL + Shift + P) and choose Split HTML Attributes
  • Or use the keyboard shortcut (which defaults to Ctrl + Alt + Shift + A)

Extension Settings

Settings

Setting Default Type
tabSize
splitHTMLAttributes.tabSize

Set the indentation size for your split lines.
2 Number
useSpacesForTabs
splitHTMLAttributes.useSpacesForTabs

Use spaces for indentation (instead of tabs).
true Boolean
closingBracketOnNewLine
splitHTMLAttributes.closingBracketOnNewLine

Place closing bracket (> or />) on a new line.
false Boolean
sortOrder
splitHTMLAttributes.sortOrder

Preferred sort order of attributes.
Can be an array of strings or regex.
A typical setting for Vue.js development might be:
["^v-if", "^v-else", "^v-show", "^v-model", "^v-for", "^:key", "^key", "^v-", "^:", "^@click", "^@", "^id", "^class", "^.*=\""]
Which would sort your attributes like so:
AttributeSorting
[] Array

Keybindings

You can change the keyboard shorcut. This is the default:

{
  "command": "extension.splitHTMLAttributes",
  "key": "ctrl+alt+shift+a"
}

Don't Forget...

If you find this extension useful, please support it by leaving a review:

LeaveAReview

Known Issues

No known issues yet.

Change Log

View the Change Log here

My Other VSCode Extensions

  • Make Apps Theme
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft