12 Most Useful Atom Packages for Web Developers and Designers

By Hasan Rasheed

Have you tried Atom Code Editor yet? Although it’s quite new, but many have fallen in love with Atom, a text editor made by GitHub that offers many benefits (above all its free to use). Atom is one more tool which can be added to the list of open source editors such as Notepad++, Sublime, Brackets, Limetext and Bluefish. However, Atom is more than a coding tool as it is extendable and hackable to your programming needs.

Atom comes with a few built-in packages, such as integration with Git and tree-view. However, for the purposes of design and development you will definitely need some other packages.

In this article I have picked a few packages that a Web Developer and Web Designer must have. Some are great to help organize your messy code, some provide real short codes to build lengthy structures in no-time, while others to help you have better access to your files without leaving Atom. Here are your 10 must-have Atom packages.

Package Installer

When you want a new package or theme installed, open your settings and click Install. Here you can search for packages or themes, and when you find one you want click install. Typically you shouldn’t need to restart Atom but in rare cases it’s necessary.

package_installer

Bracket-Matcher

mathing-bracket

Bracket-Matcher makes moving around your code very easy. Once you install this package, it helps you access the following features and more:

  • Highlights and jumps between [], (), and {}. Also highlights matching XML and HTML tags.
  • Autocompletes [], (), and {}, “”, ”, “”, ‘’, «», ‹›, and back ticks.
  • You can toggle whether English/French style quotation marks (“”, ‘’, «» and ‹›) are autocompleted via the Autocomplete Smart Quotes setting in the settings view.
  • Use ctrl-m to jump to the bracket matching the one adjacent to the cursor. It jumps to the nearest enclosing bracket when there’s no adjacent bracket.
  • Use ctrl-cmd-m to select all the text inside the current brackets.
  • Use alt-cmd-. to close the current XML/HTML tag.

You can download the package here.

Auto-close HTML

autoclose html

This may be simple, but I couldn’t live without auto-closing HTML tags: it doubles your mark-up creation velocity. The package allows you to define which tags should complete inline (such as<p></p> or <li></li>) and which create newline blocks.

Auto-close can be dowloaded here.

Color Picker

color-picker

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 amongst the formats.

Color Picker is available here.

Minimap

minimap

If you are accustomed to Sublime Text, you may be familiar with the mini preview on the right side panel. That feature is useful to quickly scroll through source codes too long for the window height. With Minimap, you can 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.

Click here to download.

Highlight Selected

1438675732highlight-selected

When you select a keyword or variable in Sublime Text or Notepad++, all other instances are shown. Highlight Selected brings the feature to Atom and is even better when combined with minimap-highlight-selected:

Download Link: Highligh SelectedMinimap Highlight Selected

CSS Snippets

snippets

CSS Snippets is one more useful package for faster coding. CSS Snippets adds short hand CSS coding to Atom. For example, “bg” adds background and “bgi” adds background-image and “ff” for font-family in CSS property.

See the complete list here or download CSS Snippets here

Atom Bootstrap Package (Snippets)

Bootstrap-4-Support-for-Atom

Atom Bootstrap package adds autocomplete for Bootstrap 3 classes. Not only classes, but it also includes snippets to code faster. For example, simply writing “btn” brings the button code.
For support of Bootstrap 3 Click here | For support of Bootstrap 4 Click here

JavaScript Snippets

javascript-snippets

JavaScript Snippets lets you quickly write a portion of JS source code. With defined abbreviations, you don’t need to write complete code. For instance, just type cl to make log and gi for getElementById. This functionality is similiar to Emmet, but it runs on JavaScript code. This Atom package provides many of the JavaScript syntaxes like the function, the console, and the loop.

Click here to download.

Pigments

pigments

You may have seen CSS hex-color previewers before, but few match Pigments. It parses colors, understands pre-processor variables and even executes color-changing functions.

Pigments can be downloaded here.

Indentation and Beautification

Coders always create a mess when writing code, but with Auto Detect Indentation, you need never worry again. Alternatively, make your code match everyone else’s settings using atom-beautify.

beautify

It will transform your messy code, making it neater and more readable. It has good 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.
Download link: Auto Detect IndentationAtom Beautify

Emmet

emmet

Emmet is a plugin that you need to install whatever your text editor environment is. The main features of Emmet are expanding abbreviations and wrapping with abbreviations, which 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>”.

This Cheat Sheet will help you to learn Emmet’s abbreviation syntax. Download Emmet here.

Livestyle Atom – Real-time editing

livestyle

LiveStyle updates CSS in browser immediately as soon as you type it. No more file saving or page reloading just to see how single update affects a web page.

enable-livestyle

Emmet Livestyle is an essential tool for web developers to speed up CSS coding. Emmet Livestyle is a bi-directional real-time edit tool for CSS, LESS and SCSS. It will automatically update your CSS stylesheet when you make changes in Chrome and vice versa.

To execute Emmet Livestyle you need to install:
1. Emmet and Livestyle Atom from Atom package manager.
2. Goto livestyle.io, download and install the app.
3. And now Install Livestyle Extention in Google Chrome, and enable LiveStyle.

You can view the video tutorial by going here.

Bonus Package After-hours Add-ons

Install “Active Power Mode” to make code writing a bit more fun.

active_power_mode

Conclusion

ATOM provides clear productivity with zero distractions of toolbars, icons and menu followed by sub-menus.

I Love Atom, do you? Share your favorite packages in the comments below.

Writer is a UI/UX Rockstar | Hobbyist Photographer | Loves to manage teams of diverse personalities | Happy Husband and Proud Father!