8 Best Atom Packages for Web Developers

Atom is one of the most popular and feature-rich source code editors for web developers. Originally, Atom was GitHub’s internal tool. Later, they decided to open-source it for the general public, after which it quickly gained traction in the developer community. Atom is an incredibly versatile and customizable code editor with more than 7,000 packages to choose from. In this article, we have a look at the best Atom packages you can use in your web development work.

Atom packages

Install Atom Packages

Atom has a great user interface that allows you to search for and install packages within the editor. To do so, select the File > Settings menu in the top menu bar. If your top menu bar is not visible simply hit the Alt key. In the left sidebar, click the Packages menu and you will find yourself on Atom’s Packages page. Here, you can see the Atom packages you have already installed.

If you scroll down on this page you can see that there are a bunch of Core Packages that come with Atom by default. Although you can disable each of them, it’s better not to do so, as they are related to the basic behavior of the editor. Custom packages you install will be listed among the Community Packages.

If you want to search for and install new Atom packages you need to select the Install menu at the bottom of the left sidebar. Installing Atom packages is quite simple. You simply need to click the Install button next to the package you have chosen.

Install Atom packages

Now, let’s see the best Atom packages for web developers.

1. Less Than-Slash

Less Than Slash Atom Package

If you write a lot of HTML the Less Than-Slash package will be a godsend for you. In fact, it’s a quite simple package. It solely adds the closing HTML tag whenever you type </ into the editor. The package recognizes which tag needs to be closed and adds it automatically. It also ignores empty tags such as <br> and <input> from auto-closing.

On the package’s Settings page which is available after installation, you can specify the custom tags you want to be ignored. There’s also a Return cursor option that makes the cursor return to the beginning of the closing tag so that you can rewrite both the opening and closing tags at the same time.

2. Pigments

Pigments can be a great help if you are a visual type. It displays colors in all your Atom projects so that you can instantly know which color belongs to hex, rgb, and other color codes. The Pigments package scans all your files and looks for color expressions and functions. When it finds a color, it evaluates its value and adds the given color as a background to the belonging color expression.

It supports the three most widely used color functions, hex, rgb, and hsl. Moreover, it has an out-of-box support for most color transformation functions and expressions of the Sass, LESS, and Stylus CSS pre-processors. On its Settings page, Pigments also has several options you can customize, such as choosing a marker type or setting up color words for each file type, separately.

3. Color Picker

Color Picker for Atom

Color Picker is another color management Atom package you can even use together with the aforementioned Pigments. The idea behind this package is simple; it intends to enable developers to quickly adjust the color values in their CSS files. The usage is quite straightforward, you simply need to right-click a color and select the Color Picker option. When the color picker appears on the screen, you can modify the color by dragging the cursor around. You can also use the CTRLALTC (on Windows) or the CMDShiftC (on Mac) keyboard shortcuts to open the color picker tool.

The Color Picker package can read several different color formats, including HEX, HEXa, RBG, RBGa, HSL, HSLa, and others. You can’t only use it with CSS files but also with Sass and LESS. If Color Picker doesn’t get a valid color value as input it serves a random color.

4. Teletype

Teletype - Best Atom Packages

You can use Teletype to make collaboration within your team successful and hassle-free. Teletype was created by the official GitHub team and released to the public in late 2017. It allows developers to share their workspace and code in real time with their team members. Teletype makes concepts such as pair programming, social coding, and distributed development possible in real-life development projects.

Teletype introduces the concept of real-time portals that are, in fact, shared workspaces. When one of the developers on the team opens a new portal, their active editor tab becomes the shared workplace. Other developers don’t only see the host’s work but can also actively edit the code in real time. Teletype is a peer-to-peer collaboration tool which means there’s no centralized server involved in the process so that the shared workspace remains confidential.

5. Emmet for Atom

Emmet for Atom - Best Atom Packages

You have probably heard about Emmet or even use it. It’s a popular toolkit for web developers that allows you to use abbreviations and dynamic snippets while coding. As Emmet has a quite straightforward syntax, inspired by CSS selectors, it’s easy to pick it up and use it in your everyday work. If you code a lot Emmet can immensely speed up your workflow and save you a lot of time.

Emmet provides developers with packages for different code editors such as Notepad++, Sublime Text, and, of course, Atom. The Atom package for Emmet is quite popular among developers; currently it has more than 1.7 million downloads. The package provides support for multiple cursor usage and interactive actions as well. Emmet’s abbreviations are expanded when you hit the Tab key. If you want to write code smoother and faster in Atom it’s definitely worth giving a try to Emmet’s Atom package.

6. AtomLinter

AtomLinter - Best Atom Packages

AtomLinter is a base linter for Atom, that provides a foundation for different linter plugins for specific languages. This means that while AtomLinter doesn’t do anything visible on its own, you can quickly add linter plugins on top of it with support for basically any language. AtomLinter has plugins for HTML, HAML, Handlebars, JavaScript, JSON, Markdown, CSS, SCSS, Stylus, and many backend languages as well. You can check out the full list on AtomLinter’s homepage.

Linters improve code quality and help you write better code with much less errors. They visualize errors with different colors and add a short message to each that explains that specific error. Error checking happens in real time. If you frequently use a certain language with Atom it can be quite useful to have the related linter plugin installed. It’s really easy to set it up. First, you install the AtomLinter package from the Settings > Install menu inside your Atom editor. Then, you search for and install the specific linter plugin, say for CSS, on the same Settings > Install page.

7. Turbo JavaScript

Turbo JavaScript - Best Atom Packages

If you frequently code in JavaScript or TypeScript Turbo JavaScript can be a godsend for you. This Atom package provides you with a collection of code snippets you can use in your everyday JavaScript workflow. The snippets are optimized for ECMAScript 6 so that you can use the package to write cutting-edge JavaScript. The snippets are easy to remember, as they are short and catchy. For instance, v stands for var, l stands for let, and if stands for a whole if block.

Moreover, Turbo JavaScript also has some built-in commands that can further speed up your JavaScript workflow and reduce the errors. For instance, the CTRL-; key binding terminates the current line with a semicolon—wherever your cursor happens to be at that moment. Turbo JavaScript used together with either the JSHint or ESLint linter (both are plugins for the aforementioned AtomLinter package) can take your JavaScript code quality to the next level.

8. Minimap

Minimap - Best Atom Packages

With more than 4.5 million downloads, Minimap is one of the most popular Atom packages. Minimap visualizes your source code and displays a code map on the right side of the Atom editor. This condensed view of the source code lets you scan the full code and easily navigate within it. The design of the code map is fully customizable in Minimap’s settings that you can access after installing the package. For instance, you can change character height and width, text opacity, whitespace handling, and the way code highlights are displayed.

Moreover, Minimap has some additional plugins as well that you can use to further enhance its capabilities. For example, you can display Atom bookmarks, linter markers, and Pigments colors inside your Minimap code map. If you are a visual type Minimap can be a huge help in keeping focus on the bigger picture.

Conclusion

Currently, Atom is one of the most popular source code editors of web developers, and this is not a coincidence. If you use it together with these plugins you can significantly improve your code quality and reduce the number errors in your code. If you want to know more about how to deal with errors also have a look at our debugging and troubleshooting tips. To get notified about the latest web development trends, don’t hesitate to follow OnExtraPixel on Twitter or Facebook.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.