A code editor isthe 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.
Tips and Extensions to Make Your Atom Awesome
Emmet LiveStyleis the The first bi-directional real-time edit tool for CSS, LESS and SCSS files.
The Atom package is available hereand doesn’t require any special setup: simply start Atom and Google Chrome and you’re ready for real-time editing.
A favoritefeature 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 packageI highly suggest looking through the documentation andgetting started guideto ensure it meets the needs for your specific context and, of course, that you feel comfortable before using it.
Have you ever wantedto use a color picker while you were coding? Have no fear becauseColor Pickerhas your back. Color Picker currently reads HEX,HEXa,RGB,RGBa,HSL,HSLa,HSV,HSVa,VEC3andVEC4colors and is able to convert between the formats.
This little devilalso inspectsSassandLESScolor variables like a super sleuth. Just open thecolor pickerwith your cursor on the variable of your choosing and it willlook up the definition for you. You can click the provided definition and go directly to where it’s defined.
If color picker isn’t your cup of teathen perhaps give Pigments a try. Pigments is apackage 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).
With motion increasingly requested in our work it’s nice to have tools that help in the process.
The bezier curve editoris 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.
Would you like tohide 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” andunder 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 VCSfiles are the ones controlled by your
.gitignore. The globally ignored files are ones such as
.DS_Store, for example.
When improvements toyour visual navigation can be made I suggest doing so, and that’s why I lovefile-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.
Do you dislike jumping between the command-line and your editor to make commits?This GitHub package is now bundled withall 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 atracked 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 markand see all the commits for a specifictime 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 theCan I Usepackage.
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.
Packages aren’t the only option you have to make Atom more magical than its default installation. There are many moreoptions that can be found right from the core settings to make writing code a pleasant experience.
Under Atom’sSettingsview you canspecify your wrapping preferences.
The Soft Wrap option will wrap lines that are too long to fit in your current window.If this optionis disabled, the lines will bleed off the side of your screen so you’ll have to scroll the window horizontallyto 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 yoursearch string and pressenter(orcmd+gor theFind Nextbutton) 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
Make Atom Portable
Atom has the command
atom --portablethat provides a command-line parameter option for setting Portable Mode. I’ve personally had terrible luck with this option and franklythe docson 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.
If portable mode or using the symlink trickisn’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.
If you’d like to apply a custom styling change without creating an entire theme, you can add your custom styles to the
styles.lessfile in your
To open this file in the Atomeditor selectAtom > 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.
I’ve only scraped the surface regarding packages, plugins and such, butif 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 itwill continue to be my editor of choice for the foreseeable future. Happy coding!