Search for '{{search_term}}'

Add code snippets to Atom - the text editor

CMOS is the Code-Maven Open Source podcast that also includes video interviews. Subscribe to this feed RSS feed with your Podcast listener app or via iTunes iTunes.

Snippets are a great feature of any editor or IDE and in Atom they are quite simple to use.

How to use a snippet in Atom

In a file you start typing the "prefix" of an existing snippet. Atom will show you a list of snippets that match the text you started to write. If you stop typing you can select one of the entries using the up and down arrow.

Atom snippets in use

When you press TAB or ENTER, Atom will insert the code snippet in the place where you started to type.

There are many snippets that come with Atom pre-installed and you can easily create your own snippets as well.

Add your own snippet to Atom

You own snippets need to be defined in the snippets.cson file which is located in your home directory. For me it was in the ~/.atom/ directory, though I don't even have to know that, if I open the "Atom" menu, it has an entry to Open Your Snippets that will open the snippets.cson in your favorite editor.

Atom menu to open snippet editor

In that file you need to add an entry like this

'.text.html':
  'HTML 5':
    'prefix': 'html'
    'body': '''
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

        <link href="style.css" rel="stylesheet">
      </head>
      <body>

      </body>
    </html>
'''

This will work for html files.

The first string describes the 'scope' of where this will work.

Each file-type has a scope and each file extension is mapped to a scope. Specifically the scope of the HTML files is text.html.basic and the following extensions are considered HTML files: htm, html, kit, shtml, tmpl, tpl, xhtml

I know this because I opened the Settings (Actually the Atom / Preferences menu option) and among the Packages looked for the one handling HTML files. This is how it looks like:

HTML file type in Atom

Comments

In the comments, please wrap your code snippets within <pre> </pre> tags and use spaces for indentation.
comments powered by Disqus