Atom Suggested Packages

The power and flexibility of Atom comes from the ability to install and configure just about anything you could want in an IDE. There are a bunch of great packages that come with Atom right out of the box. To extend Atom's functionality, just install more packages that do what you want, or... make your own!

How To Install Packages

1. Install Atom
2. Open Atom and select from the App menu: Atom > Preferences... and choose + Install
3. Search for the package you want to install and then click the "Install" button.
4. Repeat step 3 as needed...

Video: How to Set up Atom 1.0 with your Preferences

To view and learn about more packages, go to atom.io/packages

Suggested Packages

This list is a work in progress and only scratches the surface of what is available. These have been super helpful packages for some of us.

Formatting Code/Syntax Assist

• atom-beautify — Beautify your code: HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more.
• autoclose-html — Automates closing of HTML Tags
• autocomplete-paths — Adds path autocompletion to autocomplete-plus
• editorconfig — Helps developers maintain consistent coding styles between different editors
• emmet — The essential tool for web developers

Visual/Workspace Helpers

• file-icons — Assign file extension icons and colours for improved visual grepping
• highlight-line — Highlights the current line in the editor
• pigments — A package to display coded colors in project and files.
• minimap — A sidebar preview of the full source code.
  • minimap-git-diff — A minimap binding for the Atom git-diff package.
  • minimap-pigments — An Atom plugin to display pigments colors in the Minimap.

Linting/Error Catching

• linter — A Base Linter with Cow Powers (what the...?)
• linter-jshint — This plugin for linter provides an interface to JSHint. It will lint JavaScript in files with the .js extension and optionally inside <script> blocks in HTML or PHP files.

Tools and Toys

• bezier-curve-editor — Edit CSS Bezier curves directly in Atom.
• svg-preview — Show the rendered SVG to the right of the current editor, refreshed live.