Must Have Atom plugins for Front-end Developers

Misel Tekinder
Feb 14, 2016 · 2 min read

by Mišel Tekinder

I’ve been a huge fan of Sublime Text editor for a long time. It’s powerful tool, and it helped me learn a lot, but after some time, I got a little bored.

So I decided to try something new and fresh and recently discovered Atom, a lightweight, hackable, open source text editor and I felt in love with it.

After playing with it for a while and testing some packages, I decided to create and share with you a list of must have packages for front-end developers.

Some of these packages just imitate functionality from Sublime text editor, which I used there.

This package enables quick access directly in the editor to the support tables.

Validate your HTML and CSS files from atom using W3C validators.

This package allove you to make commits and other git things without the terminal, directly from editor.

Support for multiple cursors like the one in Sublime Text.

This package for Emmet LiveStyle is bi-directional real-time edit tool for CSS, LESS and SCSS. It enables live CSS editing, from the browser or the editor. Cool stuff!

Emmet is the essential toolkit for web developers. It is a very powerful tool which helps you write CSS faster. In case, you still don’t use it, check their documentation.

Source code preview on right or left side of your editor.

Color picker drop-down for easier color manipulation.

If you use SVG regularly, this tool helps you by enabling live preview of SVG code directly in the editor.

The package enables browsing remote FTP/FTPS/SFTP just like the built-in Tree View. Pretty useful if you work directly on servers.

Opens the Terminal or Command Prompt in the given directory. Simple as that.

Enable bookmarking of code lines, useful if you work with more than one file and constantly switching between them.

Quick zip files and folder directly from your tree view. Something that you do not know you need until you tried it.

Language grammar for ES201x JavaScript, Facebook React JSX syntax and Facebook flow.

A Nice tool which performs conversions between different CSS units.

Font files preview with all mapped characters. Great stuff to quickly check fonts that you plan to use in your code.

I’m currently exploring atom, and I’ll add packages from time to time, so be sure to check it again soon.
In case you use some good packages by yourself, fell free to send me your suggestions.

About the author:

Mišel is Front-End/UX Developer, currently actively working on WordPress development and experimenting with JavaScript. Catch him on Twitter!

Misel Tekinder

Written by

Front-End/UX developer focused on performant responsive user interfaces