1. Web Design
  2. Atom

Atom in 60 Seconds: Working With Snippets

Scroll to top
Read Time: 1 min
This post is part of a series called 60 Second Video Tutorials.
Atom in 60 Seconds: 3 Beautiful Themes
Sketch Mirror in 60 Seconds

Snippets allow you to write a keyword and then expand it into a predefined piece of code. Here are some of my favorite Atom snippets, in sixty seconds!

How to Create an Atom Snippet

To create your own snippet first go to Atom > Snippets to open snippets.cson (a CoffeeScript Object Notation file). Then you need to define your scope or the file types in which the snippet will be available.

Here’s a scope list to help you:

  • HTML: .text.html.basic
  • CSS: .source.css
  • Sass: .source.sass
  • JavaScript: .source.js
  • JSON: .source.json
  • PHP: .text.html.php
  • Java:
  • Ruby: .text.html.erb
  • Python: .source.python
  • Plain text (including markdown): .text.plain

Next, you give your snippet a name and a “trigger keyword” followed by the snippet itself. For example, here the snippet is named “5 item list”, the trigger is “five”, and the content which is outputted is an unordered list with five list items:

'5 item list':
    'prefix': 'five'
	'body': """









As you’ll see in this example, you can add placeholders as the dollar sign, followed by a number.  Also, if the body text has more than one line use triple quotes for separation.

Once done, save, and type the keyword in an HTML file. The snippet will expand and you’ll be able to tab through the placeholders you created.

Learn More Atom

There’s plenty more about Atom on Envato Tuts+, dig in!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.