The best Visual Studio shortcuts

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.

Happy Coding 🙂

Emmet in VS Code

VS Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

VS Code is one of my favorite code editor. I love the various features like embedded Git Control, Code completion, snippets, code refactoring etc.

I’m a full stack web developer (I used to call myself with that name), I have been using the vs code from its earlier release. I use to follow the release notes of VS Code on every release.

I always used to share the details of VS Code new features with friends, colleagues and all. Some of the features I have excited about was integrated terminal, Side by Side editing, Command palette, Markdown preview and list goes on.

Today, in this post I would like to share one of the interesting feature of VS Code which is involved with Code completion.

It’s Emmet!

So the next big question is,

What is Emmet?

Wiki says,

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.

Me:

To be short, it helps to code completion, add snippets, etc.

And next big question is, even some text editor also doing this fair job nowadays. Why Emmet?

Yes, nowadays all the editors comes up with code completion or syntax suggestion intellisense.

However, Emmet got some cool features like syntax abbreviation, improves HTML, CSS workflow. Using Emmet we can quickly write a bunch of code, wrap code wit new tags.

Your favorite may be Atom, Sublime, Brackets or something else. Emmet supports most of your favorite editors.

Check this link on how to integrate Emmet with your editor.

https://emmet.io/download/

It’s a plugin, you can install or integrate with your code editors.

 

Emmet in VS Code

The one good news is that we don’t have to download & install the Emmet in VS Code.

Emmet is built in with VS Code, no extension in required. OK, that’s the base story; now let’s start with how to use the features.

 

How to expand Emmet abbreviations?

Emmet abbreviation and snippets are enabled by default for html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

Mostly, Tab key is used to complete the code abbreviation. We have to type the syntax and click tab key to expand the abbreviations.

We expand the single html tag or even expand the hierarchy of html tag at the same time by clicking tab key.

emmet-gif-01

 

An important change is that the Tab key is no longer the default way to expand Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

We can quickly view the Emmet abbreviation by clicking the info icon next to list shown. By typing text next to hash (#) will be taken as id and text next to period(.) will be considered as class name. Emmet basically works related to CSS selectors.

emmet-gif-02

And also we can create multiple list of same syntax with unique id as well.

emmet-gif-03

 

We can generate lorem ipsum text with default number of words or certain number of text by mentioning the word count.

emmet-gif-04

 

Let’s see some CSS abbreviation example as well

emmet-gif-05

 

To experience more html & css short code check this out link https://docs.emmet.io/cheat-sheet/

The complete cheat sheet for html and css.

Try out and let me know your thoughts on the comment section.

Happy Coding! 🙂