Visual Studio For Mac Code Collapse

Visual Studio Code Tips and Tricks 'Tips and Tricks' lets you jump right in and learn how to be productive with Visual Studio Code. You'll become familiar with its powerful editing, code intelligence, and source code control features and learn useful keyboard shortcuts. For Visual Studio for Mac, see Source editor (Visual Studio for Mac). Regions in the outlining margin are also highlighted when you hover over the margin with the mouse. The default highlighting color may seem rather faint in some color configurations. Developer Community for Visual Studio Product family. Visual Studio. Visual Studio. Visual Studio. Visual Studio for Mac.NET. Azure DevOps. Outlining/Collapse to Definitions in C# does not properly collapse expression-bodied code. Windows 10.0 visual studio 2017 rc. Visual Studio Code is the first code editor, and first cross-platform development tool - supporting OSX, Linux, and Windows - in the Visual Studio family. At its heart, Visual Studio Code features a powerful, fast code editor great for day-to-day use.

We all are very much familiar with #region in Visual Studio that let us specify a block of code to categorized and allow to expand and collapse. With having a region name given, it is often easier to segregate the code module and keep on the code block which is required. While you can have defined regions for different code block, often for a larger files you many need to focus on specific set of code and you don’t want to have separate region name for them. In that case, you can just simply collapse them on the fly and use them as long as you need them.

Re: What are shortcuts for expand / collapse all regions in Visual Studio? When I write a code inside the region and collapse it.after to it If would be searching the some text which is inside the region its showing zero (0) results,it seems visual studio doesn't search text inside collapsed region.is there any trick to enable that search. To find other keyboard-related commands related to collapsing sections of code, in the Visual Studio menu bar click: Tools -> Options -> Environment -> Keyboard This will display the keyboard section in the Options dialog box. Visual Studio Code lets you perform most tasks directly from the keyboard. This page lists out the default bindings (keyboard shortcuts) and describes how you can update them. Note: If you visit this page on a Mac, you will see the key bindings for the Mac.

Here is the steps to follow:

  • Select the section of code
  • Press Ctrl+M+HTurn on the collapsible/expandable option
  • Press Ctrl+M+UTurn off the the collapsible/expandable option.

Related Tip: Surround generated code with #region while implement Interface

  • Here is how it looks like..

To remove the option you really don’t need to select the section back again. You can just place the cursor anywhere in the defined block and press the Ctrl+M+U option to remove the options.

Related Tip : How to select Block of Code in Visual Studio?

This works well as similar to other collapsible panel in Visual Studio code editor. You can just move hover on it to get a preview of the content.

This is really interesting feature and can make your code navigation very easy and faster.

Hope this helps !

'Tips and Tricks' lets you jump right in and learn how to be productive with Visual Studio Code. You'll become familiar with its powerful editing, code intelligence, and source code control features and learn useful keyboard shortcuts. This topic goes pretty fast and provides a broad overview, so be sure to look at the other in-depth topics in Getting Started and the User Guide to learn more.

If you don't have Visual Studio Code installed, go to the Download page. You can find platform specific setup instructions at Running VS Code on Linux, macOS, and Windows.

Basics

Getting started

Open the Welcome page to get started with the basics of VS Code. Help > Welcome.

In the bottom right of the Welcome page, there is a link to the Interactive playground where you can interactively try out VS Code's features. Help > Interactive Playground.

Command Palette

Access all available commands based on your current context.

Keyboard Shortcut: ⇧⌘P (Windows, Linux Ctrl+Shift+P)

Default keyboard shortcuts

All of the commands are in the Command Palette with the associated key binding (if it exists). If you forget a keyboard shortcut, use the Command Palette to help you out.

Keyboard reference sheets

Download the keyboard shortcut reference sheet for your platform (macOS, Windows, Linux).

Quick Open

Quickly open files.

Keyboard Shortcut: ⌘P (Windows, Linux Ctrl+P)

Tip: Type ? to view help suggestions.

Navigate between recently opened files

Repeat the Quick Open keyboard shortcut to cycle quickly between recently opened files.

