Blog

The caffeine fuelled writings of a web developer


atom-plugins

My essential plugins for Atom Editor

Posted on February 16th 2016  //  Filed under: General, Web Development

I’m currently a WordPress developer by trade. I started using Atom Editor a few months ago. Its a great text editor that is built by the good folks at Github. Its open-source, hackable and there are a lot of great plugins available, built by members of the community.

Here are my top five plugins that I use when developing WordPress websites and full-stack solutions. Click on the heading to visit the plugin page!

1. Emmet

You’re all familar with this plugin. Its a great notation tool that allows you to enter almost pseudo HTML elements and with a quick Control + E you can expand it into official HTML elements.

If you type ul>li*3>a – you will get the following HTML

<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

Quick tip: if you type “!” and press Control + E – Emmet will expand to a standard HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Great for saving time when writing basic HTML structures!

2. File icons

File icons is great if you are working on large theme files or complicated architecture. Its visually pleasing to have icons accompany the file type you are editing and has often kept me sane when developing some of our larger websites!

Screen Shot 2016-02-16 at 14.37.58

3. WordPress API

This is a great plugin for WordPress developers. Essentially, it will offer autocomplete options for well-known WordPress functions. It does save significant time and helps when you’ve had a long day at the office and can’t physically remember get_post_meta(); is the appropriate function.

4. Pigments

This is a personal favourite that I only discovered last week. Its a neat plugin that will overlay any hex / rgba colour values with the actual colour you are using. I find this very refreshing when staring at CSS declarations and I’d go as far to say it helps me visualise the end product better as well.

pigments

5. Atom beautify

Pretty self-explanatory. Sometimes, I write large code files and I think “Yeah! That looks great and I can read that.” With a quick click of “Beautify” within Atom Editor and I realise “Ah! Now everyone can read it.”

Customising your Atom Editor is a personal journey. Plugins are a great way of making lightweight text editors such as Atom Editor powerful environments to write more beautiful code. Please let me know if there are any essential plugins that you recommend!

Get in touch

As always, please get in touch via twitter or email me.