My atom packages for web development

During my 6+ years of coding I’ve changed quite a few code editors. In the early days when I started web development I used Dreamweaver. As I started to learn more about web development, I quickly realized Dreamweaver wasn’t good anymore.

Then came the time of Coda because I was looking for an editor with a good FTP integration. About a year after I switched to Sublime text as I felt the need of something more clean in terms of interface and it also had some useful extensions that allowed me to code faster.

I’ve used ST for a good 3 years until last year when the Atom Editor was finally released. Surfing around the web I had found a lot of articles praising Github’s new tool and nearly all of them had good things to say about it. So I had to give it a try and it quickly became my new favorite editor.

With Atom having so much customizability I decided to share my list of essential packages for web development.

auto-update-packages

Ok this isn’t exactly related to web development but as you’ll find out, you will find yourself installing quite a few different packages, so it makes sense to enable auto updates.

atom-beautify

The beautify package is capable of turning messy code into a more readable format. It supports many different languages such as HTML, CSS, PHP, JavaScript, etc.

auto-detect-indentation

This package is capable of detecting the indentation of the current file instead of using the default one of the editor. This helps against the risk of having inconsistent spacing in your files.

Atom Alignment

Extremely useful package to align multiple lines or multiple selections. See the example below.

atom alignment

auto-id-class

This package provides shortcuts when writing HTML classes and ids. By pressing “.” it will automatically add the class attribute to the selected html tag. Press “#” to add the ID attribute.

color-picker

Useful for web designers when writing some css. It’s also capable of reading SASS or LESS variables. By clicking on an HEX/RGB/etc.. color, the picker will appear allowing you to change the color if needed.

picker

dockblockr

This package is designed to make writing documentation easier. Pressing enter or tab after /** will create a comment block. Dockblockr is also capable of parsing the names and parameters passed to a function if the block is placed directly above the function.

Emmet

The most notable feature of Emmet is the abbreviation expansion by using the tab key. The emmet package provides expansion for html, css, sass and less syntaxes.

emmet

Git Plus

Git-plus provides an interface to do git things without the terminal. No more tab switching to use the terminal, you can do everything within the IDE.

Linter and all it’s add-ons.

Linter integrates with many different providers to show you warnings and errors while you code by displaying a collection of the messages at the bottom of the window.

WordPress Developer ?

If like me, you use WordPress a lot, there are many packages available to make your life easier.

autocomplete-wordpress-hooks

Provides autocomplete functionality for all the WordPress filters and actions into your editor.

wordpress-api

The API package provides support for the entire WP API up to 4.1. Includes functions, classes, methods and hooks.

Furthermore it comes with a useful list of code snippets like the loop, wp-config, widget template, sidebars, etc.

Ready to switch to Atom?

What I love the most about Atom is that it’s extremely easy to customize and there’s a huge community behind it being an open source editor. If you haven’t done it yet, download Atom and give it a try, it’s worth it.