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
- JSON: .source.json
- PHP: .text.html.php
- Java: .source.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': """ <ul> <li>$1</li> <li>$2</li> <li>$3</li> <li>$4</li> <li>$5</li> </ul> """
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!
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.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post