It’s not a coincidence that Atom, the source code editor created by Github is popular in the web development community. It’s not only easily extensible with thousands of Atom Packages, and has a wide language support, but almost its every part is customizable by the user.

By leveraging Atom’s Snippets feature, you can make your coding workflow more productive, as by reusing recurring code snippets you can reduce the repetitive part of your work. In this post, I’ll show you how you can use Atom’s built-in code snippets, and create your own custom snippets.

Use built-in code snippets

By default, Atom comes with built-in code snippets, each of which is bound to a scope belonging to a certain file type. For instance, if you are working on a file with .js extension, only snippets belonging to the JavaScript scope will be available for that file.

To see all available snippets for your current file type, hit Alt+Shift+S. If you choose a snippet from the drop-down list and click on it, Atom will insert the full snippet into your editor without any further hassle.

If you are already aware of the options, you don’t necessarily have to load the whole list. When you start to type, Atom pops an autocomplete results box up, that contains the available code snippets belonging to the certain scope and the string you’ve typed so far.

For example, if you type the h character into a .html file, a dropdown list with all built-in HTML snippets beginning with h will appear.

By clicking on any option, Atom will paste the full HTML tag (e.g. <h1></h1>), and position the cursor within the starting and closing tag.

If you don’t want to bother with the dropdown list, you can achieve the same result by typing h1, and hitting Tab or Enter — both of these keys insert the full code snippet belonging to the prefix of the snippet.

collected from