Painless ES6 workflow with Atom

ES6 on Atom with Babel

Watching the egghead.io ES6 videos, I liked the WebStorm feature to compile ES6 code right from the IDE. I wanted this neat feature as part of my workflow without using WebStorm. Atom was the right choice to achieve close to it. The following are the steps that you need to follow:

1. Install the Babel CLI

The Babel team has done an extraordinary job providing tools to transpile ES6 to ES5. Install the Babel CLI:

$ npm install -g babel

2. Download and install Atom

You can download atom from their homepage: https://atom.io/.
Protip: Launch atom from the Command line. Atom will gather your system settings like the paths to your installed libraries and such.

$ atom

3. Download the Babel language support package

The package will add ES6 support to Atom that includes code formatting and coloring, as well as transpiling. Go through the package settings and adjust them to your needs.
https://atom.io/packages/language-babel

4. Download the script package

script is a neat package that lets you run your scripts directly from Atom.
https://atom.io/packages/script

Once you have installed the packages, write your JavaScript and make sure you set your syntax to ‘Babel ES6 JavaScript’ by clicking on the bottom right of your window where it should say ‘JavaScript’. To avoid any possible confusion, you can turn off the javascript-language package that comes with Atom.

To run your code, press Command + I. This command will run the script package and you should see an output pane at the bottom.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s