The snippet to create all snippets in Atom editor

After switching from Wordpress to Jekyll I got a lot faster load times. But I also got to type more to get a post published. This can be eased by using snippets in the Atom editor in which i write my posts.

A snippet is a small region of code that you use often. In Atom and many other editors these can be inserted by typing a few words and then let the editor fill in the rest by pushing tab.

Jekyll example

In Jekyll you start all posts with defining a few variables in front matter. This posts front matter look like this:

---
layout: post
title: The snippet to create all snippets in Atom editor
categories:
- Miscellaneous
image:
  source: /wp-content/uploads/2017/01/the-snippet-to-create-all-snippets-in-atom-editor.png
  width: 1200
  height: 627
excerpt: You can use a snippet to create snippets in Atom Editor. It's useful for long expressions you use often.
---

Instead of typing that every time I create a post I can create a snippet that automatically finishes all that text after i type --- and push tab.

Creating a snippet in Atom

Open up the snippets.cson file by clicking Atom->Snippets... in the menu.

Atom snippets menu

Now type snip and push tab to get a scaffold for creating your own snippet. When first pushing tab this is what we’ll get:

'.source.js':
  'Snippet Name':
    'prefix': 'Snippet Trigger'
    'body': 'Hello World!'

1. the .source.js is setting in which files the snippet will be active. In this case javascript files.
2. ‘Snippet Name’ is the name of the snippet.
3. Prefix is what will trigger the snippet.
4. Body is what the trigger will be replaced with.

This is an example of a snippet that works in markdown files to add front matter variables:

'.source.gfm':
  'front matter':
    'prefix': '---'
    'body': """---
      layout: post
      title: Proposales Electron app - My first freelance assignment
      categories:
      - Miscellaneous
      image:
        source: /wp-content/uploads/2017/01/proposales-electron-app-first-freelance.png
        width: 1200
        height: 627
      excerpt:
      ---
      """

A snippet with tab stops

In this blog i also use a lot of code highlighting. To highlight code with Jekyll you type something like this:

{% highlight javascript %}    
  let variable = "text";     
{% endhighlight %}

instead of always adding a javascript snippet i can add a tab stop to this snippet so that i always get to type what language i am highlighting. That snippet would look like this:

'.source.gfm':
  'highlight':
    'prefix': 'high'
    'body' : """{% highlight $1 %}
    $2
    {% endhighlight %}"""

That was a quick introduction to snippets in Atom. Check out the documentation to learn more.