Max SchmittMS
8th May 2014

5 must-have Atom packages / plugins

I'm excited about Atom because it's open source and is written in Javascript. For me it was also much easier to setup than Sublime Text. There are already many packages out there and in this post I'm sharing my favorite 5.

Video: My 5 favorite Atom packages in under 3 minutes

1. Emmet

Everybody knows Emmet and there's an Atom-package for it. Here's how it works if you don't: Just type .container and hit TAB to create a div-element with the class container.

By typing ul#emmet-pros>li.emmet-pro*3, you're telling Emmet to create this:

<ul id="emmet-pros">
<li class="emmet-pro"></li>
<li class="emmet-pro"></li>
<li class="emmet-pro"></li>
</ul>

Then you can jump from one edit point to the next to quickly fill in the content.

Link: Emmet package on Atom.io

2. Fancy New File

This lets you create new files by typing a file path (with auto-complete by hitting TAB while typing), instead of using right-clicks in the tree view.

CMD + ALT + N brings up the command palette. Then you can type something like js/my-module/index.js

Link: Fancy New File package on Atom.io

3. JSHint

I think every Javascript developer is familiar with this tool and Atom actually has several packages. I chose this one because it explicitly supports .jshintrc-files.

Link: JSHint package on Atom.io

4. Atom Alignment

Highlight your variables assignments, hit CTRL + ALT + A…

…and this…

var aVariable = 'some-value'
var anotherVariable = 12.5
var awesomeModule = require('awesome-module')
var that = this

…becomes this:

var aVariable = 'some-value'
var anotherVariable = 12.5
var awesomeModule = require('awesome-module')
var that = this

Link: Alignment package/on Atom.io

5. Change Case

Use the command palette to convert a selection to a different case convention. Currently supported:

  • camelCase
  • snake_case
  • STATIC_VARIABLE
  • dot.notation
  • file/path

Link: Change Case package on Atom.io

What are you using?

I'm very interested in what you are using with Atom, so please leave me a comment below: Which packages are must-have for your workflow in Atom and what are you still missing?

Image of my head

About the author

Hi, I’m Max! I'm a fullstack JavaScript developer living in Berlin.

When I’m not working on one of my personal projects, writing blog posts or making YouTube videos, I help my clients bring their ideas to life as a freelance web developer.

If you need help on a project, feel free to contact me.

To stay updated with new blog posts, follow me on Twitter or subscribe to my RSS feed.