Author of cokoajs talks getting the most from Atom
Atom is — for my 2 pence — one of the strongest development tools out there. It’s slick, fast and capable of nearly anything one can achieve in a fully-fledged IDE counterpart. Sadly, Atom’s profoundly modular and hackable nature might be intimidating to fledgling developers. If you’re new to atom, this article is for you: the steep learning curve is worth it!
Some Notes Before we Begin
atom-ide-ui
One of the most ambitious packages to date, it has a lot of features; be sure to read the package details when you have the chance! as the name suggests, this is a suite of User Interface (UI) tools that enable Atom to host features similar to Integrated Development Environments (IDEs) like — for example — Microsoft’s Visual Studio. Many of the packages baked into this almighty beast were discrete releases in their own right; mercifully, they now exist in one solid, comprehensive tool.
The reason this package is so brilliant is because Atom text editor is free and runs loops around other IDEs in terms of performance. Installing this package makes you able to take advantage of the js-hyperclick, vue-hyperlick and the atom-ide-debugger-node I mention below possible.
js-hyperclick & vue-hyperclick et al.
The “*-hyperclick” family is comprised of time-saving tools that let you jump around different files, functions and variable definitions quickly. Simply ctrl-click over a variable call, function call or file import and Atom will take you to its original definition. See the cool gif above for an example!
atom-ide-debugger-node
Integrates with the atom-ide-ui package I mention above, allowing you to debug Node JS in Atom! To set this up, install the package. Now when you run inspect on a nodeJS program you can “attach” the Atom debugger.
To do this:
- Take a note of the port number, by default, it’ll be 9229. But when you run inspect you’ll see it in your terminal as hilighted in bold below:
Debugger listening on ws://127.0.0.1:9229/399588b8–394c-4877-bd10–2c85fb7eb355
2. select “Attach Debugger…” from the debugger drop down
3. enter the port number and click “Attach”!
4. a debugger window will appear on the right-hand side of the screen:
now, you can add breakpoints to your code by clicking in the margin beside the line number (see the little blue dot in image below).
when you run the code (for example, I’m using Co.Koa as my server here, if I open a browser and call http://localhost:3000/calendar this piece of code will run) it will halt at the break point. This allows you to watch what it’s doing, try out custom logic and so on:
Experiment with the icons in the debugger to move the program forward, jump into and out of called functions etc.
A console will also appear allowing you to call operations within the scope of the executing code:
In my experience, this is best coupled with using nodemon instead of the default node command. For information on nodemon click here.
platform-ide-terminal
A simple tool for integrating the terminal into atomJS. I don’t have much to say other than: it just works. You use ctrl-` to show and hide the terminal; believe me, it will become as second-nature in no time.
last-cursor-position
Another absolutely invaluable tool. As your projects get bigger and you’re clicking between numerous files, it’s easy to get lost! Often times, you navigate to a different file to check something and then you simply want to return to the previous line of code on the previous file. This package allows you to jump back and forth throughout your cursor history within the current atom session simply by clicking alt _ or alt -
I like to change these shortcuts to the slightly easier alt [ and alt ]. You can do the same by entering the following into Atom’s keymap.cson (found using ctrl-p and searching for keymap.cson).
NB. At the time of writing, I encountered a bug with last-cursor-position; it looks like the cursor history was sometimes getting stored incorrectly and this was throwing an error message. I have written a fix to this bug and submitted it to the author, the correction may be in place when you read this. If not, you can manually hack your local copy of this package by replacing the lines in red with lines in green as shown on this page (more detail here). To do so, navigate into the package in settings > packages > last-cursor-position and click “View Code”:
A new atom session will open with this project in the folder tree. navigate to lib/last-cursor-position.coffee and replace the lines of code as mentioned in the github above (line spacing is important in CoffeeScript. you must have the same number of spaces indenting the code as in the fix I give above). Save, then close the new session and your main atom session down and restart.
file-icons
Projects tend to get big fast! As they do, it’s easy to start finding the directory tree quite slow and painful to read through. Icons make things a little less painful by helping you to delineate the different types of technologies in your projects. Plus, hey, they look cool!
I think that about covers the best of the best for me. There are many others of merit too. The reader will note that I haven’t mentioned Git/Version Control packages. Personally, I don’t feel that anything in Atom has beaten git kraken for GUI assistance as yet, but split-diff and git-plus are both worth checking out.
One Last Tip!
Save yourself hours with a shortcut to your setting page! I have ctrl alt enter set up to take me straight to the installed packages section; I would suggest you do the same! just add the following to your keymap.cson
Jay Edwards is a software developer, author of the Co.Koa framework and digital nomad, for more information, please visit jayedwardscode.com