Split HTML Attributes (Vue, React, Angular) installs statistics

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 () 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:

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