Create your own code snippets in Atom!

atom
#1

Atom’s code snippets allow you to type a “shortcut” (eg html and link, etc) and generate a “snippet” or code instantly. You can change and even create your own!

Let’s define our own link tag for our style sheets. In your menu bar, find and click the Snippets... option. Then in that file, we can insert this code

'.text.html.basic':
  'link':
    'prefix': 'link'
    'body': '<link rel="stylesheet" href="./css/style.css">'

Note: spacing is very important.

Now when you type link and press enter on .html files, that will automatically pop up!

Resources:

#2

This works great!

I did run into some novice ‘gotcha’ issues along the way.

  • The default snippit they give you is for JS code. You need to change the first line to '.text.html.basic' for HTML snippits.
  • It is super picky about spacing.
  • To enter multiple lines of code, use 3 quotes - “”" multiple foobar “”" - around the body section.
  • For multiple snippits, be sure to give each snippit a unique name (https://stackoverflow.com/questions/26615818/atom-editor-multiple-snippets - Thanks, Casey!)

Once I had all the spacing and names and sources figured out, it works like a dream.

#3

Here is one to add the viewport tag in your html

'.text.html.basic':
  'html':
    'prefix': 'html'
    'body': '''
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title></title>
        </head>
        <body>

        </body>
      </html>
    '''