Level Up Your Editor

Ahh, the text editor. One of the most prized developer possessions. And like any machine, you gotta look under the hood to see why no two are the same. We all have “our” theme, “our” packages, “our” snippets, etc.

One of the best ways I’ve improved my environment has been primarily by reading what other people appreciate and utilize in their workflow. I’d still like to improve my workflow, and have even been considering giving VS Code a test drive. So, keeping in line with my goal for the blog, here is my attempt to give back and share what I use.

The Core:

Atom. Originally I used Sublime Text, but Atom came out with its 1.0, I switched. I liked the clean design, more fresh codebase, and growing community. To me, Sublime was great, but had its cluttered or disorganized moments.

I’ve definitely become accustomed to Atom since then and have been using it for nearly 2 years strong now. But, like most editors, the add-ons are where the fun is.

The Packages:

Workflow

These are the packages that are used in the day-to-day to increase efficiency and just make my life a little bit easier.

Emmet

Emmet, if you haven’t heard of it, is a nice a little tool that allows building very rapid html structure in a dynamic snippet sense. Using very similar structures to CSS, you can then expand that into your needed HTML structure.

Gist

Here is the gist of it (couldn’t resist): Anything that is too large to be snippet, but is reusable and not better suited to be part of a library or a function is a gist. And if you’re familiar with Github Gists, this allows you to dynamically pull from any of your Github Gists.

Atom Alignment

Adds a simple shortcut to line up variable or array property definitions.

Single Click Open

By default, Atom opens files in a “pending” mode. If you make changes or double click, then it will persist and stay open. Otherwise it will auto-close (making the assumption you just wanted to browse the file). Personally, I’ve always liked to have my files stay open and prefer to just use a simple CMD+W when I need to close a file.

Tabs to Spaces

Detects the spacing vs tabbing in a file and tries to make sure it’s uniform.

Remote FTP

Every once in awhile this comes in handy and makes a situation that would require an FTP client much easier through the auto upload feature.

Linter (jshint, php)

“Off by one” errors… the death of developers. Linters save lives. Enough said.

Custom

These are packages I’ve custom developed to scratch one of my own itches.

HTML Snippetless

This is a small package that is a fork of the core HTML language just without the snippets, since they tended to be unnecessary when Emmet is installed, and tended to get in the way of Emmet or my custom snippets.

Emmet Snippets Compatibility

Emmet compatibility with snippets is the only thing I miss about Sublime Text. Whatever they did in Sublime made it seem to “just work”. I’ve tended to have a bit more issue when trying to get the same results with Atom. This is a small package to fix and hack around a couple of the main issues I tended to run into.

WordPress Suite

This is my personal favorite, and the package I’ve definitely spent the most time on. Although there are times I use a full blown IDE like MacGDBp + xdebug (when it doesn’t crash), for a lot of stuff it can tend to feel a bit overkill. WordPress Suite provides smart debug log watching, and additional WP-CLI tools, right from the interface of Atom through notifications and context menus.

Codekit Commands

I’ve used this less recently, and I should probably overhaul the code, but in short, it automatically changes your Codekit project and pauses / resumes watching, based on your interactions with the editor.

Team Snippets

This is a custom library of snippets I’ve created over time. Although I constantly neglect to add new ones, it usually is only a couple months delayed in being updated.

UI

The following packages primarily relate strictly to the look and feel of the editor.

Climate UI

Based on the Google color palette, and with the goal of visual hierarchy and a look that even designers can appreciate, Climate is packed with little features and cool aesthetics.

Climate Syntax

Made for the Climate UI, this syntax complements the color palette and visual hierarchy.

Highlight Selected

Pretty self-explanatory, but in essence highlights the line that is selected for visual ease.

Syntax

These are additional languages that I use that aren’t included in the Atom core packages. Most of them also include language specific snippets.

Snippets

Snippets. The main reason I can use two fingers to type and still hit 200 wpm. That and I’ve got enough to think about — I’d rather not have to memorize every single piece of code I want to reuse.

Other

These are packages that I either use to develop packages, or just random packages that are more in the “fun” or “interesting” categories.

And That’s Just The Beginning

And if you’re like me, it doesn’t end there… you take the red pill, you see just how far the customization goes by modifying all the package settings, core settings, editor settings, and core package settings (but that’s for another post).

There is always room to improve, and my setup is definitely not static, but constantly changes and shifts.

There is always room to improve, and my setup is definitely not static, but constantly changes and shifts. Usually I have to try something for a couple weeks before I can fully decide if I am set on it or not.

Any additional ones I’m missing or I should try out?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.