Guys, today I am going to tell you that how to write your first package for the Atom text editor.
Atom is a coding editor created by the GitHub team.
It is very simple, powerful and highly customizable editor.

Here I am going to create a plugin for finding and using code snippets from StackOverflow.

Before proceeding, you have to familiar with the usage of the command line, javaScript programming, promises, and HTTP.

Installing Atom


First of all, you have to download ATOM and install apm, a tool used for monitoring and management of performance and availability of software application.

You can do this by following steps

• Opening ATOM and exploring to Atom > Install Shell Commands in the application menu.
• Check that apm was installed properly by opening your command line terminal and running apm -v, which should print the version of the tool and related environments.

apm -v
> apm  1.9.2    
> npm  2.13.3
> node 0.10.40
> python 2.7.10
> git 2.7.4

Generating Starter Code


Here I am going to start by creating a new package using a utility provided by Atom.

• Open the editor and press Ctrl+Shift+P (on Windows/Linux) or if you are using the Mac operating system then Cmd+Shift+P to open the Command Palette.

• After opening the command palette search for “Package Generator” create a package and click the corresponding item on the list. You will see a prompt where you can enter the name of the package - “enter name”.

• Press enter to create the starter package, which should automatically be opened in Atom.

Running the starter code

Once you generate a starter package, try this before diving into the code itself.
You have to reload an ATOM to make it aware of the new package that was added.
For this, you have to open the command palette again and run the “Window: Reload” command.

You have to run this command every time you want to test the changes you make in package.
Run the package toggle command by exploring to Packages > package name> Toggle utilizing the editor menu or run it: You should see a black box appear at the top of the screen. If you want to hide it then you can do it by running the command again.

The “toggle” command

toggle() {
console.log('Sourcefetch was toggled!');
return (
    this.modalPanel.isVisible() ?
    this.modalPanel.hide() :
    this.modalPanel.show()
    );
 }

Basically, toggle is a function exported by the module. It uses a ternary operator to show, call and hide on the modal panel based on its visibility.

Modal Panel: It is an instance of a Panel, a UI element provided by the Atom API. We declare modal Panel inside export default, which gives us a chance to get to it as an example variable with this.

Making your first code change

Let’s suppose you’re going to change toggle to reverse text selected by the user.

Change “toggle”
Change the toggle function to match the snippet below.
toggle() {
    let editor
        if (editor = atom.workspace.getActiveTextEditor()) {
        let selection = editor.getSelectedText()
        let reversed = selection.split('').reverse().join('')
        editor.insertText(reversed)
        }
     }

Test your changes

Here is a step by step guide to test your changes

• Reload Atom by running Window: Reload in the Command Palette.

• Go to File > New to create a new file, type anything you like and select it with the cursor.

• Run the sourcefetch:toggle command using the Command Palette, Atom menu, or by right clicking and selecting “Toggle sourcefetch”

The updated command will toggle the order of the selected text.

The Atom Editor API

The code uses the TextEditor API to manipulate and access the text inside the editor.

let editor
if (editor = atom.workspace.getActiveTextEditor()) { /* ... */
let selection = editor.getSelectedText()
let reversed = selection.split('').reverse().join('')
editor.insertText(reversed)

Your selected text is reversed using JavaScript String methods. Finally, you call insertText to replace the selected text with the reversed counterpart.

Exploring the starter package

Let’s take a closer look at how an Atom package is organized by exploring the starter code.
The main file

It is the entry-point to an Atom package. ATOM knows where to find the main file from an entry in package.json:
"main": "./lib/sourcefetch",

Events

• Activate: It is called when the package is initially loaded by Atom. This function is used to initialize objects needed by the package, and to subscribe handler functions to package commands.

• Deactivate: This event is called when the package is deactivated.

• Serialize: It is called by Atom which allow you to save the state of the package between uses.

Well guys, hope you like this tutorial!!!