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.
