Atom is a code editor developed by the team behind GitHub. Besides being free, it is open-source, which is why it is the favourite of many developers, since it gives the possibility of being able to customize it practically to our liking.
Atom had its first stable release in the middle of 2015, and since that date, its community has grown exponentially. An example of this is that currently, in version 1.12.7, it has more than 5400 Atom packages available on its official website: extensions and themes to modify the appearance of the program. We will show you in this post our two favourite extensions. They are essentials for us, as without them our daily workflow would not be the same.
Emmet
Basic. Essential. If you have installed Atom, the next thing to do is to look for Emmet in the catalogue of extensions. At first it may be hard, but once we have become accustomed to Emmet’s syntax,we will save writing and working time. It supports HTML, CSS, Sass and Less.
For example, if we write:
html:5Then, we will press the tab key to obtain:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>Or if we write this:
div>(header>h1.logo+li*5>a{list})+footer>pAgain, when we press the tab, we will have:
<div>
<header>
<h1 class="logo"></h1>
<li><a href="">list</a></li>
<li><a href="">list</a></li>
<li><a href="">list</a></li>
<li><a href="">list</a></li>
<li><a href="">list</a></li>
</header>
<footer>
<p></p>
</footer>
</div>
Atom-beautify
With Atom Beautify we will not need to fix code and tabulate hundreds of lines to leave them to our liking, making it more readable anymore. It is very useful when we work with third-party files, or we want to correctly display HTML / CSS files if we work with Jade / S CSS. It also supports different languages such as JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, TypeScript and SQL.
File-icons
File Icons adds an icon to each of the file types in the Atom navigation panel to make it much easier to recognize them. Similarly, it will let us choose between different icons, in case we are using a dark or clear theme.
Minimap
Minimap lets us have a column, on the left or right of the editor; a preview of the source code of the open file. It is very useful to have everything visible, to be able to move easily and verify the code quickly. We can also boost this extension with Minimap Highlight Selected, which will highlight in the minimap the parts selected in our code.
Color-picker
With Color Picker, the colour selection will be simpler than ever. Using the keyboard shortcut CMD-SHIFT-C (on Mac) or CTRL-ALT-C (in Windows) a small window with a colour selector in HEX / HSL / HSV / VEC formats will open. It also allows us to convert any colour code to another format, for example from RGB to HEX.
Pigments
At first, Pigments may just seem like a nice colour highlighter within our code, but it goes much further. Pigments searches within your project and creates a directory with all the colours used.
In addition, it makes use of the autocomplete function of Atom, so it will give us suggestions of the coloursthat we have already used in our project when we start to write the colour code.
Highlight-selected
Thanks to Highlight Selected, we can highlight a single word in the whole file, no matter how many times it has been used. This extension is based on a function that will be recognizable for those who use Sublime Text.
Livestyle
With LiveStyle we will see the changes that we make in our code in real time in our browser. For this, we will have to install also in Google Chrome (only browser supported by now) the extension LiveStyle
Jade-autocompile / Sass-autocompile
This extension is meant for all those who use Jade/Pug and /or Sass. We will not need to install other software on our computer to compile the code. We will simply add a line at the beginning of our source code with the address of the folder where we want to save our HTML or CSS file.
What do you think about our selection? If you know some interesting extensions, we encourage you to leave them in the comments!
Great selection!
What theme do you use in this example?
Hi Andrew!
I’m using One Dark in Atom. It is the theme that I feel more comfortable with.
Thanks for your comment!
My only bone I have to pick with you is your recommendation for TINYEYE, this extension sucks big time 99% of the time it doesn’t identify pictures I’ve sent to it and no way does this extension beat Google Images. Google Images identifies more pictures than Tinyeye hands down. I have more success with Google Images.