Atom, the code editor from Github, rises in popularity every day, as developers prefer using this code editor as it is lightweight and has a low learning curve; also it can be extended with a variety of useful packages.

At first, Atom was as an internal tool for Github, but later it was released as an open-source tool for everyone. The community responded immediately, and it now boasts an ecosystem of its users and contributors.

As an out of the box, cross-platform editor, Atom works on OS X, Windows and Linux. It has smart auto-completion, useful for those who want to write clean code quickly and it features a handy file browser where you can open and add files quickly.

If you aim to be an Atom power-user, here is a list of some Atom packages that will help your productivity and make your coding far easier.

Some Atom Packages to Complete Your Coding Setup

It’s one of the best general code editor on the market some will say, Atom certainly comparable with editors like Sublime Text and Notepad++. Still, with its advantages, this code editor is packed with all types of features that can improve coding, with which I should mention:

  • Atom works on all platform regardless of what OS you are using.
  • It has a built-in package manager, so if you want to install some Atom packages you won’t have to deal with managing them.
  • Smart auto-completion function — so you can write code faster with this function.
  • File system search, so say goodbye to browsing through files for ages, as you can do it all one single window.
  • Multi-panes — you can split the Atom’s interface into multiple panes.
  • Simplicity — Atom’s biggest strength is that it is straightforward to use.

For more specialised needs, you can turn to community-contributed packages.

Here’s the best Atom Packages and why do we need these Atom Packages?

Atom packages are external programs and bits of code that add extra functions to the core product, therefore enhancing the Atom’s capabilities.

By adding Atom packages to the core, Atom becomes much more efficient and helps you do more with less effort. Every single user of Atom can make their own choice in terms of which packages to use.

Downloading and installing the packages is a easy process, and they can significantly enhance the user experience of the core product. Many of them may not apply directly to your workflow or the languages you work with, so you should only install the Atom packages you choose for your situation.

Firstly, let’s look at how to install an Atom package.

How to Install Atom Packages

When installing your first Atom package, it is most helpful to read the steps thoroughly, as you will likely learn them by heart and won’t have to recall this list every time.

Once you’ve chosen the packages for you and Atom, heres are two ways you can install them:

  • Click on File > Settings. It will then bring up the Settings View. Then, click on Install and type the name of the package you are wanting to install. A shortcut to remember for the Settings View is Ctrl +,(Ctrl and Comma) on PC and cmd + on Mac.
  • Or you can use the Command Palette in the same manner by accessing it by selecting Ctrl + Shift + P on PC or for those Mac users select CMD+ Shift + P. Type “install packages”, then you can use the Settings View as above.

Some packages that come included with Atom by default. They are called Core Packages, and these can be disabled, but it’s suggested not to disable them, though, because they affect the overall behaviour of Atom.

The other packages you will install will be listed under Community Packages.

Here’s how to install Atom Packages the right way

Atom is versatile and it would be a disgrace not to expand it with new features only a few clicks away.

There are over 8,500 packages available and making a choice may be very hard if you don’t know exactly what you want.

To help you in your search, see the list below to find some of the best Atom packages you could use:

1. Atom Beautify

Atom Beautify

The atom-beautify package will clean up your code and make it more readable. It supports a variety of programming languages including HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C++ CoffeeScript, TypeScript, SQL and more. It will only beautify selected text if a selection is found; otherwise, the beautify command Control + Option + b, or typing “Beautify” from the Command Palette will beautify the whole file.

2. Auto Close HTML+

Auto Close HTML

This autoclose-HTML-plus package automatically closes HTML tags for you once you’ve typed the first tag. Its simple to use and unlike a few of the other auto close packages on Atom, this one is actually maintained and works.

3. Git Plus

Git Plus Atom Package

The Git Plus package provides a collection of shortcuts to commonly used git actions, without the need to switch to terminal, you can bring up the git-plus commands by typing CMD + Shift + H or Ctrl + Shift + H.

4. Liquid language

Language Liquid Package

The language liquid package is one that you can’t live without when theming for Shopify. Atom is pretty good without of the box syntax highlighting, but it doesn’t have syntax highlighting for Liquid. This is also a great package to use if you’re using Jekyll for templating static sites or blogs.

5. Highlight Selected

Highlight Selected

The Highlight Selected package is super simple; it highlights the current word selected on double click. This is exceptionally useful if you are looking for a particular method name or function within a file without having to open the find panel.

6. Auto Update Packages

Auto Update Packages For Atom

Auto Update Packages keeps your Atom packages up to date, this package checks for package updates every six hours. If there are any available updates, it installs them and notifies you that they have been installed. You can also customise the frequency this package check for updates.

7. Auto Complete Paths

Auto Completion Paths

The autocomplete-paths package auto completes require and import statements in your editor, so you don’t need to look up any paths.

8. Teletype

Teletype for Atom

The teletype package is pretty amazing. It allows you to share your workspace with team members and collaborate on code in real time.

9. Pane Layout Plus

Pane Layout Package

The Pane Layout Plus package allows you to easily organise and control the distribution of multiple panes in Atom. This package has shortcuts to jump between columns and set column layouts.

10. Atom Tabs Exposé

Atom Tabs Exposé

The Atom Tabs Exposé package enables you to quick tab over open files within Atom. It’s mimic Mac OSX Exposé/Mission Control by showing the active tab, panes, and previews of each tab. If the Minimap package is present, a thumbnail preview is shown; otherwise, it defaults to a suitable file icon. If the File Icons package is installed, you will see file icons in the tabs of each pane.

11. Minimap

Minimap Package

The Minimap package displays a Minimap preview of your file on the right-hand side of your editor. You can turn code highlights on and off, as well as move the preview to the left-hand side if you wish. It also has a ton of other customisations if you want to delve in deeper.

12. Pigments

pigments atom package

The Pigments package displays colours in project files, wherever it parses a colour to be. It’s super helpful to quickly determine what a specific hex code might be, especially if the colour isn’t labelled by a variable.

13. Linter

Linter Atom Package

Linter is a base linter package that relies on sub-packages for specific languages. You can find a list of language-specific linters at atomlinter.github.io; I’ve included the top-used linters

14. File Icons

File Icons

The File Icons package displays specific and meaningful icons next to files in your file-tree, fuzzy-finder and tabs. They help to visually parse file types with little effort. You can choose between coloured or monochrome icons.

15. Script

Atom Script Package

The script package enables you to run code from Atom directly. You can run code based on file name, a selection of code or by line number.

Share

15 Atom Packages for Front End Developers