Open multiple files from Quick Open

You can open multiple files from Quick Open by pressing the Right arrow key. This will open the currently selected file in the background and you can continue selecting files from Quick Open.

Command line

VS Code has a powerful command line interface (CLI) which allows you to customize how the editor is launched to support various scenarios.

Make sure the VS Code binary is on your path so you can simply type 'code' to launch VS Code. See the platform specific setup topics if VS Code is added to your environment path during installation (Running VS Code on Linux, macOS, Windows).

.vscode folder

Workspace specific files are in a .vscode folder at the root. For example, tasks.json for the Task Runner and launch.json for the debugger.

Status Bar

Errors and warnings

Keyboard Shortcut: ⇧⌘M (Windows, Linux Ctrl+Shift+M)

Quickly jump to errors and warnings in the project.

Cycle through errors with F8 or ⇧F8 (Windows, Linux Shift+F8)

You can filter problems either by type ('errors', 'warnings') or text matching.

Change language mode

Keyboard Shortcut: ⌘K M (Windows, Linux Ctrl+K M)

If you want to persist the new language mode for that file type, you can use the Configure File Association for command to associate the current file extension with an installed language.

Customization

There are many things you can do to customize VS Code.

  • Change your theme
  • Change your keyboard shortcuts
  • Tune your settings
  • Add JSON validation
  • Create snippets
  • Install extensions

Change your theme

Keyboard Shortcut: ⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)

You can install more themes from the VS Code extension Marketplace.

Additionally, you can install and change your File Icon themes.

Keymaps

Are you used to keyboard shortcuts from another editor? You can install a Keymap extension that brings the keyboard shortcuts from your favorite editor to VS Code. Go to Preferences > Keymap Extensions to see the current list on the Marketplace. Some of the more popular ones:

Customize your keyboard shortcuts

Keyboard Shortcut: ⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S)

You can search for shortcuts and add your own keybindings to the keybindings.json file.

See more in Key Bindings for Visual Studio Code.

Tune your settings

By default VS Code shows the Settings editor, you can find settings listed below in a search bar, but you can still edit the underlying settings.json file by using the Open Settings (JSON) command or by changing your default settings editor with the workbench.settings.editor setting.

Open User Settings settings.json

Keyboard Shortcut: ⌘, (Windows, Linux Ctrl+,)

Format on paste

Change the font size of various UI elements

Change the zoom level

Font ligatures

Tip: You will need to have a font installed that supports font ligatures. FiraCode is a popular font on the VS Code team.

Auto Save

You can also toggle Auto Save from the top-level menu with the File > Auto Save.

Format on save

Change the size of Tab characters

Spaces or Tabs

Render whitespace

Ignore files / folders

Removes these files / folders from your editor window.

Remove these files / folders from search results.

And many, many other customizations.

Language specific settings

For the settings, which you only want for specific languages, you can scope the settings by the language identifier. You can find a list of commonly used language ids in the Language Identifiers reference.

Tip: You can also create language specific settings with the Configure Language Specific Settings command.

Add JSON validation

Enabled by default for many file types. Create your own schema and validation in settings.json

or for a schema defined in your workspace

or a custom schema

See more in the JSON documentation.

Extensions

Keyboard Shortcut: ⇧⌘X (Windows, Linux Ctrl+Shift+X)

Find extensions

  1. In the VS Code Marketplace.
  2. Search inside VS Code in the Extensions view.
  3. View extension recommendations
  4. Community curated extension lists, such as awesome-vscode.

Install extensions

In the Extensions view, you can search via the search bar or click the More Actions (...) button to filter and sort by install count.

Extension recommendations

In the Extensions view, click Show Recommended Extensions in the More Actions (...) button menu.

Creating my own extension

Are you interested in creating your own extension? You can learn how to do this in the Extension API documentation, specifically check out the documentation on contribution points.

  • configuration
  • commands
  • keybindings
  • languages
  • debuggers
  • grammars
  • themes
  • snippets
  • jsonValidation

Files and folders

Integrated Terminal

