Create your first Atom package in JS

So GitHub released a new text editor about a week ago called Atom; they describe it as "A hackable text editor for the 21st Century" and little further down the page it reveals it is built with HTML, JavaScript and CSS. Yay I know a bit of those so time to write an awesome plugin that will make Atom my favourite editor ever!

Crack open the documentation for creating your first package and boom you are ready to go...if you know CoffeeScript & CSON that is.

Side note: I must admit that I really don't mind CoffeeScript, it's got some nifty things and I tend to find it easier on my fingers to write especially when doing object notation. Then again I also quite like HAML and Jade contrary to some popular opinions

Sure you could go and learn some CoffeeScript or stick around and we'll quickly recreate the ascii art package with JavaScript.

I won't go in to as much detail as the official tutorial so this is probably best read accompanied by the official tutorial.

Let's start

Hit cmd-shift-P and type or select "generate package", hit enter and give your new package a name like: ascii-art-js.

Delete the lib/ascii-art-js-view.coffee file as it is surplus to requirements here.

Rename the lib/ascii-art-js.coffee file to lib/ascii-art-js.js and open it.

Let's throw away the CoffeeScript generated and replace it with:

module.exports = {  
  activate: function() {
  }
};

This is equivalent to the following snippet in the original tutorial:

module.exports =  
    activate: ->

Create a Command

Lets register a new command and following the recommended convention lets namespace it as per original tutorial:

module.exports = {  
  activate: function() {
    atom.workspaceView.command(
      'ascii-art-js:convert', this.convert);
  },

  convert: function() {
    var editor = atom.workspace.activePaneItem;
    editor.insertText('Hello, JS World!');
  }
};

It's not 100% direct translation of the tutorial but for our purposes here it works just fine.

Now unlike the official tutorial I won't trick you by telling you to go and test it out as it doesn't work quite yet, instead let's open package.json and change the activationEvents to look like so:

"activationEvents": ["ascii-art-js:convert"],  

Now we can reload the window ctrl-alt-cmd-l and then cmd-shift-P and let's find ascii-art-js:convert. Lovely.

Add a Key Binding

Let's add a handy shortcut for this new awesome command.

Rename keymaps/ascii-art-js.cson to keymaps/ascii-art-js.json and again throw away everything in the file and replace with:

{
  ".editor": {
    "cmd-alt-a": "ascii-art-js:convert"
  }
}

Reload window and test it out.

Add the ASCII Art

Let's add the figlet NPM module to the dependencies in the package.json file:

"dependencies": {  
  "figlet": "1.0.8"
}

Now to install the dependency cmd-shift-P and update-package-dependencies:update. This can take couple of seconds so head over to: http://patorjk.com/software/taag and start picking a font to use!

Now that's done and you've picked a font (Star Wars) let's open lib/ascii-art-js.js again and rewrite the convert:

convert: function() {  
  var editor = atom.workspace.activePaneItem;
  var selection = editor.getSelection();
  var text = selection.getText();
  var options = { font: 'Star Wars' }; //awww yeah!

  var figlet = require('figlet');
  figlet(text, options, function(err, asciiArt) {
    if (err) {
      console.error(err);
    } else {
      selection.insertText("\n" + asciiArt + "\n");
    }
  });
 }

Lovely. Reload, select some text and test it out.

All done, having done all of that I would still probably recommend learning some CoffeeScript if only for allowing you to contribute to bunch of Atom packages currently being written with it. They have good docs on the official CoffeeScript site and CodeSchool has an excellent course on it as well.

Finished package source can be found over at https://github.com/efexen/atom-ascii-art-js

Hope you've found this helpful and do let me know what your thoughts are either via email [fxn at fxndev dot com] or on twitter @efexen