Atom can also be extended with useful packages.
Downloading and installing the packages is very easy:
- Open the Atom editor and 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.
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
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.
Autoclose HTML is surely very much appreciated by front-end developers. It helps you to close an HTML tag every time you open it.
Pigments will display a color preview directly in your files highlighting the color declaration.
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!