5 Essential Atom Editor Packages for Front-End Developers

The best five Atom plugins to boost your productivity and to simplify your coding

Atom is a free and open-source text editor developed by GitHub. It works on OS X, Windows, and Linux. Since it is written in HTML, CSS, and JavaScript, it is fully customizable.

Atom can also be extended with useful packages.

Installation

Downloading and installing the packages is very easy:

  • Open the Atom editor and click on File > Settings.
Click on File
> Settings
  • This will get you to Settings View. Here, click on the Install tab and type the name of the package you want to download.
> Install

As you can see, the installation process is really simple. The tricky part is picking the right packages, since there are many to choose from.

I want to quickly introduce you to the 5 packages which I consider the most useful ones for every front-end developer.

Atom Editor Packages

  1. Emmet

2. Atom-Beautify

3. Autoclose-Html

4. Pigments

5. Minimap

1. Emmet

Emmet allows you to write HTML and CSS in a very fast and efficient way. It uses abbreviations that expand into complex code snippets.
Let’s see an example of what Emmet is able to do:

Getting started with a new HTML document has never been easier. Just type html and click enter and Emmet creates the basic structure for you.

2. Atom-Beautify

Atom Beautify does exactly what its name says. Beautify will make your messy code cleaner and more readable. It has support for many programming languages, such as HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript, typewritten and SQL.

3. Autoclose-Html

Autoclose HTML is surely very much appreciated by front-end developers. It helps you to close an HTML tag every time you open it.

4. Pigments

Pigments will display a color preview directly in your files highlighting the color declaration.

5. Minimap

Minimap creates a column that summarizes the code inserted in the file and makes it easier to navigate. It helps you to understand where you are inside the file and also it simplifies navigation as you can use the map to move quickly within the lines of code.

These 5 atom packages are the most helpful ones in my opinion. But what do you think? Which ones do you use and recommend? Leave a comment!

Business graduate and self-taught JavaScript developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store