Basically, I’m a user who uses shortcuts a lot. In this post, I’m going to share some of my favourite shortcuts.

Earlier, we have shared Visual studio shortcuts in this site. Please do check if you are interested.

Lets jump into content directly.

Comment out selection or current line

• Ctrl + /

Usually, I use the keystroke Ctrl +K, Ctrl + C for comment out a line.

And Ctrl +K, Ctrl + U for uncomment a selection or line.

This Ctrl + / does both the job in toggle way. Reduced keystrok and achieves the same. One of the productivity hack.

Zen mode

• Ctrl + K, Z

Enables Zen mode. More focused mode of programming.

The command is basically toggle. You can use same shortcut to exit Zen mode.

Look at the difference between normal and Zen mode in below image.

Show command palette

• Ctrl+Shift+P or F1

Open the command palette on editor. And we can perform various quick from there.

External terminal

• Ctrl + Shift + C

It opens external terminal configured with the current project file path.

This is the one main shortcut I use daily with VS Code.

Even I made separate post on how to configure external terminal in VS Code.

Inline breakpoints

• Shift+F9

Inline breakpoints will only be hit when the execution reaches the column associated with the inline breakpoint. This is particularly useful when debugging minified code which contains multiple statements on a single line.

An inline breakpoint can be set using Shift+F9 or through the context menu during a debug session. Inline breakpoints are shown inline in the editor.

Inline breakpoints can also have conditions. Editing multiple breakpoints on a line is possible through the context menu in the editor’s left margin.

Navigating to previous position or forward

• Alt+ ← / →

To go back previous postition or go to forward postion of your navigation again.

Use Keyboards left side alt key.

Open Integrated terminal

• Ctrl+`

This symbol key will present under the Esc key. This shortcut will open up the integrated terminal available within the VS Code.

Few more shortcuts used within intergrated terminal

• Ctrl+Shift+` Create new terminal
• Ctrl+C Copy selection
• Ctrl+V Paste into active terminal
• Ctrl+↑ / ↓ Scroll up/down
• Shift+PgUp / PgDn Scroll page up/down
• Ctrl+Home / End Scroll to top/bottom

Breadcrumbs

Sometimes we will be working with the small screen machines. Keeping the solution explorer always open isn’t an optimal solution when we are working on the small screen laptops. One of the solutions can be keeping the files hidden and opening whenever needed.

In that case, traversing between files or folders is a bit difficult.

To resolve this problem, we have an option called breadcrumbs in the VS Code.

Breadcrumb navigation lets you jump to symbols and files in your workspace.

Breadcrumbs show the current location and allow you to quickly navigate between symbols and files. To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the breadcrumbs.enabled setting.

You can modify the user settings by visiting the settings page using shortcut CTRL + , or visiting the option File>Preferences>settings

In the search bar, search for the option breadcrumbs. You can find the following UI

I usually enable the breadcrumbs for File Path, because don’t use symbol path navigation. You can use the available options based on your needs.

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, the Tab key is used to complete the code abbreviation. We have to type the syntax and click the 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 the tab key.

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 the period(.) will be considered as a class name. Emmet basically works related to CSS selectors.

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

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

Let’s see some CSS abbreviation example as well

To experience more HTML & CSS shortcode check this out link https://docs.emmet.io/cheat-sheet/ (The complete cheat sheet for HTML and CSS.)

Summary

I will be updating this same post regularly based on the new tips or tricks if I come across anything new.

Happy Coding!