Activate Atom Snippets After Emmet

Some of the links in this article are "affiliate links", a link with a special tracking code. This means if you click on an affiliate link and purchase the item, websites can receive advertising revenue. The price of the item is the same whether it is an affiliate link or not. Regardless, we only recommend products or services we believe will add value to our readers.

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. Follow this useful website that I found for creating your Atom coding, continue here with this tip.

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.

'.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': """
;
$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':'

\n\n

;'

type: C1+enter

result

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:

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 image

One thought on “Activate Atom Snippets After Emmet

Leave a Reply

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