How to Add Custom Code Snippets to Atom

It’s not a fluke that Atom, a source formula editor combined by Github is renouned in a web growth community. It’s not usually easily extensible with thousands of Atom Packages, and has a wide denunciation support, though roughly a any partial is customizable by a user.

By leveraging Atom’s Snippets feature, we can make your coding workflow some-more productive, as by reusing repeated formula snippets we can revoke a repeated partial of your work. In this post, I’ll uncover we how we can use Atom’s built-in formula snippets, and create your possess tradition snippets.

A Look Into Atom: Github’s New Code Editor

A Look Into Atom: Github’s New Code Editor

Github, a renouned git repository that hosts a ton of open source projects, has recently announced a new…Read more

Use built-in formula snippets

By default, Atom comes with built-in formula snippets, any of that is bound to a scope belonging to a certain record type. For instance, if we are operative on a record with .js extension, usually snippets belonging to a JavaScript range will be accessible for that file.

To see all accessible snippets for your stream record type, strike Alt+Shift+S. If we select a dash from a drop-down list and click on it, Atom will insert a full dash into your editor but any serve hassle.

All Built-In SnippetsAll Built-In Snippets

If we are already wakeful of a options, we don’t indispensably have to bucket a whole list. When we start to type, Atom pops an autocomplete formula box up, that contains a accessible formula snippets belonging to a certain range and a fibre you’ve typed so far.

For example, if we form a h impression into a .html file, a dropdown list with all built-in HTML snippets commencement with h will appear.

By clicking on any option, Atom will paste a full HTML tag (e.g. h1/h1), and position a cursor within a starting and shutting tag.

If we don’t wish to worry with a dropdown list, we can grasp a same outcome by typing h1, and attack Tab or Enter — both of these keys insert a full formula snippet belonging to a prefix of a snippet.

Built-In HTML Code SnippetsBuilt-In HTML Code Snippets

30 Regex Code Snippets All Web Developers Should Know

30 Regex Code Snippets All Web Developers Should Know

Regular expressions are a absolute apparatus that should be in any developer’s apparatus belt. They can compare against…Read more

Adding your tradition formula snippets

1. Find a pattern file

To supplement your possess tradition formula snippets to Atom, initial we need to find a configuration record called snippets.cson that is a CoffeeScript Object Notation file.

Click on a File Snippets... menu in a tip bar, and Atom will open a snippets.cson record to that we can supplement your possess tradition snippets.

Snippets Configuration FileSnippets Configuration File

2. Find a Right Scope

You will need four things in sequence to supplement your tradition snippet:

  1. The name of a scope
  2. The name of a snippet
  3. The prefix that will duty as a hoop of a snippet
  4. The body of a snippet

The name, a prefix, and a physique of a dash (2-4) only depends on you, however we contingency find a name of a scope (1) before adding your tradition snippets.

To find a range we need, click on a File Settings menu in a tip menu bar, afterwards find a Packages add-on among a Settings. Here, run a hunt for a range we need, for instance if we wish to supplement formula snippets to a HTML language, form HTML into a hunt bar.

Click on a language support package of a selected language, and open a possess Settings. Among a Grammar settings, we can fast find a name of a scope, as we can see on a screenshot below.

Language ScopeLanguage Scope

Here are some scopes we might wish to use in your Atom projects:

  • 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

Don’t forget that we will need to add a dot (.) in front of a name of a scope in sequence to use it in a snippets.cson file.

3. Create Single-Line Code Snippets

To emanate a single-line formula snippet, we need to supplement a scope, a name, a prefix, and a physique of a dash to a snippets.cson file, regulating a following syntax:

'.text.html.basic':
    'Widget Title':
      'prefix': 'wti'
      'body': 'h4 class="widget-title"/h4'

This instance dash adds a h4 add-on with a widget-title category to a HTML scope. You can supplement any other single-line formula dash to your Atom editor following this syntax.

After saving a pattern file, whenever we type a prefix strike a Tab key, Atom will pulp a belonging dash physique into your formula editor. The name of a dash (in a instance Widget Title) will be displayed in a autocomplete formula box.

4. Create Multi-Line Code Snippets

Multi-line formula snippets use a small bit opposite syntax. You need to supplement a same information as for single-line snippets — a scope, a name, a prefix, and a physique of a snippet.

What is opposite here is that we need to place a dash physique within a span of """ (three double-quotes).

'.text.html.basic':
    'Image Link':
      'prefix': 'iml'
      'body': """
        figure
          a href="" target="_blank"
            img src="" width="" height="" alt=""
            /a
        /figure
        """

If we wish to supplement more than one tradition snippets to a same scope, supplement a name of a range only once, afterwards list a snippets one by one:

'.text.html.basic':
    'Widget Title':
      'prefix': 'wti'
      'body': 'h4 class="widget-title"/h4'
    'Image Link':
      'prefix': 'iml'
      'body': """
        figure
          a href="" target="_blank"
            img src="" width="" height="" alt=""
          /a
        /figure
        """
5. Add Tab Stops

You can serve promote a use of your tradition formula snippets by adding tab stops to a dash body. Tab stops prove a spots where a user can navigate by regulating a Tab key. With add-on stops we can save a time that in-text navigation requires.

You can supplement add-on stops using a $1, $2, $3, ... syntax. Atom will position a cursor to a place it finds $1, afterwards we can burst to $2 with a Tab key, afterwards to $3, and so on.

'.text.html.basic':
    'Image Link':
      'prefix': 'iml'
      'body': """
        figure
          a href="$1" target="_blank"
            img src="$2" width="$3" height="$4" alt="$5"
            /a
        /figure
        """
6. Add Optional Parameters

Atom allows we to add additional information to your snippets by regulating optional parameters. This underline can be useful if someone else also uses your editor and we wish to let them know a purpose of a snippet, or if we have so difficult tradition snippets that we need to supplement records to them.

The values of a discretionary parameters are displayed in a autocomplete formula box that comes adult when we start to form a prefix. In a instance below, we combined a outline a More... couple to a prior Widget Title tradition snippet:

'.text.html.basic':
    'Widget Title':
      'prefix': 'wti'
      'body': 'h4 class="widget-title"/h4'
      'description': 'You can supplement a widget pretension with this
          dash to your sidebar widget.'
      'descriptionMoreURL': 'http://hongkiat.com'

When a user starts to form a prefix wti, a additional information (description + link) will be displayed during a bottom of a autocomplete formula box. Have a demeanour during a other discretionary parameters we can use to supplement additional information to your tradition snippets.

Optional ParametersOptional Parameters

Add Comment