There’s tons of IDE (Integrated development environment ) out there. Sublime Text, Bracket, Vim, Visual Studio, Eclipse, Aptana… After trying a few of them, I’ve decided to go with Atom. Why? Atom is a free, highly customizable and open source IDE developed by Github. While you can use it out of the box, adding packages can improve your productivity and your workflow. You also have the possibility to add theme to change its appearance.
Atom uses a system of packages (plugins) to add new features. Packages are really easy to install, and have their own configuration menu. There’s a plethora of packages available, and you can find the listing here. To help you save time, let me introduce you some cool packages that I found.
To install these Atom packages, you can either via command line or go to Preferences > Install, and search for “package-name“.
Recommended Atom Packages
This package is a must when you start working on several project at the same time. Project Manager will make easy to access your different projects, editing them, and saving them.
The Tree View package will let you explore files in your project.
This package adds nice colored-icons base on file type, and will improve the usage of Tree View.
This package will help you to improve your HTML and CSS workflow. With a syntax inspired by CSS, you can create a large HTML structure just with a line of code. There are so many things you can do with it.
This package will show you a preview of the whole source code in the right side of your screen.
Linter is a very useful package. It will analyze your code syntax, highlight the error(s) in your code, and give you details about what’s wrong. After installing Linter, you will have to add the specific Linter package for the language you are using. For example: Linter Ruby, Linter PHP, Linter Python, etc.
Pigments will display the colors in your code.
Tips: in the settings, you can choose to display the color on the code background (default), around the code, besides the code (dot or square-dot) or in the gutter.
The Color Picker package will enable you to quickly select and change colors in your CSS.
This package simply underlines the line you’re in.
This simple package will reveal itself to be very convenient. Just double click a word to get it highlighted everywhere in your code. A good combo with Minimap!
The name of this package is explicit. It will allow you to open your HTML files in your default browser with a right click.
This package is awesome. It will add a real browser into Atom!
I like using Cloud9 because you can use the terminal. But now, with Terminal Plus, you can also use the terminal in Atom!
This package is great for keyboard-oriented people. It will add dynamic hotkeys in your code to allow you to jump anywhere quickly.
Another package aiming at making your CSS looking better. Just press cmd+alt+c / ctrl+alt+c to beautify your CSS.