Back to Blog

10 ways to supercharge your front end workflow with Atom

Author

Any developer will tell you that efficient use of a code editor is key, not only for general productivity, but also for developer happiness. Atom is a great editor for front end work – its configurable nature and ecosystem of plugins make for a pleasantly personalized, yet lightweight experience. Here’s a few tips I’ve picked up on how to customize Atom for frictionless front end development.

If you’ve already been using Atom for a while, you know how to open the command panel, but if not, the shortcut is:

shift + command + P

Make sure you learn it first! It’s the gateway to accessing the wealth of functionality Atom offers.

  1. Write your own snippets
    Typing the same boilerplate code over and over again is frustrating and error prone. There are tons of pre-made snippet packages for Atom, but nothing beats the power and customization of adding your own snippets based on your own unique workflows and preferred syntax.
    Adding custom snippets is easy. First, open up the command panel and start typing “open your snippets”. Select the result and you’ll see a .cson file (the CoffeeScript variant of JSON). It will be structured like this:

    It’s CoffeeScript, so indentation is important. You can see from the snippet of the snippet there’s a top-level declaration: ‘.source.js’, after which the templates are listed. Each template is given a readable name, and nested underneath it you have a prefix (how to trigger the snippet while typing), and finally, the body of the snippet. The  $1, $2, etc. syntax creates tab stops when you select the snippet for friction-free customization. For more detail on creating snippets, check out the Atom flight manual.

  2. Language – [Your Language of Choice Here]
    This one is a no-brainer, but for each language you use, make sure to install the corresponding Atom language package for full support. The package language-babel, for instance, makes developing in ES6/ES7 React much more pleasant.
  3. Editing the CSS
    Open the command panel, then type “open your stylesheet” to find your hackable stylesheet for Atom. I’ve been able to tweak the font settings perfectly to my liking, for instance:

    
       .atom-text-editor {
          font-size: 14.3px;
          line-height: 1.7;
          font-family: "Source Code Pro";
          opacity: .9;
        } 
    
  4.  Use Linter Packages
    While packages like atom-beautify allow simple and minimal-configuration beautification of code in many different languages, for serious JavaScript projects you’ll probably want to use a lint config instead (we like eslint). Make sure your config file is in the root directory of your project, install the linter-eslint package and get error messages in real time as you write your code. When it comes time to fix formatting errors, instead of using atom-beautify, use the eslint fixer package.
  5. Emmet
    Writing HTML using Emmet’s abbreviated syntax is a major productivity boost. Use the emmet-atom package for Atom support.
  6. Tomatimer
    This tiny plugin allows you to integrate the Pomodoro method into your workflow, scheduling regular breaks in between periods of focused coding.
  7. Markdown Preview
    If you write markdown and don’t particularly enjoy realizing that a single missing space has caused your README.md to look weird only after pushing it to Github, get this plugin.
  8. Zen Tabs
    Vanquish tab overload with this plugin that limits the amount of open tabs you can have at one time.
  9. Todo show
    This plugin collates the TODO messages scattered around your code, so that you can find the TODOs added by all members of your team, and address them one-by one.
  10. Quick Hits
    Here are some plugins which, while simple in functionality, all beautifully enhance the developer experience:
    Pigments
    Singleclick Open
    Double Tag
    Seti icons
    Auto-update Packages
    Simple drag-drop-text
    Spell Check

Looking for more tips? Check out our other development related posts and our GitHub page. Have more questions about Atom? Send Alex an email.

Author Alex Holachek

Alex’s broad background in data, design, and development gives her a unique perspective on building top-notch digital products. Detail-oriented and precise, she is an efficient problem solver – though don’t be fooled by her quiet focus, she is an enthusiastic power-lifter outside of work.

More posts from this author

How we work Process

Product Hero Talin Wadsworth