Tips

It is found that you could be more efficient and appear smarter if you use shortcut keys rather than doing things with the mouse. Sometimes I used to wonder how the system administrators are very fast in setting up things, restarting a crashed network, etc.

They do all with their precious keystrokes combined with Shift, Ctrl, and Alt, Is’nt it? And who wouldn’t like shortcuts after all?

For those people who use Visual Studio to write code, behold I present you few of my favorite and best shortcuts that can be used while writing and managing code.

Collapse/Expand selection Ctrl+M+H/Ctrl+M+U
Sometimes you would want to hide the annoying code that is blocking your view or distracting you, use this then.
Comment/Uncomment block of code Ctrl+K+C/Ctrl+K+U
//bored of adding ‘// ‘on every line??
//You can bulk comment and uncomment by using this shortcut.
Navigate Forward/Backward Ctrl+–/Ctrl+Shift+–
Forgot the previous location of your cursor? Don’t worry. This is the hotkey for the back and forward buttons
Full Screen without losing the panels Alt+Shift+Enter
Searching for the menubar and the panels while on Full Screen? This is here to rescue
Simple search Ctrl+I
A simple search box is opened you can start typing after pressing this hotkey and press again to go to next result
The TAB key for “snippets”
Best of the shortcuts. Bored of writing if-conditions and making sure that they are surrounded by braces?
Type if and then press the tab key twice. Baam! the if-condition is completed for you. VS offers many snippets like try-catch, for, class, foreach etc
Surround with snippets CTRL+K+S
Want a piece of code within an if-condition or a for-loop. Don’t worry, select the code and press these keys. Select any snippet from the context menu shown and consider it done.
Find Matching braces Ctrl+]
A conversation with the Open brace “{“
Me: Hey you!! Where is your pair??
Open Brace: I dunno 😔
Me: Okay let me find it!
After a while
Got you!! You cant hide from me, You dumb closing brace!
-To find the matching brace of a function/class use this shortcut.
-To select the code between the braces, add shift key to the combination.
Ctrl+C+V to duplicate the current line
This is a well-known legend yet in the form of a simple shortcut key.
Create/Remove a bookmark Ctrl+K+K
Bookmarks, they are cousins to the breakpoints. They are not hit by the debugger but can still help you remember where a bug that you discovered yesterday is present.
-Open BookMark window -Ctrl+K+W
-Go to the next bookmark -Ctrl+K, Ctrl+N
Cycle through the list of clipboard contents Ctrl+Shift+V
This is also a well-known shortcut. Tired of copy-scroll-paste, copy-scroll-paste? You can replace it with copy-copy-scroll-paste-paste by using this shortcut
Collapse all functions Ctrl+M+O
Too large code base? Minimize the code and find it easy to navigate through the code.
Format Selection Ctrl+K+F
When the code is shabby and does not have proper spacing and indents, use this shortcut and see the Magic.

There are yet many more amazing shortcuts but these are my favorite, hope these are helpful in your programming career. You can take the shortcut keys to a whole new level using Auto Hot Keys, read it here.

Click here, for more detailed cheat sheet on various tools and technique.

Happy Coding 🙂

I’m really excited about learning Angular 4. Whenever I started to learn some new technologies, all I do is making a quick start on something immediately. In this post, we are going to discuss how to setup development environment and create an initial angular app.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

OK, that’s all about the base story. A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v

4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

cool-app is the name of the project.

Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows

5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

The default page will gets open with the greeting message.

We can edit the source further based our needs, I’m planning to write series of posts on Angular 4 in upcoming day.

Stay connected and Keep supporting. 🙂

Happy Coding!

Efficient User

What I know? – Since 2014

The best Visual Studio shortcuts