react-selector-to-tag

Create HTML tag elements using CSS selectors in HTML files
jpstokes
1.3.0 327
Flag as spam or malicious

Selector to Tag Build Status

Selector to Tag is an Atom editor package that allows you to create HTML tag elements using CSS selectors in HTML files.

Just type a CSS selector and press TAB :

Demo animation

Demo animation 2

Supported selectors

For now the following selectors are possible:

Selector Output
foo <foo></foo> (when Solve Plain Tags option is enabled (default true))
foo#bar <foo id="bar"></foo>
#foo <div id="foo"></div>
.foo <div class="foo"></div>
foo.bar <foo class="bar"></foo>
foo.bar.baz <foo class="bar baz"></foo>
foo#bar.baz <foo id="bar" class="baz"></foo>
foo#bar.baz.qux <foo id="bar" class="baz qux"></foo>

Options

  • File Extensions - comma separated file extensions in which this package should be active (Default: "htm, html, kit, shtml, tmpl, tpl, xhtml")

  • Only On HTML Grammar - extension solves tags in any file that have the HTML grammar active. File extensions option will be ignored if this is enabled (Default: false)

  • Solve Plain Tags - this will indicate if this package should also solve to tags when there is no id or class specified in the selector. (Default: true)

  • Close Self-Closing Tags - Add a backslash before the end of self-closing tags. For example <link> will be solved to <link/> (Default: false)

  • Expand Block Tags To Multiple Lines - Puts the cursor and end tag on new lines. (Default: false)

  • Block-Level Elements - If "Expand block tags to multiple lines" is checked, these tags will count as block tags. (Default: address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, header, hgroup, hr, main, nav, noscript, ol, output, p, pre, section, table, tfoot, ul, video)

##Support

If you have any sugestions for other selectors or sugestions in general, please submit an issue on GitHub.