Top Atom Packages You Should Install From The Start

Atom, like Brackets, is a 21st century, full-featured, cross-platform, open-source hackable text editor from Github. Currently, at the time of writing, there are over 7000 Atom packages available to extend its functionality further. Sifting through all of those packages is both time-consuming and cumbersome.

Out of the box, Atom works on OS X, Windows and Linux and features smart autocompletion helping you write code faster. Its file browser makes opening and adding files, folders and projects very simple. Having multiple pane interfaces allows you to compare and edit code across files. Find and replace will replace text across all of your projects or individual files. It also integrates well with GitHub and Git. Here are some of the best Atom packages available.

Installing Atom Packages

Open settings using the keyboard shortcut. ctrl+,(Win & Linux) cmd+,(Mac).  Navigate to Install to search for packages.

IDE Functionality

If you are wanting more of an experience in the form of an Integrated Development Environment which enables better autocompletion, extra code navigation views such as outline view, document formatting and error/warning diagnostics. To install go to packages and search for atom-ide-ui.

Along with the IDE, you can install support for various languages.

• HTML
• PHP
• CSS
• TypeScript & JavaScript
• C#
• Java
• Python

Search in the atom packages website for more IDE addons.

Improving the UI

If you have just installed Atom for the very first time and haven’t installed any packages you will notice that the user interface is very clean.

If you are a very visual person you have plenty of options, other than changing the theme. File Icons change and add a splash of colour to the icons in the project explorer. It’s very subtle but make your files stand out more. The minimap package is a source previewer that sits along the side of your code editor. It can be tweaked further to suit your needs and has plugins to enhance its capabilities even more.

Improving Code

Although its recommended to write beautifully organised code from the start, occasionally you might still require the use of a plugin to clean it for you.
Atom Beautify is a package that takes the stress out of having to manually organise your code. Unfortunately, depending on what language you need to beautify, you may have to install further executables to use it. Furthermore at the time of writing this package is being re-written to use an online cloud service called unibeautify which can beautify over 40 different languages without having to install anything extra.

CSS Comb sorts CSS properties to a specific order.

Docblockr helps you write your documentation neater and faster.

Project Manager

Having tried a few project management tools I have found the best one to be Project Viewer It takes a little while to set up your projects but you can organise them into groups. Specify multiple file paths, assign images to both the groups and projects and much more.

Type less, do more!

HTML to CSS allows you to generate CSS, SCSS, SASS, LESS classes from an HTML file. It also supports BEM. Also check out BEM Tools.  Emmet is a shortcut tool to create code very quickly.

By typing:

ul>li*5

and pressing tab it will expand it to:

<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

Turbo JavaScript and Quick JavaScript have a collection of commands and snippets for optimising JavaScript and Typescript development.

Build Sass compiles SCSS and Sass into CSS.

Quickly insert hosted CDN libraries, such as jQuery, Font Awesome etc with CDN Libs

Collaboration

Teletype is an Atom package that lets developers share their workspace with team members and collaborate on code in real-time.

WordPress Tools

If you edit WordPress themes and plugins then WordPress API offers support for the core WordPress API with code completion support for WordPress Core Classes, functions, hooks and methods.

WordPress Suite is a suite of tools including a debug watcher, WP-CLI Commands, Quick Tools to enhance your WP development.

Compare Code

Comparing code side-by-side is easy with Split Diff which now supports Git changes.

Test & Debug Code

Run PHP, Python, Ruby code directly in Atom with script For other languages it may need other packages and further customisation.

Atom Live Server is an HTTP server with Live Reload capabilities.

Linter analyses code to help find and visualise errors. For a full list of linters visit Atom Linter

Conclusion

This only scratches the surface with all the packages on offer. Have I missed your favourite atom package? Feel free to add yours in the comments below.