A code editor is the bread and butter of any web developer’s career. It’s the one facet of a coder’s tool chain that’s cherished, but also chosen with extreme passion and decisiveness. This won’t be an article about which code editor is the most popular, or what makes one better than the next; the purpose of this article will be for those that have chosen Atom as their code editor and show how to make it awesome for everyday work.
Live Style
Emmet LiveStyle is the The first bi-directional real-time edit tool for CSS, LESS and SCSS files.
The Atom package is available here and doesn’t require any special setup: simply start Atom and Google Chrome and you’re ready for real-time editing.
“LiveStyle uses its own implementations of LESS and SCSS preprocessors, written in pure JavaScript. Unlike official preprocessors implementations with sourcemaps, LiveStyle provides proper source-to-result mappings, variable and mixin scopes, error recovery and partial compilation.”
A favorite feature of mine is “Remote View” and creates a publicly available URL pointing to your local site. Use this URL to preview on any internet-connected device or browser with instant real-time updates from Atom and DevTools.
To master this package I highly suggest looking through the documentation and getting started guide to ensure it meets the needs for your specific context and, of course, that you feel comfortable before using it.
Colors
Have you ever wanted to use a color picker while you were coding? Have no fear because Color Picker has your back. Color Picker currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4 colors and is able to convert between the formats.
This little devil also inspects Sass and LESS color variables like a super sleuth. Just open the color picker with your cursor on the variable of your choosing and it will look up the definition for you. You can click the provided definition and go directly to where it’s defined.
Pigments
If color picker isn’t your cup of tea then perhaps give Pigments a try. Pigments is a package for displaying colors in project files. Pigments will scan source files in your project directories looking for colors and will build a palette with all of them (pretty slick).
Motion
With motion increasingly requested in our work it’s nice to have tools that help in the process.
The bezier curve editor is a game changer for motion and interactive developers looking for the perfect easing combo. Choose between a multitude of easing options that display their result live or create your own by dragging the handles of the easing visualizer.
Tree View
Would you like to hide files from your project that don’t need to be committed to your repo or displayed to you while you work? In Atom’s Packages tab, search “tree-view” and under its settings, check the box for Hide Ignored Names to remove the globally ignored files from your tree view, or combine with Hide VCS Ignored Files. These particular VCS files are the ones controlled by your .gitignore. The globally ignored files are ones such as .DS_Store, for example.
File Icons
When improvements to your visual navigation can be made I suggest doing so, and that’s why I love file-icons.
This package gives your files a nice little icon with some color to help way finding, and generally make things look delicious. It even gives you the ability to customize size, color shades, swap icons and assign icons by file extension.
Git
Do you dislike jumping between the command-line and your editor to make commits? This GitHub package is now bundled with all versions of Atom 1.18 and later.
Enjoy the ability to branch, stage, commit, push, pull, resolve conflicts and even view pull requests for GitHub right from inside Atom. To open this window put your cursor dead center of your editor on the right side and look for a tab with an arrow. Boom!
Git Time Machine
I’m a big fan of this one because it makes looking at file diffs a breeze. Within Atom you have access to your history of a tracked Git project; plus it’s all visual.
Git Time Machine makes looking over file diffs fun again and less messy than trying to inspect via the command-line. It shows a visual plot of commits to the current file over time and you can click on the timeline or hover over a mark and see all the commits for a specific time range. You have the option to revert complete files or cherry pick line by line. It’s a truly fantastic package to include in your Atom workflow.
Can I Use
Searching for browser support has never been easier and all done right from within Atom thanks to the Can I Use package.
Type “can i use” from your command palette (Cmd+Shift+P) and start typing the property or search term you’re in need of for support in your project. A very efficient way to use this service vs. using the web browser.
General Tips
Packages aren’t the only option you have to make Atom more magical than its default installation. There are many more options that can be found right from the core settings to make writing code a pleasant experience.
Soft Wrap
Under Atom’s Settings view you can specify your wrapping preferences.
The Soft Wrap option will wrap lines that are too long to fit in your current window. If this option is disabled, the lines will bleed off the side of your screen so you’ll have to scroll the window horizontally to view the rest of your content.
Find and Replace
The “Find and Replace” option has been around in code editors forever and for good reason. To search within your current file you can press cmd+f, then type your search string and press enter (or cmd+g or the Find Next button) multiple times to cycle through all the matches in that file.
The Find and Replace panel also contains buttons for toggling case sensitivity, performing regular expression matching and scoping the search to selections. You can also find and replace throughout your entire project if you invoke the panel with cmd+chift+f.
Make Atom Portable
Atom has the command atom --portable that provides a command-line parameter option for setting Portable Mode. I’ve personally had terrible luck with this option and frankly the docs on this topic are still very much in need of a rewrite.
“Portable Mode is most useful for taking Atom with you, with all your custom setting and packages, from machine to machine. This may take the form of keeping Atom on a USB drive or a cloud storage platform that syncs folders to different machines, like Dropbox.”
My suggestion is to symlink your ~/.atom directory to Dropbox (or another service, location etc.) and call it a day. This is the directory that stores all your settings, packages, configurations and such that make Atom personalized for your use. You can still install Atom from any machine just like you normally would, except you’re using .atom as a symlink referenced to another location of your choosing.
Sync-settings
If portable mode or using the symlink trick isn’t enticing then you might consider giving sync-settings a go. This Atom package will synchronize settings, keymaps, user styles, init script, snippets and installed packages across Atom instances.
Style Tweaks
If you’d like to apply a custom styling change without creating an entire theme, you can add your custom styles to the styles.less file in your ~/.atom directory.
To open this file in the Atom editor select Atom > Stylesheet. The easiest way to see what classes are available to style is to inspect the DOM manually with the Developer Tools via command + option + i in the same way that you do for Chrome.
Parting Thoughts
I’ve only scraped the surface regarding packages, plugins and such, but if you have further suggestions, comments or thoughts I encourage you to leave a comment below and any pertinent links relevant to this discussion. If you’re big on lists than definitely checkout this repo on GitHub called Awesome Atom; A curated list of delightful Atom packages and resources. As a former Sublime user I’ve been completely satisfied with my choice to move to Atom and it will continue to be my editor of choice for the foreseeable future. Happy coding!
