Phanor Coll

As a developer you always have to adjust and use IDE's that will help you be more productive, as for me, i'm a netbeans junkie, been using it for a while now, especially for Java development.

A few months back I started using Atom for some Ruby projects, and since then I felt in love with it, the clean layout and simplicity of it, being open source just gave it the necessary push, and if you like to customize you IDE, like me!!, it has a great list of plugins and themes..

During my time using it I've come to install a few plugins that have helped me oin my day to day development workflow.


Emmet seems to be a plugin that you need to install, whatever your text editor environment is. The main features of Emmet such as expanding abbreviations and wrapping with abbreviations, allow you to work quickly when writing HTML, CSS, Sass / SCSS and LESS syntaxes. For example, in HTML, type p>a.mylink then tap on TAB key to get a complete HTML tag <p><a href class="mylink"></a></p>. The Cheat Sheet will helps you to quickly learn Emmet’s abbreviation syntax.


Git Plus allows you to work with Git without leaving Atom editor. Within the editor you are able to make a Git commit, checkout, push/pull, diff and other git commands. You need to setup your user. name and on your git config file to make all functions work. To access all git command, open the palette with CMD + SHIFT + H or choose Package > Git Plus.
git plus


CSS Comb makes your stylesheet code formatted consistently, looking neat and beautiful. You can use pre-made sorting preferences based on Yandex, Zen, or CSSComb itself, or you can even use your own preference to make sorting rules. After installing this package, the sorting job can be done by pressing CTRL + ALT + C or accessed from the context menu via Packages > CSS comb > Comb.
css comb


File Icons add icons to a filename based on the corresponding file type. It will add visual improvements when you open a file on tab or on tree view. The file icons are customizable: you can add your own icon and change the color through the LESS files in the packages/file-icons/styles directory. The default icon comes in 8 colors and 3 variants (light, medium and dark).
file icons


Beautify will turn your messy code neater and more readable. It has great support for programming languages, such as HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript, typescript, and SQL. After installing this package, to run it, just right-click and choose ‘Beautify editor contents’, or via Packages > Atom Beautify > Beautify.


If you are accustomed to Sublime Text, you may be familiar with the mini preview on the right side window. That feature is useful to quickly scroll through source codes too long for the window height. With Minimap, you get this for Atom. You can even set the position to be on the left or right, turn on/off code highlights, and more. Minimap even comes with some plugins to extend its functionality, such as color highlighter.


As the name implies, this package lets you pick colors, and it is as easy as a right-click and choosing ‘Color Picker’. Alternatively it can be done by pressing CMD/CTRL+SHIFT+C. Color Picker works if your cursor is on the text on CSS/SASS/LESS files that contain one of the following color formats: HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4, or color variable on SASS or LESS. It also has the ability to convert between the formats.
color picker

Share this
- if you have any thoughts about this post , let me know -