Set up your code editor

Set up Atom, GitHub’s code editor, to fill out it’s features and simplify repetitive tasks.

1 Download & install Atom

Atom is a code editor created by GitHub—it’s got lots of great features, the community is really big—and the setup is quick for beginners.

Download Atom.

  1. Download Atom
  2. Unzip the download
  3. Drag the app to your Applications folder

Run Atom!

You’ll probably also want to keep Atom it your dock—since you’ll be using it every day.

  1. Not the only option

    Atom isn’t the only code editor out there—there are lots!

    Another really popular option is Sublime Text.

2 Important settings

Atom will work immediately after downloading it—but if you want to get the most out of it, some customization will be needed.

First let’s double-check some important settings—in the menu go to:

Atom > Preferences…

Important settings to change

  • Turn on “Scroll Past End”
  • Turn on “Show Indent Guide”
  • Turn on “Show Invisibles”
  • Turn on “Show Line Numbers”
  • Turn on “Soft Tabs”
  • Turn off “Soft Wrap”
  • Tab length: “2”

These settings will be important when we start using Markbot later—it will check your code for some of these things.

3 Install packages

Adding a few packages (aka plugins) to Atom will give you a bunch more convenient features.

Inside preferences to to the “Packages” tab to see all the ones already installed.

Go to the “Install” tab if you want to add new packages to your editor.

On the install screen you can search for packages and install them into Atom.

Packages to install

The names must match exactly!

  • autoprefixer — when run, adds the appropriate vendor prefixes to all CSS
  • browser-refresh — pressing Fn+F5 will refresh the current HTML file in the browser
  • color-picker — a pop-up color picker
  • pigments — displays the colours in the code behind the number
  • editorconfig — for matching other designers’ coding standards
  • emmet — quick way to write HTML, using CSS selectors
  • advanced-open-file — opens up a quick new file input at the bottom of the screen, ⌘⌥O
  • file-icons — shows icons for each file type in the sidebar
  • linter — finds and points out bugs
    try searching “linter base package” if it doesn’t show up
  • minimap — adds an overview column of your code like Sublime Text
  • open-in-browser — pressing ⌘⌥M will pop open the HTML file in the browser
  • auto-update-packages — to help keep your copy of Atom up-to-date

4 Install snippets

Snippets are little samples of code you can get Atom to automatically insert into your document.

You type a keyword then hit Tab and it will insert a bunch of code automatically.

Copy my starter snippets.

From Atom, go in the menu to:

Atom > Snippets…

This will open up a new code file. Paste everything you’ve copied from the GitHub into the bottom of this file. And save.

  1. Cheatsheet

    Check out the Snippets cheat sheet.

5 Fix shortcut key collisions

We need to make sure some of the packages don’t take over the tab key, so we need to fix our keymap.

Go to your keymap file:

Atom > Keymap…


'.pane .editor:not(.mini)':
  'tab': 'snippets:expand'

Copy the above couple of lines of code and paste them at the bottom of your keymap file.

That’s it—Atom is ready to use!