Emmet is a nice plugin that lets you write HTML and CSS using abbreviations that expands out to it’s full code equivalent.
For example:
html:5
After typing the above and hitting the expansion trigger in your preferred editor will produce this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
This allows you as a developer to not sweat about remembering the structure of certain markup and also saves you time.
By default the Emmet plugin for the Atom editor will expand abbreviations using the tab key for HTML, CSS, Sass/CSS and LESS syntaxes. But what if you’re a front-end developer using Emmet with JSX for React or Handlebars for Ember.js? Or working in a Markdown file for Jekyll? Typing your Emmet abbreviations and hitting the tab key doesn’t trigger the magic that you’re used to from Emmet.
You can add additional support for syntaxes like JSX or Liquid to Emmet in Atom by going to Atom > Keymap… then in the keymap.cson file that opens up, copy and paste this:
'atom-text-editor:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
Then restart Atom and when you’re back in Atom, you should now be able to tab expand Emmet abbreviations in syntaxes like JSX or Markdown.