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.

Top Visual Studio Code extensions for Angular Development

Below is a list of some VSCode extensions I use heavily when developing Angular web applications that have helped me move faster. Check them out!

Compodoc

This first tool is not a VSCode extension, however, I have been using this lately as an invaluable tool when developing in bigger teams. As a developer you will spend a lot of time reading other people’s code where there may not be any documentation. The good people at Compodoc give you an out-of-the-box solution for automatically generating an entire static site of documentation for your Angular project right in your working directory. By providing some really cool graphical diagrams of all the imports, routes, and modules, understanding other people’s code just got a little easier.

Angular7 Snippets

Having this extension installed provides hot keys and short cuts to generate Angular and Typescript snippets. There’s not much more to be said here.

Prettier

Prettier is my de-facto code formatter and takes care of 80% of all of my code formatting. It’s also extremely customizable in that you can include a .prettierrc file in the root directory of your project and customize exactly how Prettier formats your code. Recently I’ve been turned off by the way it formats HTMLcode blocks so I’ve added a .prettierignore file to the root directory of my project to tell Prettier to ignore formatting my HTML – hence the missing 20%. See some sample files below:

// .prettierrc
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
// .prettierignore
*.html

Code Spell Checker

Anybody writing code should some sort of spell checker in place. If you’re like me misspell words constantly then this extension will help you spot your blunders and correct them before your users read your mistakes in production!