Atom Text Editor Logo with MacBook

5 Atom packages that will speed up your workflow

The purpose of this article is to share 5 Atom packages that I use constantly that have sped up my workflow. Let’s start!

atom-beautify

atom-beautify on atom packages

With atom-beautify you never have to worry making sure your code is perfectly indented throughout the entire page. By hitting a designated set of hotkeys this package will take you unformatted code and indent it perfectly as if you spend the next 15 minutes indenting it yourself. The creators of this project made beautifiers for all types of code formats and languages such as JS, ESLint, Nginx, Vue, and many more.

autoclose-html

autoclose-html on atom packages
As you can probably infer from the name of the of the package, autoclose-html will automatically insert the closing HTML tag after you close the opening tag.

emmet

emmet on atom packages

emmet has had the largest impact on speeding up my web development workflow. Generating HTML code blocks has never been easier with the set of hotkey shortcuts this package comes pre-packaged with. For those who use a front-end framework like Bootstrap4 are familiar with writing the following code:

Screen Shot 2018-10-08 at 1.49.39 PM

For some of us, this code becomes muscle memory at some point. However, with emmet we can simply write the following:

div.row>div.col*3

and hit tab on the keyboard and generate the same code above.

emmet hotkey cheat sheet

minimap

minimap on atom packages

minimap generates a map of all the code in your open document/script file where you can quickly navigate to any point in your open source file no time at all. This is a huge step up from using a combination Ctrl + F and memory to jump between lines of code.

platformio-ide-terminal

platformio-ide-terminal on atom packages

This package allows you to open up multiple terminal instances in Atom in your current working directly. This is very convenient since you don’t have to open up another application to access the terminal.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.