Essential Plugins for Atom

Posted December 10, 2019 Over the years I’ve collected a lot of different plugins for the code editor Atom. Some of these I’ve been using from day 1, and others have found their way into my plugins over time. Here is a list of the most essential Atom plugins to make sure you’re getting the most out of your code editor. Sync Settings This has to be my first pick as it has been a lifesaver. It backs up all of the settings and plugins in Atom to a gist which you can restore from at any time. It’s essential if you have two different set-ups so that you can seamlessly go between the two, or if you’re transferring to a new machine. Here are some features: Sync Atom’s and package settingsSync installed packagesSync user keymapsSync user stylesSync user init scriptSync snippetsSync user-defined text files 🔗 Teletype You know how it goes, you get stuck on something and you just can’t figure out the solution to your problem, so you want to get an extra pair of eyes on it. How about more than just a pair of eyes, but also an extra pair of hands? With Teletype, you can share your workspace with team members and collaborate on code in real-time. 🔗 Git Status Git Status is great for keeping an eye on which files have been edited, added or removed since your last commit. In the tree view, you’ll be able to see at a glance which files have been edited or even added since the last commit. This makes it super easy to hop back into a certain file to check what you may have just changed before committing. When in a file you’ve edited, there are also extra indications to exactly which lines inside your file have been changed, too. 🔗 Colour Picker Colour picker – the easiest colour picking tool there is. As well as being great for simply selecting colours on the fly, it also inspects Sass and LESS colour variables. Just open the colour picker with the cursor at a variable and it’ll look up the definition for you. From there, you can click the definition and go directly to where it’s defined. 🔗 Minimap Minimap is an essential tool when it comes to using larger files and navigating them. It shows a preview of the full source code of the file that you’re editing. The best thing about Minimap is that there are community-built plugins to bolt-on to Minimap to make it perfect for anyone needs. 🔗 Pigments Pigments displays colours in your project. It scans source files in your project directories looking for colours and will build a palette with all of them. Then for each opened file, it will use the palette to evaluate the value of a given colour. This is great when you’re using a variable colour naming system that doesn’t specify the colour. 🔗 Remember those community-built plugins for Minimap? Here’s one to enable pigments: 🔗 Seti Icons Seti Icons adds beautiful icons to your files making it easier to find which file you’re looking for. 🔗 Emmet Emmet is an old-school plugin and has been around for the longest time. You simply can’t create an “Essential Plugins” list without Emmet getting a mention. Using Emmet makes writing HTML and CSS a lot less tedious, and really helps to speed things up. You already know how to use Emmet abbreviations: its syntax is inspired by CSS selectors. 🔗 Git-Plus As we all know, Atom now has GitHub built into it, but this…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply