Reading list Switch to dark mode

    How to add the custom code snippet to atom

    Updated 15 October 2018

    Atom is the very popular code editor created by Github in the area of web development. atom does not have only lots of package rather its every part is customizable by the user.

    We can make our coding workflow more easily by using the Atom’s Snippets feature, we can reduce the repetitive part of our work. I will show you how you can use Atom’s built-in code snippets, and create your own custom snippets in this post.

    Adding your custom code snippets

    To add your own custom code snippets to Atom, first of all, you need to find the configuration file called snippets.cson, CSON is standing for Coffee Script Object Notation

    Click on the Edit > Snippets… menu in the top bar, and Atom will open the snippets.cson file to which you can add your own custom snippets.

    Start your headless eCommerce
    now.
    Find out More

    You will need four things in order to add your custom snippet:

    The name of the scope, the name of the snippet, prefix that will function as the handle of the snippet, the body of the snippet. name, prefix, and body of the snippet depend on you and however, you find the name of the scope before adding your custom snippets.

    To find the scope just go to atom setting by pressing Ctrl +, and find the packages tab then search the scope that you need in the search box.
    For example, if you want to add the snippet for PHP language then type PHP in the search box

    Click on the setting button of language-php, then you can quickly find the name of the scope, as you can see in the screenshot below.

    Here are some scopes you may want to use in your Atom projects:

    Plain Text:    .text.plain
    HTML:          .text.html.basic
    CSS:               .source.css
    JavaScript:   .source.js
    PHP:              .text.html.php
    Java:              .source.java
    Tpl:                .text.tpl

    Create Single-Line Code Snippets

    To create a single-line code snippet, you need to add scope, name, prefix, and the body of the snippet to the snippets.cson file, using the following syntax:

    Note:- Don’t forget to add the dot (.) operator in before the name of scope.

    Create Multi-Line Code Snippets

    Multi-line code snippets, You need to add the same data as for single-line snippets — the scope, the name, the prefix, and the body of the snippet.

    It is a little bit different that snippet body within a pair of """ (three double-quotes).

     

    After saving the configuration file, whenever you type the prefix & hit the Tab key, Atom will paste the belonging snippet body into your code editor. The name of the snippet (in the example Print) will be displayed in the autocomplete results box.

     

    Add Optional Parameters

    Atom allows you to add extra information to your snippets by using Optional Parameter.

    The values of the optional parameters are displayed in the autocomplete results box that comes up when you begin to type a prefix. In the example below, I added a description & a More... link to the previous PHP Print_r custom snippet:

     

    Output at code view.

    I hope you enjoyed this article, we will have some more useful articles in future which will be helpful for developer’ daily coding life.

    I will see you again with the new topic and have a great day!

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home