Skip to content

⏳ Atom package that allows you to create HTML tag elements using CSS selectors in HTML files

License

Notifications You must be signed in to change notification settings

surdu/selector-to-tag

Repository files navigation

Selector to Tag

Actions Status Buy me a coffee

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

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.