dannyconnell / vscode-split-html-attributes

VSCode extension for splitting HTML attributes onto separate lines

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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

About

VSCode extension for splitting HTML attributes onto separate lines


Languages

Language:JavaScript 100.0%