How to start using your integrated development environment like a pro

Do you “kind of” know your integrated development environment (IDE)? Do you use your mouse to click between its various functions and copy & paste? Are you spending too much time scrolling through code? If you answered “yes” to any of these questions, then you’re missing out on the true power of your IDE.

After reading “The Pragmatic Programmer” I realized that I was not as proficient with my IDE as I thought I was.

“We think it’s better to know one editor very well, and use it for all editing tasks: code, documentation, memos, system administration, and so on.”


“You need to be proficient. Simply typing linearly and using a mouse to cut and paste is not enough”

“The Pragmatic Programmer” by Andrew Hunt & David Thomas – 82

The simple solution to start your journey of IDE master – don’t use your mouse for any tasks inside the IDE. In the beginning this will be very frustrating. When you find yourself reaching for your mouse, you will have to stop and Google the keyboard shortcut for the task you wish to do.

At the time of this writing I haven’t used a mouse to perform any task while using my IDE for the past two months and I can confidently say I feel much more proficient/effective when I code.

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.