Building a Custom Dev Environment with Atom

For this article, RealToughCandy super-subscriber Michael Kornblum takes the reins. Michael’s comments on my YouTube channel are golden, and his piece here on 11 Atom packages further illustrates his writing talents. Plus, these packages make our development lives easier. New to Atom? Start here. Enjoy! -RTC

In the world of web development, we love to see new things.

When a new web browser is introduced, we marvel at its features and rejoice when certain CSS features are supported. When a command-line tool is introduced, we welcome it with open arms in the hopes that it will improve our professional lives. Text editors, however, do not enjoy the same level of fanfare.

This is because up until recently, text editors were boring. Early text editors were little more than stripped-down word processors. Small features like syntax highlighting and tabbed interfaces were eventually added to them as features, but at the end of the day, they were really nothing to write home about.

Recently, however, text editors have started to get their moment in the sun.

Newer text editors like Visual Studio Code and Atom use a robust plugin architecture that allows developers to customize their work environment. Through the use of extension or packages, it’s possible to have a fairly minimalist setup that resembles the text editors of days past or have a fairly complex setup that includes embedded terminals, linting, and git integration.

In this article, I will focus on some of the packages I use in Atom, my text editor of choice. Many of the package that I’ll mention have counterparts in other editors like Visual Studio Code, Brackets and Sublime Text. If you are using these tools, I encourage you to look into these alternatives. They will make your life as a developer a lot easier.

lead.png

The Atom text editor + delicious bagels. We’re already off to a great start!

1. file-icons

On the surface, the benefit of having file icons in a text editor may seem nominal at best. However as projects grow larger, being able to identify file types at a glance saves time and cognitive energy. The file-icons package replaces the minimalist icons that are used in a base installation of Atom, with a colorful icon set that clearly indicates the files in a project.
Learn more about file-icons here.

file-icons.png
File icons give us immediate recognition of what we’re working with.

2. platformio-ide-terminal

platformio-ide-terminal is an embedded terminal emulator that sits in the bottom of Atom’s application window. This is one of my favorite Atom packages. By using it I am able to keep track of my development server without flipping from one window to the next. Additionally, this plug in supports multiple terminal instances, making it easy to do things like installing node packages, checking build processes and do a system update – all from the same window.
Learn more about platformio-ide-terminal here.

platformio.png

Save yourself window fatigue with platformio-ide-terminal.

3. emmet

What can I say about emmet that has not already been said? First off, emmet is used to write HTML – lot’s of HTML using a simple, easy to remember shorthand. The package has been ported to almost every text editor in existence, and is shipped in Visual Studio code by default. If you’re not using emmet to write your HTML, then you are truly missing out.
Learn more about emmet here.

4. atom-live-server

atom-live-server is a package that adds live-reload functionality to Atom. When initiated, atom-live-server opens your default web browser to the currently active project. When you make changes to an HTML, CSS or JavaScript file, the browser automatically refreshes. The browser instance that is spawned by atom-live-server, plays very nicely with Chrome’s developer tools, so it is possible to test the website for responsiveness, performance and accessibility as you edit your files.
Learn more about atom-live-server here.

live-server.png

Guys and gals, did you read that? THIS PACKAGE DOES LIVE REFRESHES WHEN YOU MODIFY YOUR CODE. 

5. todo

Of the packages I’ve talked about thus far, todo is probably the most useful, and underrated package that I have come across. todo takes specially formatted comments that you write in your project files, and converts them into a to do list which is displayed on the right-hand side of the editor window. Each list item serves as a link to the file where your time is needed. This package could possibly serve as a quick and dirty project management solution for teams working on smaller projects, or a reminder of how disorganized I can get at times.
Learn more about todo here.

todo.png

Useful, underrated, and filled with potential: todo.

6. minimap

minimap provides an overhead view of the file you’re currently working in, and lets you quickly navigate to parts of the file, by clicking on map regions. minimap takes up a good share of editor screen real estate, but when working with larger files, it definitely beats scrolling.
Learn more about minimap here.

minimap.png

If you’ve got boatloads of code, try minimap. 

7. highlight-selected

highlight-selected is an Atom plugin that should have been included by default. When you double-clicking a word, an HTML tag, or a variable name, highlight-selected displays all occurrences of that same word in a currently active file. This package can come in handy when tracking down misspellings or typographical errors in your code.
Learn more about highlight-selected here.

highlight-selected.png

highlight-select minds your Ps and Qs, so you don’t have to.

8. pigments

pigments is an Atom plugin that takes CSS color notation and creates a text highlight of that color in your style sheet. pigments can also be used to convert colors between hex, rgb and rgba formats. When working with CSS colors, this package is a must have.
Learn more about pigments here.

pigments.png

pigments gives you nice highlights along with color conversion.

9.git-plus

If you are a developer, chances are you work with a version control system. If you are using Git, this package is one you can’t live without. git-plus lets you perform any git command directly from the Atom editor. Although some configuration is needed in order to set up this package correctly, git-plus will save you time at the command-line, and makes commits fun and easy.
Learn more about git-plus here.

git-plus

git-plus lets you perform any git command directly from the Atom editor.

10. autocomplete-module-import

For those who use Node with npm, autocomplete-module-import is a very compelling tool. As you write a require or import statement, the package creates a drop-down list of possible modules. When a module is selected, it is automatically downloaded and installed into your project. This is all done without having to open a terminal window, or leave the project.
Learn more about autocomplete-module-import here.

ami.png

Less clicking, moving, and keystrokes with npm: meet autocomplete-module-import

 11. Linters and Linting

The last few packages that I will recommend fall into the category of linters. Outside of unit testing, linters are probably one of the most potent fail-safes that developers have against writing bad code. Linters are traditionally run after a file is saved and modified. They check code for errors and inform you of any syntactic or stylistic error that you may have in your code.

While linters will not replace the need for unit tests, or Chrome development tools, I have found that by using them, I have far less untraceable bugs in my HTML, CSS and JavaScript. The linters I currently use in Atom are linter-eslint, linter-jscs, linter-htmlhint and linter-csslint.

Learn more about linter-eslint, linter-jscs, linter-htmlhint and linter-csslint here and here.

Join the Discussion!

In this article, I discussed many of the packages I use on day to day basis with the Atom Text editor. What is your favorite text editor? What packages do you use? Join the discussion in the RTC Gitter chatroom, or comment below.

Michael Kornblum works as a cashier for a major big box retailer.  He loves Linux, open source software and sharing his knowledge with others. He has written articles for freedompenguin.com and Linkedin. Currently, he is working on his developer portfolio, and hopes to land that ideal gig where he can make peoples’ lives better through technology.

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