Keyboard Shortcut: ⌃` (Windows, Linux Ctrl+`)

Further reading:

  • Integrated Terminal documentation

Auto Save

Open User Settings settings.json with ⌘, (Windows, Linux Ctrl+,)

You can also toggle Auto Save from the top-level menu with the File > Auto Save.

Toggle Sidebar

Keyboard Shortcut: ⌘B (Windows, Linux Ctrl+B)

Zen mode

Keyboard Shortcut: ⌘K Z (Windows, Linux Ctrl+K Z)

Enter distraction free Zen mode.

Press Esc twice to exit Zen Mode.

Side by side editing

Keyboard Shortcut: (Windows, Linux Ctrl+)

You can also drag and drop editors to create new editor groups and move editors between groups.

Visual Studio For Mac Collapse Code

Switch between editors

Keyboard Shortcut: ⌘1 (Windows, Linux Ctrl+1), ⌘2 (Windows, Linux Ctrl+2), ⌘3 (Windows, Linux Ctrl+3)

Move to Explorer window

Keyboard Shortcut: ⇧⌘E (Windows, Linux Ctrl+Shift+E)

Create or open a file

Keyboard Shortcut: Ctrl+click (Cmd+click on macOS)

You can quickly open a file or image or create a new file by moving the cursor to the file link and using Ctrl+click.

Close the currently opened folder

Keyboard Shortcut: ⌘W (Windows Ctrl+F4, Linux Ctrl+W)

Navigation history

Navigate entire history: ⌃Tab (Windows, Linux Ctrl+Tab)

Navigate back: ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-)

Navigate forward: ⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-)

File associations

Visual studio for mac code collapsed

Create language associations for files that aren't detected correctly. For example, many configuration files with custom file extensions are actually JSON.

Preventing dirty writes

VS Code will show you an error message when you try to save a file that cannot be saved because it has changed on disk. VS Code blocks saving the file to prevent overwriting changes that have been made outside of the editor.

In order to resolve the save conflict, click the Compare action in the error message to open a diff editor that will show you the contents of the file on disk (to the left) compared to the contents in VS Code (on the right):

Use the actions in the editor toolbar to resolve the save conflict. You can either Accept your changes and thereby overwriting any changes on disk, or Revert to the version on disk. Reverting means that your changes will be lost.

Note: The file will remain dirty and cannot be saved until you pick one of the two actions to resolve the conflict.

Editing hacks

Here is a selection of common features for editing code. If the keyboard shortcuts aren't comfortable for you, consider installing a keymap extension for your old editor.

Tip: You can see recommended keymap extensions in the Extensions view with ⌘K ⌘M (Windows, Linux Ctrl+K Ctrl+M) which filters the search to @recommended:keymaps.

Multi cursor selection

To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click (Option+click on macOS).

To set cursors above or below the current position use:

Keyboard Shortcut: ⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) or ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down)

You can add additional cursors to all occurrences of the current selection with ⇧⌘L (Windows, Linux Ctrl+Shift+L).

Note: You can also change the modifier to Ctrl/Cmd for applying multiple cursors with the editor.multiCursorModifiersetting . See Multi-cursor Modifier for details.

If you do not want to add all occurrences of the current selection, you can use ⌘D (Windows, Linux Ctrl+D) instead. This only selects the next occurrence after the one you selected so you can add selections one by one.

Column (box) selection

You can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line.

You can also use keyboard shortcuts to trigger column selection.

Fast scrolling

Pressing the Alt key enables fast scrolling in the editor and Explorers. By default, fast scrolling uses a 5X speed multiplier but you can control the multiplier with the Editor: Fast Scroll Sensitivity (editor.fastScrollSensitivity) setting.

Copy line up / down

Keyboard Shortcut: ⇧⌥↑ (Windows Shift+Alt+Up, Linux Ctrl+Shift+Alt+Up) or ⇧⌥↓ (Windows Shift+Alt+Down, Linux Ctrl+Shift+Alt+Down)

