We all know how great tooling can help us move faster and be more productive when coding.
Atom is one of the most current and feature-rich source code editors for web developers. Initially, Atom was GitHub’s internal tool but later, they decided to open-source it for the general public, after which it quickly gained traction in the developer community.
As Atom is an incredibly versatile and customisable code editor with more than 7,500 packages to choose from. In today’s post, I’ve put together a list of the top 20 best and newest Atom Packages for Web Developers.
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 pressing 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 behaviour 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 need to click the Install button next to the package you have chosen.
1. Atom Beautify
Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom
2. Material Icons Snippets
Material Icons Autocomplete with unicodes for compatibility – Also icon previews in atom
3. Text Align
An Atom text editor package that left, center, and right aligns text between the left side of the editor and the Preferred Line Length setting.
4. Character Table Plus
The character-table-plus package is a fork of the character-table package written by klorenz. This fork, made solely to include some essential upgrades, may be merged back into the original package by its author, or live on independently.
There are currently no plans to further develop the functionality of the plus package, but pull requests that address reproducible bugs are very welcome and will be merged.With character-table-plus you can lookup any Unicode Character (except control characters) to insert into your document.
5. Snippets from Gist
An awesome snippets management package for Atom.io. You can manage all your snippets on Github as Gist and pull to your Atom.io environment. Keep it update with your Gist.
6. Uniform Package for Atom
A simple package to emulate text formatting in Atom using symbols from the unicode character table’s Mathematical Alphanumeric Symbols block. The ability to display these symbols will depend on which font is being used. Atom’s default font supports all the symbols in the MAS block and has good support for most commonly-used symbols.
7. WP Functions Snippets
Snippets for wordpress
8. Remote FTP Multiple Hosts Add-On
Plugin for Atom editor that adds possibility for multiple .ftpconfig files within a single project using Remote Ftp. It is useful when working with multiple server environments.
9. Pretty HTML
Atom package to convert your messy html to beautiful one
10. Ask Stack Overflow for Atom
Quickly get answers and code samples from Stack Overflow in Atom
11. Git Time Machine
git-time-machine is a package for Atom that allows you to travel back in time! It shows visual plot of commits to the current file over time and you can click on it on the timeplot or hover over the plot and see all of the commits for a time range.
12. Project Manager
Project Manager for easy access and switching between projects in Atom.
13. File Icons
File-specific icons in Atom for improved visual grepping.
14. Pigments
A package to display colours in project and files:
15. Autocomplete Path
Adds path autocompletion to autocomplete+ depending on scope and prefix. Supports custom scopes defined by the user.
16. Atom Material UI
A dynamic UI theme for Atom that (kinda) follows Google’s Material Design Guidelines. Best with Atom Material Syntax.
17. Atom Liquid Snippets
Atom snippets for liquid (shopify) syntax
18. Turbo JavaScript
A collection of commands and ES6-ready snippets for optimizing Javascript and Typescript development productivity.
19. ToDo
an Atom package for finding TODO statements
20. Color Picker
A Color Picker for Atom