Emmet

With Emmet, you can type expressions (abbreviations) similar to CSS selectors and convert them into code fragment with a single keystroke. As a web-developer, you already know how to use Emmet. Abbreviation syntax is similar to CSS Selectors with shortcuts for id, class, custom attributes, element nesting and so on. Unlike default editor snippets, Emmet abbreviations are dynamic and parsed as-you-type. No need to predefine them for each project, just type MyComponent>custom-element to convert any word into a tag. Emmet provides special syntax for CSS properties with embedded values. For example, bd1-s#f.5 will be expanded to border: 1px solid rgba(255, 255, 255, 0.5). Use single abbreviation to produce code for most popular syntaxes like HAML, Pug, JSX, SCSS, SASS etc.