The commands Copy Line Up/Down are unbound on Linux because the VS Code default keybindings would conflict with Ubuntu keybindings, see Issue #509. You can still set the commands editor.action.copyLinesUpAction and editor.action.copyLinesDownAction to your own preferred keyboard shortcuts.

Move line up and down

Keyboard Shortcut: ⌥↑ (Windows, Linux Alt+Up) or ⌥↓ (Windows, Linux Alt+Down)

Visual Studio For Mac Tutorial

Shrink / expand selection

Keyboard Shortcut: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) or ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)

You can learn more in the Basic Editing documentation.

Go to Symbol in File

Keyboard Shortcut: ⇧⌘O (Windows, Linux Ctrl+Shift+O)

You can group the symbols by kind by adding a colon, @:.

Go to Symbol in Workspace

Keyboard Shortcut: ⌘T (Windows, Linux Ctrl+T)

Navigate to a specific line

Keyboard Shortcut: ⌃G (Windows, Linux Ctrl+G)

Undo cursor position

Keyboard Shortcut: ⌘U (Windows, Linux Ctrl+U)

Trim trailing whitespace

Keyboard Shortcut: ⌘K ⌘X (Windows, Linux Ctrl+K Ctrl+X)

Code formatting

Currently selected source code: ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)

Whole document format: ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)

Code folding

Keyboard Shortcut: ⌥⌘[ (Windows, Linux Ctrl+Shift+[) and ⌥⌘] (Windows, Linux Ctrl+Shift+])

Select current line

Keyboard Shortcut: ⌘L (Windows, Linux Ctrl+L)

Navigate to beginning and end of file

Keyboard Shortcut: ⌘↑ (Windows, Linux Ctrl+Home) and ⌘↓ (Windows, Linux Ctrl+End)

Open Markdown preview

In a Markdown file, use

Keyboard Shortcut: ⇧⌘V (Windows, Linux Ctrl+Shift+V)

Side by side Markdown edit and preview

In a Markdown file, use

Keyboard Shortcut: ⌘K V (Windows, Linux Ctrl+K V)

The preview and editor will synchronize with your scrolling in either view.

IntelliSense

⌃Space (Windows, Linux Ctrl+Space) to trigger the Suggestions widget.

You can view available methods, parameter hints, short documentation, etc.

Peek

Select a symbol then type ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10). Alternatively, you can use the context menu.

Go to Definition

Select a symbol then type F12. Alternatively, you can use the context menu or Ctrl+click (Cmd+click on macOS).

You can go back to your previous location with the Go > Back command or ⌃- (Windows Alt+Left, Linux Ctrl+Alt+-).

You can also see the type definition if you press Ctrl (Cmd on macOS) when you are hovering over the type.

Peek References

Select a symbol then type ⇧F12 (Windows, Linux Shift+F12). Alternatively, you can use the context menu.

Find All References view

Select a symbol then type ⇧⌥F12 (Windows, Linux Shift+Alt+F12) to open the References view showing all your file's symbols in a dedicated view.

Rename Symbol

Select a symbol then type F2. Alternatively, you can use the context menu.

Search and modify

Besides searching and replacing expressions, you can also search and reuse parts of what was matched, using regular expressions with capturing groups. Enable regular expressions in the search box by clicking the Use Regular Expression.* button (⌥⌘R (Windows, Linux Alt+R)) and then write a regular expression and use parenthesis to define groups. You can then reuse the content matched in each group by using $1, $2, etc. in the Replace field.

.eslintrc.json

Install the ESLint extension. Configure your linter however you'd like. Consult the ESLint specification for details on its linting rules and options.

Here is configuration to use ES6.

package.json

Visual Studio Code Download Mac

See IntelliSense for your package.json file.

Emmet syntax

Support for Emmet syntax.

Snippets

Create custom snippets

File > Preferences > User Snippets (Code > Preferences > User Snippets on macOS), select the language, and create a snippet.

See more details in Creating your own Snippets.

Git integration

Keyboard Shortcut: ⌃⇧G (Windows, Linux Ctrl+Shift+G)

