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

Tired of manually splitting your HTML attributes (or / / directives & props) up onto multiple lines?

You can now do it instantly with this extension:

Theme: Make Apps Theme

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

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:

Features

Opening Tags

The extension works on opening tags:

Theme: Make Apps Theme

Self-Closing Tags

As well as self-closing tags:

Theme: Make Apps Theme

Multiple Selections

And even works with multiple selections:

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:

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:

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:

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:	[]	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:

Known Issues

No known issues yet.

Change Log

View the Change Log here

My Other VSCode Extensions

• Make Apps Theme