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.
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.
Now, let’s see the best Atom packages for web developers.
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
<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.
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.
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 CTRL–ALT–C (on Windows) or the CMD–Shift–C (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.
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.
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.
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.
v stands for
l stands for
if stands for a whole
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.
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.