Git integration comes with VS Code 'out-of-the-box'. You can install other SCM providers from the extension Marketplace. This section describes the Git integration but much of the UI and gestures are shared by other SCM providers.

Diffs

From the Source Control view, select the file to diff.

Side by side

Default is side by side diff.

Inline view

Toggle inline view by clicking the More Actions (...) button in the top right and selecting Switch to Inline View.

If you prefer the inline view, you can set 'diffEditor.renderSideBySide': false.

Review pane

Navigate through diffs with F7 and ⇧F7 (Windows, Linux Shift+F7). This will present them in a unified patch format. Lines can be navigated with arrow keys and pressing Enter will jump back in the diff editor and the selected line.

Edit pending changes

You can make edits directly in the pending changes of the diff view.

Branches

Easily switch between Git branches via the Status Bar.

Visual Studio Collapse All Code

Staging

Stage all

Hover over the number of files and click the plus button.

Stage selected

Stage a portion of a file by selecting that file (using the arrows) and then choosing Stage Selected Ranges from the Command Palette.

Undo last commit

See Git output

Visual Studio For Mac Code Collapse Of The Soviet

VS Code makes it easy to see what Git commands are actually running. This is helpful when learning Git or debugging a difficult source control issue.

Use the Toggle Output command (⇧⌘U (Windows Ctrl+Shift+U, Linux Ctrl+K Ctrl+H)) and select Git in the drop-down.

Gutter indicators

View diff decorations in editor. See documentation for more details.

Resolve merge conflicts

During a merge, go to the Source Control view (⌃⇧G (Windows, Linux Ctrl+Shift+G)) and make changes in the diff view.

Set VS Code as default merge tool

Debugging

Configure debugger

Open the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) and select Debug: Open launch.json, which will prompt you to select the environment that matches your project (Node.js, Python, C++, etc). This will generate a launch.json file. Node.js support is built-in and other environments require installing the appropriate language extensions. See the debugging documentation for more details.

Breakpoints and stepping through

Place breakpoints next to the line number. Navigate forward with the Debug widget.

Data inspection

Inspect variables in the Debug panels and in the console.

Inline values

You can set 'debug.inlineValues': true to see variable values inline in the debugger. This feature can be expensive and may slow down stepping, so it is disabled by default.

Task runner

Auto detect tasks

Select Terminal from the top-level menu, run the command Configure Tasks, then select the type of task you'd like to run. This will generate a tasks.json file with content like the following. See the Tasks documentation for more details.

Visual Studio Code For Mac

There are occasionally issues with auto generation. Check out the documentation for getting things to work properly.

Run tasks from the Terminal menu

Select Terminal from the top-level menu, run the command Run Task, and select the task you want to run. Terminate the running task by running the command Terminate Task

Define keyboard shortcuts for tasks

You can define a keyboard shortcut for any task. From the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)), select Preferences: Open Keyboard Shortcuts File, bind the desired shortcut to the workbench.action.tasks.runTask command, and define the Task as args.

For example, to bind Ctrl+H to the Run tests task, add the following:

Run npm scripts as tasks from the explorer

With the setting npm.enableScriptExplorer, you can enable an explorer that shows the scripts defined in your workspace.

From the explorer you can open a script in the editor, run it as a task, and launch it with the node debugger (when the script defines a debug option like --inspect-brk). The default action on click is to open the script. To run a script on a single click, set npm.scriptExplorerAction to 'run'. Use the setting npm.exclude to exclude scripts in package.json files contained in particular folders.

Portable mode

VS Code has a Portable mode which lets you keep settings and data in the same location as your installation, for example, on a USB drive.

Visual Studio For Mac Code Collapse Game

Insiders builds

The Visual Studio Code team uses the Insiders version to test the latest features and bug fixes of VS Code. You can also use the Insiders version by downloading it here.

  • For Early Adopters - Insiders has the most recent code changes for users and extension authors to try out.
  • Frequent Builds - New builds every day with the latest bug fixes and features.
  • Side-by-side install - Insiders installs next to the Stable build allowing you to use either independently.