How to Add Your Own Code Pieces to Atom

Why is Atom, a code editor made by Github, so popular among developers? Well, it’s no coincidence. Atom is great for web development, with tons of Atom Packages for easy extensions and broad language support. And what’s even better? Almost everything in Atom can be customized to your liking.

If you want to supercharge your coding workflow and save time, you’ll love Atom’s Snippets feature. By using predefined code snippets, you can quickly insert commonly used code segments, making repetitive tasks a breeze. In this post, I’ll show you how to access Atom’s built-in snippets and also create your own custom ones.

Using the built-in snippets

By default, when you use Atom, it already has special shortcuts for different programming languages. This means that if you are working on a JavaScript file, for example, Atom will only show you the available shortcuts for JavaScript. To see all the shortcuts for your current file type, just press Alt + Shift + S. If you pick a shortcut from the list and click on it, Atom will automatically insert the full shortcut into your code. But don’t worry, if you already know the shortcut you need, you can just start typing and Atom will show you a box with suggestions. This box will only display the shortcuts that match what you’ve typed so far.

Let me show you an example. When you type the letter ‘h’ in an HTML file, a nifty little list will pop up. Inside this list, you’ll find all kinds of pre-made code snippets that start with ‘h’. All you have to do is click on any option, and Atom will magically insert the entire HTML tag for you, complete with the opening and closing parts. Now, if you’re not a fan of dropdown menus, don’t worry. You can achieve the same result by simply typing ‘h1’ and pressing Tab or Enter. These keys will automatically insert the appropriate code snippet for you. How cool is that?

How to add your own code snippets

1. Locate the configuration file

If you want to include personalized code snippets in Atom, the first step is to find the configuration file called snippets.cson. This file follows the CoffeeScript Object Notation format.

To access the snippets.cson file, simply click on the File > Snippets menu at the top of your screen. Atom will then open the snippets.cson file, allowing you to add your own custom snippets.

Step 2: Choosing the Right Scope

Before you can add your own custom snippet, there are four things you need to know:

1. The name of the scope
2. The name of the snippet
3. The prefix that will act as the snippet’s handle
4. The body of the snippet

You have complete control over the name, prefix, and body of the snippet (2-4). However, you must identify the name of the scope (1) before you can add your custom snippets.

To find the scope you need, follow these steps:

1. Click on the File > Settings menu in the top menu bar
2. In the Settings window, locate and click on the Packages tab
3. In the search bar, enter the name of the scope you want (e.g., “HTML” for HTML code snippets)

When you want to use a specific language on this website, you need to click on the language support package for that language and go to its Settings. In the Grammar settings, you can easily find the name of the scope. Just look at the screenshot below to see how.

Hey there! When you’re working on your projects in Atom, there are some scopes you might find useful:

• Plain Text: .text.plain
• HTML: .text.html.basic
• CSS: .source.css
• Sass: .source.sass
• LESS: .source.css.less
• JavaScript: .source.js
• PHP: .text.html.php
• Python: .source.python
• Java: .source.java

Remember, if you want to use one of these scopes in the snippets.cson file, don’t forget to include a dot (.) before the scope name.

3. Make Short Code Snippets

If you want to create a quick code snippet that will only take up one line, you’ll need to add the scope, name, prefix, and body of the snippet to the snippets.cson file. Use the example below to format it correctly:

‘.text.html.basic’: ‘Widget Title’: ‘prefix’: ‘wti’ ‘body’: ‘ ‘

In this example, I’m going to show you how to add a tag with the class “widget-title” to your HTML code. It’s really easy to do in your Atom editor.

Once you’ve saved the configuration file, all you have to do is type the prefix and hit the Tab key. Atom will automatically insert the code snippet for you. And don’t worry, the name of the snippet will be displayed in the autocomplete results box, so you’ll know exactly what you’re inserting.

4. Create Multi-Line Code Snippets

If you want to create multi-line code snippets, the syntax is a little bit different. You still need to include the scope, name, prefix, and body of the snippet just like before.

The only change is that you need to wrap the snippet body with three double-quote marks (“””). This tells Atom that it’s a multi-line snippet.

If you want to include multiple custom snippets in the same scope, simply list them one after another. For example, let’s say you want to add a widget title and an image link snippet. You can do it like this:

“`html

‘.text.html.basic’:

‘Widget Title’:

‘prefix’: ‘wti’

‘body’: ”

‘Image Link’:

‘prefix’: ‘iml’

‘body’: ”

“`

To make your custom code snippets even more user-friendly, you can add tab stops. Tab stops allow users to navigate through the snippet using the Tab key, saving time and making it easier to input their own content.

To add tab stops, use the syntax `$1`, `$2`, `$3`, and so on. When you use tab stops, Atom will position the cursor at the first `$1`. Press Tab to jump to `$2`, Tab again to go to `$3`, and so on.

Enhance Your Snippets with Optional Parameters

Hey there! Did you know that Atom lets you spruce up your code snippets with some extra pizzazz? That’s right! You can now add optional parameters to provide additional information about your snippets. How cool is that?

These optional parameters come in handy for a couple of reasons. Firstly, if you share your editor with someone else, you can use these parameters to provide them with insight into the purpose of your snippets. And secondly, if your custom snippets are a bit on the complicated side, you can use these parameters to add useful notes.

So, how does this work exactly? Well, when you start typing a snippet prefix, Atom will display the values of the optional parameters right there in the autocomplete results box. This way, you can see at a glance what each snippet is all about. It’s like having your own little cheat sheet!

Let’s take a look at an example. Imagine you have a custom snippet for a widget title. Now, you can add a description and a “More” link to it, making it even more powerful. Check it out:

I can help you add a widget title to your sidebar widget. Just start typing “wti” and you’ll see some extra information, including a description and a link, at the bottom of the autocomplete results box. If you want to learn more about adding extra information to your custom snippets, check out the other optional parameters.

You can find more information about this feature here.