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.
The Atom text editor + delicious bagels. We’re already off to a great start!
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 give us immediate recognition of what we’re working with.
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.
Save yourself window fatigue with platformio-ide-terminal.
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.
Learn more about atom-live-server here.
Guys and gals, did you read that? THIS PACKAGE DOES LIVE REFRESHES WHEN YOU MODIFY YOUR CODE.
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.
Useful, underrated, and filled with potential: todo.
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.
If you’ve got boatloads of code, try minimap.
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-select minds your Ps and Qs, so you don’t have to.
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 gives you nice highlights along with color conversion.
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 lets you perform any git command directly from the Atom editor.
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.
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.
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.