For us developers, it´s very important to find the perfect code editor or IDE because it´s our main work tool. Although there are many editors, whether open source or paid, the best known are Sublime Text, Eclipse, Netbeans or Atom.
In this case we are going to talk about Atom, the one that I currently use and despite not being the most complete, it has a multitude of plugins to customize it and make our work easier.
These are the 10 best plugins that every developer should have installed in Atom
1) Atom Live Server
Atom Live server is one of my favorite packages because it allows us to view the changes to our website, just by saving the document in atom, without having to reload the page, all this makes live server save you a lot of time. You can dowload here
2) Minimap
Surely many times you have quite long files.
With minimap you can see a map of the file content on the right side of the code. In this way, it will be easier for you to navigate in the code, see if at some point you are higher or lower in the file and thus never miss anything. You can download here
3) Enmet
Although some may know it by its old name (Zen Code), Emmett has become an essential plugin. If we had to choose the first plugin to install, it would possibly be this. With Emmet you save a lot of time writing code, as you can use abbreviations for labels or create classes simply by typing for a paragraph and pressing Tab. In this case we would obtain a paragraph with the class "paragraph". We can also save ourselves writing everything necessary to make a new HTML page by typing in the html: 5 editor and pressing tab. You can download here
4) Double Tag
This package allows you to modify the HTML tags in a simple way because it automatically closes the tags of our code. You can download here
This is a great package for atom, which can save you a lot of time when you start designing with Boostrap because it provides us with quite a few snippets that will save us hours when developing it with Bootstrap. You can download here
This package adds a functionality that (surprisingly) is not included by default in the core of Atom. Just double-click a word in the editor and then Atom will highlight that word and any other occurrences in the rest of the file.
If you’re a developer, it’s great to install it and see where variables or functions appear in the code. You can download here
This package will make your files look more beautiful and more readable as it is responsible for controlling that the indentation is correct. That is, it checks that the lines of code are well ordered and start at the proper place. It is especially useful for following style guides in files that have multiple nested loops or functions that call other functions inside. It also supports most of the languages you can use today to code. You can download here
8) Linter
As a frontend developer, I love when the code editor is smarter than me and highlights the mistakes I'm making while programming the code. In Atom this is possible with linter. It is a package that adds error control and display in the editor itself. And although it does not detect everything, it helps me a lot. You can download here
In addition to this basic linter package, my installation also includes the following linter extensions for Atom:
linter-alex: controls that you write better. That’s useful in your comments.
linter-csslint: error detection in CSS files.
linter-jscs: error detection in JavaScript files.
linter-write-good: error detection when you’re writing English texts.
minimap-linter: highlights linter-detected errors in the minimap.
9) File Icons
This simple package adds icons and colors to the files that we have in Atom according to their specific file type so that it is easier to identify them.
At a glance you will know the type of file in front of you. It seems silly, but once you try it you can not stop using it. You can download here
10) Pigments
Pigments is a specific plugin to work with CSS. With this tool you can see the color that you are entering in CSS, and by being able to modify it on the fly, you can see how it changes and choose the one you want, without having to constantly see how it looks on the web. You can download here
Bonus
Color Picker
With this last package on the list, you can easily select the color you want to include in your CSS style. Just press CMD-SHIFT-C / CTRL-ALT-C to open a color picker where you can visually choose the color that best suits your needs. It is the best companion of the previous package. You can download here
Top comments (1)
#ninja ftw! Nice work.