How to Create Atom Snippet Step by Step Quick Start Guide

October 24th, 2017 by thelinuxevangelist

Create Atom Snippet




Welcome Atom User! This Tutorial Shows You Step-by-Step How-to Create a New Snippet on Atom Editor.

Especially relevant: here for Instance is Presented How to Create Atom Html Snippet, but this would be an Example for All the supported Languages.

Furthermore Atom Snippets files are Stored in a package’s snippets/ folder and also loaded from ~/.atom/snippets.cson. They can be either .json or .cson File Types.

How to Create Atom Snippet Step by Step Quick Start Guide - Featured
  1. First on Atom Menu >> Select Snippets
    The First View should be like this:

    # Your snippets
    #
    # Atom snippets allow you to enter a simple prefix in the editor and hit tab to
    # expand the prefix into a larger code block with templated values.
    #
    # You can create a new snippet in this file by typing "snip" and then hitting
    # tab.
    #
    # An example CoffeeScript snippet to expand log to console.log:
    #
    # '.source.coffee':
    #   'Console log':
    #     'prefix': 'log'
    #     'body': 'console.log $1'
    #
    # Each scope (e.g. '.source.coffee' above) can only be declared once.
    #
    # This file uses CoffeeScript Object Notation (CSON).
    # If you are unfamiliar with CSON, you can read more about it in the
    # Atom Flight Manual:
    # http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson
    
  2. Choose the Language Scope for you Snip
    For example here I choose Html…

  3. So Go to Atom > Preferences > Packages
    And Search for instance ‘html’ like here:

    How to Create Atom Snippet Step by Step Quick Start Guide - Search Html Language

    If you do Not Find a Corresponding Installed Package you should first see How to Install it…
    Then Select the Language Package and Find the Correct Scope:

    How to Create Atom Snippet Step by Step Quick Start Guide - Find Language Scope
  4. Next Start Creating the Snippet
    So in the First Line Set the right Language’s Parameter:

    '.text.html.basic':
    

    Again Set the Snip’s Name:

    'Hello Html':
    

    Then Hit Enter and Choose the Prefix Key to Trigger the Snip:

    'prefix': 'hellohtml'
    

    Furthermore Hit Enter and Append the Body of the Snip:

    'body': '

    Hello from a Html Snip!

    '

    All in one:

    '.text.html.basic':
       'Hello Html':
          'prefix': 'hellohtml'
          'body': '

    Hello from a Html Snip!

    '

    Save.

  5. Make an Html File

  6. Finally Try The Html Snippet
    Start Typing:

    hellohtml
    

    Befor you finishing a Popup should Presents the Snippet’s Choice:

    How to Create Atom Snippet Step by Step Quick Start Guide - Choose Html Snip

    Or Hit ‘Tab’ after
    And in the Editor will be Shown Up:

    Hello from a Html Snip!

  7. So Now U Should Happily Hinitiated to the Joyful Art of Atom Snippet Creation ;)

  8. For Further Customization See Atom Snippet Package Page

    Atom Snippet Package Github

Tags: , , , , ,