13 Best Atom Packages for Web Developers

Feb 16, 2020 | Everything Divi for WordPress, WordPress News




The Atom code editor is one of the top choices for software developers. An open-source platform maintained by Github itself, Atom is a community effort that shows the love and support a dedicated group of people can put into making free software top-tier. A big part of that is the extensibility within Atom and the number of amazing add-on packages that users can incorporate into their IDE. We want to highlight some of the best Atom packages out there so you can take your installation of Atom from good to great.

1. Linter

13-best-atom-packages-for-web-developers 13 Best Atom Packages for Web Developers

What IDE or code editor would be complete without having a fantastic linter installed? Linter is a base package for you to keep additional packages organized. You will then visit the atomlinter.github.io in order to find the specific linter for the languages you develop in. While there are a number of language-specific linters out there not built on this base, we think having a solid base linter in your editor will help polyglots stay efficient and moving along with fewer issues.

More information

2. Pigments

13-best-atom-packages-for-web-developers-1 13 Best Atom Packages for Web Developers

Pigments is a simple package that lets you see the RGB and hex colors inside the editor. No more having to keep extra palettes up in the background or other tools. Whatever color combination you type in shows up as a highlight for the code itself. Simple, easy, and useful all in one.

More information

3. Color Picker

13-best-atom-packages-for-web-developers-2 13 Best Atom Packages for Web Developers

Right alongside Pigment is color-picker. As a companion, it can’t be beat, and on its own…well, it still can’t be beat. It lets you click an RGB code and use a color-picker instead of manually having to know the codes. Just about perfect for any design work you’re doing in Atom.

More information

4. File Icons

13-best-atom-packages-for-web-developers-3 13 Best Atom Packages for Web Developers

One of the more obnoxious things about most code editors is the lack of default file icons. Many (Atom included) don’t have a visual way to distinguish between file types at a glance. Enter file-icons. With this package installed, you can visually tell where you’ve navigated in your file structure and where you need to go at a glance. It’s not a huge feature, but it’s enough of a quality-of-life improvement that working without it feels like wearing sunglasses at night.

More information

5. Emmet

13-best-atom-packages-for-web-developers-4 13 Best Atom Packages for Web Developers

Emmet is a highly popular tool for developers in just about any editor, and this is the official package for Atom. Essentially, Emmet is a series of shortcuts and abbreviations that makes writing code faster and more efficient. You can set keystrokes, and the syntax will be familiar to anyone who uses CSS, as it is based on those selectors. Do yourself a favor and give Emmet a shot as an Atom package. We don’t think you will be disappointed.

More information

6. Git Plus

13-best-atom-packages-for-web-developers-5 13 Best Atom Packages for Web Developers

Where there is software development, there is Git. And where there is Git, there is the need for efficient and easy repo management. It doesn’t get a lot simpler than using Git commands in your code editor or IDE. Which is exactly what git-plus does for you. If you’ve never used a package like git-plus, we recommend you give it a shot. It might take some getting used to if you’re used to the command line and terminal, but once you get used to being able to do it from Atom itself, we think you’ll like the workflow.

More information

7. Atom Beautify

13-best-atom-packages-for-web-developers-6 13 Best Atom Packages for Web Developers

No one likes ugly code. You don’t. Your boss doesn’t. Your teammates don’t. And certainly the developers coming after you on the project don’t. So install this Atom package and make sure that your code is kept up to standards and best practices. From the development page itself, you can beautify “HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more.” Yes, please.

More information

8. Highlight Selected

13-best-atom-packages-for-web-developers-7 13 Best Atom Packages for Web Developers

Think about this one as a shortcut to find and select all. Double click a word or selection, and you get every instance of it in the file highlighted. We can’t tell you how often this kind of package has come in handy for us. Absolutely one of the best Atom packages out there.

More information

9. Minimap

13-best-atom-packages-for-web-developers-8 13 Best Atom Packages for Web Developers

Minimap was one of the very first packages we installed in Atom. Sublime Text comes with a document map by default, which makes navigating large files exponentially better. We wanted that same functionality in Atom. The idea is simple. Whatever section of the file is in the viewable space of the editor, that also gets highlighted in a miniature rendering of the file in its entirety. Using minimap, you can tell exactly where you are and where you need to be at a glance.

More information

10. Teletype

13-best-atom-packages-for-web-developers-9 13 Best Atom Packages for Web Developers

Have you ever wanted Google Docs-style collaboration and editing within Atom? Of course you have. Collaboration across projects can be a hassle, depending on how your workspace is set up. Teletype makes it so that you and others whom you invite to the project can write in the same document at the same time in real time. With as popular as pair programming is in today’s software dev industry and just how complex many projects are, Teletype is definitely something to experiment with to see if it works for you.

More information

11. Project Manager

13-best-atom-packages-for-web-developers-10 13 Best Atom Packages for Web Developers

Not Asana for Atom, Project Manager still has a lot going for it because moving between different projects in Atom isn’t the most intuitive process. Now it is.

More information

12. Auto-Close HTML

13-best-atom-packages-for-web-developers-11 13 Best Atom Packages for Web Developers

We don’t know about you, but writing closing tags is a real drag. Install this Atom package, and you will never have to type one again. Whenever you open an HTML tag, this one (you guessed it) automatically closes it for you. Brilliant.

More information

13. Zentabs

13-best-atom-packages-for-web-developers-12 13 Best Atom Packages for Web Developers

We all keep too many tabs open. Whether it’s in our browser or in our code editor. Zentabs lets you set a maximum number of tabs that you want to have open, and when you cross that threshold, your oldest tab will be closed. Simple, easy, and keeps your workstation chugging right along at the speed you need it to.

More information

Wrapping Up the Best Atom Packages

Atom packages are what makes the editor so amazing. The community support is out of this world, and on top of that, Github is behind Atom. That lets you know that you know this editor isn’t going anywhere, which means popular and useful packages aren’t going anywhere, either.

What do you think are the best Atom packages? Let us know in the comments!

Article featured image by SMM-Studio / shutterstock.com


Source

eHost managed wordpress hosting

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.