- posted under Web development

I've used Notepad++ extensively for over 3 years, and then Sublime Text Editor for about 2 years. They are both fantastic text editors but I've since moved on to Atom. (I'm also currently checking out visual studio code.. but I'll put together another post for that!)

At one point I used Sublime for HTML/CSS and Notepad++ purely for Javascript coding/debuging. I couldn't fully leave Notepad++ as I liked how it was so easy to navigate code (and other simple things like clicking on tags and being shown super clearly where the matching end tag is, or being able to easily find the line a piece of code sits on, or it's extremely powerful find & replace functions).

Notepad++ always seemed extemely fast & snappy when launching too, which was always nice, especially when being placed in a critical situation where every second counts.

I enjoyed using Sublime for CSS, as the theme by default made the code readable and beautiful, and the super helpful minimap on the side came in very useful when navigating thousands of lines of code.

Enter Atom.io

I was sick of being stuck in between the void of Notepad++ and Sublime. I'd heard about Atom from other developers, and I'd had a super quick look their website and it looked fascinating. A text editor built in HTML, JavaScript, CSS, and Node.js? Wow.

They also sell themselves as 'completely hackable', and true to the word they are. I easily managed to style up editor components using CSS!

There are thousands of plugins(packages) available for Atom, with the community constantly working on new updates and features. This is where Atom becomes seriously powerful.

Here are the 5 Atom plugins I use for Wordpress development:

1. Minimap

I'm not entirely sure if Minimap comes preinstalled with Atom these days, but if you find yourself not having it installed, just get it. It's a fantastic way of quickly browsing code at a glance and is an excellent tribute to Sublime's Minimap.

2. Pigments

The Pigments package comes in incredibly handy for visually showing you what colour a hex/rgb(a) code is, or even better, a LESS/SASS variable!

3. Wordpress-api & wordpress-dictionary

These two packages combined contribute greatly to my Wordpress development on a daily basis. If I can roughly think of a hook name, but can't remember the exact way it's spelt.. just browse through the list!

4. Todo Show

A very helpful package that shows you all the @TODO comments in your project or workspace. It can also show you FIXME, CHANGED, XXX, IDEA, HACK, NOTE, REVIEW, NB, BUG, QUESTION, COMBAK, TEMP, but this is fully optional and configurable on your part.

5. atom-spotify2

This one isn't strictly for development, but I find it really handy for when I listen to Spotify, I can see what song I'm listening to at the bottom left of my editor and I can skip/play/pause songs using key commands. Sweet!

Bonus package: tabs-to-spaces (paired with a CSS addition to Atom)

I find this one incredibly useful when dealing with onboarding new sites, or just when opening up files I've never worked on before. Sometimes I'll find a file has a mixture of tabs and spaces. I try to follow the Wordpress coding standards (extra) as much as possible, so stick to tabs. The only problem you might come across is how on earth you determine if a file has tabs or spaces..

@import "syntax-variables";
atom-text-editor::shadow .invisible-character {
 color: '#0b0a0a';

I add the above CSS into my Atom/styles.less stylesheet, and as a result all spaces or tabs get shown up in a very subtle way within Atom.


I hope this has helped somebody out there developing WordPress sites!