Useful Atom Plugins

Atom is a simple, approachable, yet customizable text editor. It comes pretty basic, but has awesome tools we can add to it. We will go over how to install those tools, and some of the basic ones you will want for VSchool.

Install packages.

Either:

click on the Atom dropdown to the left of File and to the right of the apple symbol and select preferences.

or!

Hold down Command and push ,.

This opens your preferences and you can select Packages to see the currently installed packages or Install to install more.

Search for the Package you would like and simply install it. You may need to restart Atom to use newly installed packages.

Packages

Here are listed useful packages.

Caution: Some of these packages can be a major crutch (in a bad way) by doing work for you that you should learn how to do on your own first. Do not blindly install all these packages. This document will try to help you know when a good time to start using them will be.

autosave

Make sure you have atoms autosave package install and enabled. It should be one of the core, pre-packaged packages.

atom-html-preview

This package by harmsk will make spinning up your HTML in Chrome a bit easier.

platformio-ide-terminal

This package will allow you to have a terminal running in your editor. Use this if you work on your code on a big monitor for sure!

fold-functions

This is by robballou. It helps you be able to tuck away code that you don't want to look at at the moment.

minimap

atom-minimap makes this cool little package to help you navigate large files. Ideally, your files would never get so unwieldy that you'd need to use this package, but we both know that we don't live in an ideal world.

Careful now, you're entering into the zone of packages that you might want to wait to install.

atom-beautify

This will help you make sure your indentations are where they should be. It will help you find brackets and tags you may not have closed. Before you install it, make sure you know yourself when you need to indent. Do not use this as a crutch!

emmet

The package by emmetio is a mind blowing, code writing, magical wizard of a plugin. Once installed, you can type ! and hold ctrl, shift, e to produce all the tags most all HTML pages needs.

type div.container and use that magic ctrl, shift, e sequence to make a div with the class container.

type #page>div.logo+ul#navigation>li*5>a{Item $} and the key sequence to build this:

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

There are is a ton of other shortcuts that are handy to use. Visit emmet.io and check some out.

DO NOT install this if you cannot write all your basic HTML tags to get started from memory.

React

This one by orktes will help you with your React development. Install it when you start working with React.

language-babel

This package provides support for jsx and all other JavaScript sub sets. It's another one you'll want when you start doing React stuff.