The Perfect Javascript Editor

Being primarily a Java developer using Eclipse IDE, there are two things I always look for in any IDE – content assist/code completion and syntax checking/highlighting. While the latest version of Eclipse (Neon) has made a lot of improvements over the previous versions in terms of the JSDT plugin for Javascript developers, it’s far from perfect. The syntax highlighting works upto some extent but the content assist is still very primitive if at all useful.

Meet Atom – ‘A hackable text editor for the 21st Century ‘. Actually it’s much more than just an editor and with the right combination of additional packages installed, you can very well use it like an IDE. Here’s how I got the perfect Javascript editor out of it:

  1. To install Atom, head to atom.io, download and install the appropriate binary for your platform. Ubuntu users can install from the ‘webupd8team/atom’ ppa to get regular updates.
  2. The autocomplete-plus package which is responsible for code completion comes preinstalled in Atom but it alone cannot do code completion. I needed to install a code completion provider plugin for Javascript. I chose atom-ternjs package. To install a package, go to Edit > Preferences > Install tab, search for a package and click on Install.
  3. Mere installing of the provider plugin is not enough though. I need to configure it for every project for which I want the autocomplete feature. To configure, first I added a project folder in Atom via File > Add Project Folder… After which, I clciked on Packages > Atom Ternjs > Configure project. Then I had a tab opened with full of configuations where I had to choose the below options:
    1. ecmaVersion: The default is ecmaVersion6 and I let it be.
    2. libs: If you need autocomplete suggestion from browser or jquery lib, check the appropriate checkboxes.
    3. plugins: This is where I chose which Javascript framework I am using. There are a number of checkboxes and if you are not sure, my suggestion would be to check all the available ckeckboxes. I usually need nodejs related plugins only so I unchecked the angular and requirejs plugin.
  4. Click on Save & Restart Server at the bottom of the tab.

The step number 3 and 4 are needed to be executed for every new project.

That should do it. Now I have a perfect Javascript editor. Try writing some real code and see the magic!

Screenshot from 2016-08-27 23-54-08

Advertisements

I am a software developer and an open-source enthusiast. I am also a hobbyist blogger in my leisure time.

Tagged with: , , , , , , , ,
Posted in Blog, HowTos, Javascript, Node.js
3 comments on “The Perfect Javascript Editor
  1. Abhishek R says:

    Well I think Atom is truly a good editor. My online concern is that when I am writing for a specific library like NodeJS or Angular can it extend itself to support that as well.

    Or else Atom does bring in lot of goodness.

    • Yes..it can. Using the atom-ternjs plugin itself. You can use Node.js, Angular.js React.js. It will provide code completion for the built-in modules of Node.js as well as for your custom node modules also.

  2. […] If you are looking into ways of tuning your Atom editor to better suited for coding Javascript with the features like content-assist, go through this post about The Perfect Javascript Editor. […]

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

%d bloggers like this: