Top 5 Atom Editor Packages that can help you to speed up your development

Atom Editor is one of the most popular editor in the coding development industry. So, how could you maximise the used of it. We’ll I will introduce you to some of the best extensions that can help you to speed up you coding process. So, let’s jump to it.

Installing Packages
Installing packages in atom is very easy because all available packages can be accessed and installed in the editor’s settings view. Open the settings view by selecting menu item Atom  >  Preferences:

1. Emmet.

Emmet is the number one code snippet tool used by front end developers. Emmet helps to create HTML and CSS faster with the use of snippets. It uses abbreviations that expand to valid HTML tags.

How To Use It:

Type “html” then press ENTER. (Note: The double quote is not included when you type the html.)

Voila! You have an HTML5 basic web structure.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">


Here is the Cheatsheet ( that you can look for, once you’re able to add it to your Atom Editor.

2. Atom Beautify

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

How To Use It:

Once installed in your Atom Editor. Just go to Packages and find the Atom Beautify > beautify.

3. Minimap

Minimap is one of Atom’s most popular packages, displaying a condensed view of your code for quick navigation. The feature enters your subconscious; you won’t think you’re using it, but you’ll miss it when it’s not there:



You can see it at the left-side of the Atom Editor.

4. File-Icons

By default Atom only displays filename in the tree view on the left side of the editor window. Adding file icons based on the file extensions makes it easier to find files in the tree and keep the overview. The File Icons package adds icons for the most common file types:


File Icons

**Notice the Icon of each file in here.*

5. Pigments

In web development you often have to deal with color codes. The Pigments package is a great help. It scans your file (e.g. CSS file), detects all color codes and displays the color code string with the corresponding background color as you can see in the following screenshot:


This makes it easy to directly see if the correct color code is used.


Atom is a really powerful code editor. By using packages the editor functionality can be extended with many more features. Here, we list down 5 packages that mostly part of our development.

Also check-out the following blogs.
10 GIT Commands that must know when learning the GIT.
Skills you need to learn for your first front-end jobs.
Make your website interactive using Velocity.js

Share this: