Activate Atom Snippets After Emmet

As you know, I am an artist and I like to tinker with technical snippets of software. I was once regarded as too technically minded to learn how to become a sculpture professor after studying as an apprentice at a fine art foundry. I thought that was nonsense and set out to learn information to become more technically oriented. With that in mind, I went off to grad school to receive an MFA in computer art. Afterward, I was an animation professor for 3 years until I set out to try more skills. One of those skills was learning Java and Python using the Atom code editing application.

I found that Atom is a great tool for Linux users who want to customize their open-source code editor. Recently, I took a course on Udemy.com and the instructor was using a Mac with Coda on it. I set out to follow the instructions while using Atom. I wanted to see if it was possible to use the same or similar shortcut commands that the instructor used. Along the way, I had to customize Atom to behave like Coda. If you are a Mac user and don’t want to bother with customizing or prefer a simpler UI, then just go ahead and pay $99 to use all of the functions of Coda. If not, then get Atom at no cost and have some fun with coding.

Here is a useful Atom to Emmet tip that I couldn’t find anywhere online and had to sort of piece together an assortment of information to develop a solution.

One thing the instructor introduced were snippets. At first I didn’t know they were called snippets and had to find out what the shortcuts were called in the first place. So, in Atom, I found the snippets file by navigating to Edit>Snippets. Once I was there in snippets.cson I typed snip then enter. This gave me an example of a snippet that tells you what each line represents. Be sure to give each line its proper indentation, otherwise you may find errors. This code will not function until it’s customized.

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

I dug around the internet some more and found out how to make a basic html command under

.text.html.basic
  'Normal Comment Block':
    'prefix': 'cmm'
    'body': """
    <!-- $1 
    ======================================================= -->;
    $0
    """

The ‘$1’ command in this code is where the cursor falls once the prefix command is given to execute the body contents. I took this up a notch with the following code. In this example I made a placeholder by placing the $ ahead of the brackets. Inside the brackets is the placeholder name following the colon. The number 1 marks where the cursor falls, but highlights the placeholder named “size”. ${1:size} is printed as ‘size’.

cson code

'.text.html.basic':
  'Div (short)':
    'prefix': 'c1'
    'body':'
    <div class="col-${1:size}-${2:#}">\n\n</div><!-- end col -->;'

type: C1+enter

result:

<div class="col-size-#">

</div><!-- end col -->

This did not work once I installed the Emmet package. Emmet disabled the Atom tab functions for snippets by default.

Reactivating your Atom snippets is easy

My solution was to copy the code in this page

Emmet code from original version

Save the code as ‘home/your user name/.atom/packages/emmet/lib/snippets.json’

Once this was done, all of my previous Atom snippets returned along with the Emmet snippets.

Now, I can type C1+Enter keys and the results show as:

<div class="col-size-#">

</div><!-- end col -->

Notice that I used \n\n in my code at the top. ‘\n’ is a line break and I wanted 2 line breaks so that I could start typing other coding between the lines. Also, the tabbed or indented line is defaulted to the far left of the screen if you didn’t type anything before you saved the file. So, if you want to type in your code, I advise that you don’t save the file first.

Activate Atom Snippets After Emmet Install

Leave a Reply

Your email address will not be published. Required fields are marked *