Basic Layout

Each time you launch VS Code, it opens up in the same state it was in when you last left it. The folder, layout, and opened files will be preserved the same. Open files in each editor are displayed with tabbed headers (Tabs) at the top of the editor region. To learn more information about tabbed headers, see the details of the Tabs section. You can also move the Sidebar to the right-hand side (View ➤ Move Side Bar Right) or enhance its visibility (Ctrl+B).

Side-By-Side Editing

Once you open another file, the editor that is in progress will display the content of that file. So if you have two editors side by side and you need to open file doc.cs into the right-hand editor, make sure that editor is active (by clicking on it) before opening file doc.cs.

By default, editors are made to open on the right-hand side of the active one. You can change this pattern through the setting workbench.editor.openSideBySideDirection and modify to open new editors to the bottom of the active one instead. At the same time, when you have more than one editor active, you can switch between them easily by holding the Ctrl (macOS: Cmd) key and pressing 1, 2, and 3. In addition, you can resize editors and reorder them if you would like to: simply drag and drop the editor title area to reposition or resize the editor.

Minimap

A Minimap (code outline) allows you to get a high-level overview of your source code, which is quite useful for easy navigation and code comprehension. A file’s minimap is displayed on the right side of the editor. You can also click or drag the shaded area to quickly switch to different sections of your file. It is also worth noting that you can move the minimap to the left-hand side or even disable it completely by simply setting “editor.minimap.side”:, “left”, or “editor.minimap.enabled”: false in your user or workspace settings.

Indent Guides

The image above the editor also shows vertical lines or indentation guides that are there to help you freely observe matching indent levels. If you would like to turn off those indent guides, you should set “editor.renderIndentGuides”: false in your user or workspace settings.

Breadcrumbs

If you take a look at the editor once again, you will notice it has a navigation bar above its contents that is named Breadcrumbs. It is there to show your current location and let you quickly navigate between folders, files, and symbols.

Breadcrumbs also tend to display the file path, and if the active file type has language support for symbols, it displays the symbol path up to the cursor position. You can switch off Breadcrumbs with the View ➤ Show Breadcrumbs simple command. You can also access the same information about the Breadcrumbs feature at the Breadcrumbs section of the editor.

Explorer

Moreover, you can drag and drop files into the Explorer from outside VS Code to make a VS copy of them, so that if the explorer is empty, VS Code will access them instead.

VS Code also works very well with other tools that you might use, especially command-line tools. If you need to run a command-line tool in the context of the folder you have open in VS Code, right-click the folder and select Open in Command Prompt (or Open in Terminal on macOS or Linux).

At the same time, you can navigate to the location of a file or folder in the native Explorer by right-clicking on a file or folder and selecting Reveal in Explorer (or Reveal in Finder on macOS, or Open Containing Folder on Linux). You may also type Ctrl+P (Quick Open option) to quickly search and open a file by its name.

By default, VS Code does not open some folders from the Explorer (for example, .git). In this case, you can use the files.exclude setting to edit rules for hiding files and folders from the Explorer. However, if you have any derived resource files, such as *.meta in Unity or *.js in a TypeScript project, then this solution is not really going to be useful. Please note that for Unity to exclude the *.cs.metafiles, the pattern to select would be “**/*.cs.meta”: true. For TypeScript, you can exclude generated JavaScript for TypeScript files with “**/*.js”: {“when”: “$(basename).ts”}.

Multiselection

You can choose multiple files in the File Explorer and OPEN EDITORS view to complete actions (Delete, Drag and Drop, Open to the Side) on multiple items. Simply use the Ctrl/Cmd key with a click to select individual files and Shift + click to select a range. If you select two items, you can now use the context menu Compare Selected command to quickly differentiate the two files. Also, remember that in earlier VS Code releases, clicking with the Ctrl/Cmd key pressed would open a file in a new Editor Group to the side. If you would still like this feature, you can use the workbench.list.multiSelectModifier setting to modify multiselection to use the Alt key by “workbench.list.multiSelectModifier”: “alt”.

Filtering the Document Tree

It is possible to filter the currently visible files in the File Explorer. You can simply start typing part of the file name you want to match, keeping the focus on the File Explorer. You will be able to see a filter box in the top-right of the File Explorer presenting what you have typed so far, and matching file names will be highlighted. Once you press the cursor keys to move up and down the file list, it will switch between matching files or folders. However, switching over the filter box and selecting Enable Filter on Type will show only matching files and folders. You can apply the X Clear button to clear the filter.

Outline View

The Outline view is a section at the bottom of the File Explorer. When activated, it will show the symbol tree of the currently active editor. The Outline view has different Sort By modes and optional cursor tracking, and supports the usual open gestures. It also has an input box that can search for filters and symbols as you type. Errors and warnings are also displayed in the Outline view, allowing you to see a glimpse of a problem as well as its location.

As for symbols, the view relies heavily on the data computed by your installed extensions for different file types. For instance, the built-in Markdown support returns the Markdown header hierarchy for a Markdown file’s symbols.

Markdown Outline View

Open Editors

At the top of the Explorer, there is a section labeled as OPEN EDITORS that displays a list of active files or previews. There might also be some files visible that you previously opened in VS Code. For example, a file will be listed in the OPEN EDITORS view if you make a change to a file, double-click a file’s header, double-click a file in the Explorer, or open a file that is not part of the current folder. By clicking an item in the OPEN EDITORS view, it becomes active in VS Code. Once you are finished with your project and wish to remove files individually from the OPEN EDITORS view, or remove all files, you can do so by using the View: Close All Editors or View and then Close All Editors in Group actions.

Views

Any of these views can be accessed by using the View: Open View command.

Activity Bar

The Activity Bar on your left is designed for you to easily switch between Views. You can also reorder Views by dragging and dropping them on the Activity Bar, or stow away a View entirely with the right-click Hide from Activity Bar.

Command Palette

Hiding the Menu Bar (for Windows, Linux)

You can hide the Menu Bar on Windows and Linux by selecting the setting window.menuBarVisibility from classic to toggle. The toggle setting means that a single press of the Alt key will show the Menu Bar again.

You can also remove the Menu Bar on Windows and Linux with the View ➤ Toggle Menu Bar command. This command switches window.menuBarVisibility from classic to compact, resulting in the Menu Bar moving into the Activity Bar. To move back to the Menu Bar to the classic position, select the View ➤ Toggle Menu Bar command again.

Settings

Most basic editor configurations are kept in settings that can be modified directly. You can set options globally through user settings, or per project or file through workspace settings. Settings options are kept in a settings.json file. You can follow the path Select File ➤ Preferences ➤ Settings (or press Ctrl+,) to edit the user settings.json file. To change workspace settings, click the WORKSPACE SETTINGS tab to edit the workspace settings.json file. Note that for macOS users, the Preferences menu is located under Code, not File; please follow Code ➤ Preferences ➤ Settings.

You can access the VS Code Default Settings in the left window, and your editable settings.json on the right. It is also possible to easily filter settings in the Default Settings using the search box at the top. You can copy a setting over to the editable settings.json on the right by clicking on the edit icon to the left of the setting. Settings with a fixed set of values let you select a primary value as a section of their edit icon menu. After editing your settings, type Ctrl+S to settle your changes. The changes will take effect instantly. Workspace settings will override User settings and are beneficial for sharing particular project settings.

Zen Mode

Zen mode enables you to focus on your code by removing all User Interface items (Activity Bar, Status Bar, Side Bar, and Panel) except the editor, displaying the full screen and centering the editor layout only. Zen mode can be toggled using the View menu, Command Palette or by the shortcut, Ctrl+K Z. To exit Zen mode, press double Esc. The transition to full screen can be disabled via zenMode.fullScreen. Zen mode can be further modified using the following settings: zenMode.hideStatusBar, zenMode.hideTabs, zenMode.fullScreen, zenMode.restore, and zenMode.centerLayout.

Centered Editor Layout

Centered editor layout lets you center-align the editor area. This is especially useful if you find yourself working with a single editor on a large monitor. You can apply the sashes on the side to resize the view with the Alt key, and using the same method you can also independently move the sashes.

Tabs

VS Code displays open items with tabbed headings or Tabs in the title area above the editor. If you open a file, a new Tab is added for that file. Tabs allow you to quickly navigate between files, and you can drag and drop tabs to reorder them as you wish. When you have more open items than can fit in the title area, you can apply the Show Opened Editors command to show a dropdown list of tabbed items.

If you do not want to use Tabs, you can turn off the feature by setting the workbench.editor.showTabs setting to false: “workbench.editor.showTabs”: false.

Tab Ordering

By default, new Tabs are included to the right of the existing Tabs, but you can administer where you would like new Tabs to appear with the workbench.editor.openPositioning setting. For instance, you might like new tabbed items to appear on the left, by using “workbench.editor.openPositioning”: “left”.

Preview Mode

Once you single-click or select a file in the Explorer, it is shown in a presentation mode and reuses an existing Tab. This is particularly helpful if you just need to quickly browse files and do not want each file you accessed to have its own Tab. When you start editing the file or use double-click to open the file from the Explorer, a new Tab is assigned to that file. Preview mode is indicated by italics in the Tab heading: preview mode.

Editor Groups

If you split an editor via the Split Editor or Open to the Side commands, a new editor region that can hold a group of items is created instead. At the same time, you can open as many editor regions as you like side-by-side vertically and horizontally. You can see them in order in the OPEN EDITORS section at the top of the Explorer view. The OPEN EDITORS section also allows you to Drag and Drop editor groups on the workbench, move individual Tabs between groups, and quickly close entire groups by clicking on Close All.

Be sure that VS Code uses editor groups whether or not you have any Tabs on. Without Tabs, editor groups are a stack of your open items with the most recently searched item visible in the editor pane. By default, editor groups are structured in vertical columns when you split an editor to open it to the side. You can also arrange editor groups in any layout you like, both vertically and horizontally.

In order to support flexible layouts, you should create empty editor groups. By default, closing the last editor of an editor group will also close the group itself, but you can modify this behavior with the new setting workbench.editor.closeEmptyGroups: false. You can also see if there are any predefined set of editor layouts in the View ➤ Editor Layout menu.

Editors that open to the side by clicking the editor toolbar Split Editor action will normally open to the right-hand side of the active editor. If you prefer to open editors below the active one, configure the new setting workbench.editor.openSideBySideDirection: down.

There are plenty of keyboard commands for adjusting the editor layout with the keyboard alone, but if you prefer to use the mouse, drag and drop is the fastest method to split the editor into any direction. In addition, if you press and hold the Alt key while switching over the toolbar action to split an editor, it will offer to split to the other orientation. This is another fast way to split either to the right or to the bottom.

Keyboard Shortcuts

Disabling Preview Mode

Without Tabs, the OPEN EDITORS section of the File Explorer is a great way to do file navigation. With preview editor mode, files are not shown in the OPEN EDITOR list, nor editor group on single-click open. You can turn this feature off through the workbench.editor.enablePreview and workbench.editor.enablePreviewFromQuickOpen settings.

Using Ctrl+Tab to Navigate in Entire Editor History

Closing an Entire Group Instead of a Single Editor

Window Management

VS Code has some options to operate to determine how windows can be opened or restored between sessions. The settings window.openFoldersInNewWindow and window.openFilesInNewWindow are used to configure opening new windows or reusing the last active window for files or folders and possible values by default.

If edited to turn to default conditions, VS Code will restore all windows you worked on during your previous session. However, there can still be cases where this setting is ignored (for instance, if using the -new-window or -reuse-window command-line option).

The window.restoreWindows setting tells VS Code how to restore the opened windows of your previous session. You can also change this setting to never reopen any windows and always start with an empty VS Code instance.

We will now take a look at how to set up VS Code for Python development.

Cross-Platform

VS Code is a free code editor that runs on the macOS, Linux, and Windows operating systems.

For smoother installation you can follow the following platform-specific guides:⁵

Updating Cadence

VS Code releases a new version every month with new features and progressive bug fixes. Most platforms have auto-updating installed, so you will be prompted to look for the new release when it becomes available. You can also manually check for updates by running Help ➤ Check for Updates on Linux and Windows, or running Code ➤ Check for Updates on macOS. Additionally, you can also disable auto-update if you would like to update VS Code according to your own schedule.

Insiders Nightly Build

If you’d like to check out VS Code nightly builds to get access to new features earlier than the rest of the users or to verify bug fixes, you can install the Insiders build. The Insiders build installs side by side with the monthly Stable build, and you can freely incorporate and work with both on the same machine. The Insiders build is the same tool that the VS Code development team uses on a daily basis. If you have valuable feedback about the new features to offer, the development team would really appreciate it.

Portable Mode

VS Code also supports Portable mode installation. This mode ensures that all data created and maintained by VS Code is stored in close quarters so that when necessary it can be moved around across environments, even on a USB drive.

Additional Components

VS Code is an editor with a relatively small footprint. Unlike other traditional editors that tend to include every other function, with VS Code you can tune and customize your installation to the development technologies most important to you.

Extensions

Extensions smoothly integrate into VS Code’s User Interface, commands, and task running systems, so you will find it easy to operate with different technologies through VS Code’s shared interface.

Keyboard Shortcuts Editor

VS Code has many simple keyboard shortcuts using Keyboard Shortcuts editor. It illustrates all available commands with and without keybindings, and you can easily change, remove, and update these using the available options. It also has a search box on the top that is useful when searching for commands or keybindings. You can open this editor by looking at the menu under File ➤ Preferences ➤ Keyboard Shortcuts (Code ➤ Preferences ➤ Keyboard Shortcuts on macOS). You can also access a printable version of these keyboard shortcuts at Help ➤ Keyboard Shortcut Reference and get a condensed PDF version suitable for printing as a user-friendly reference.

Keyboard Rules

Two separate keypress actions known as Chords are described by separating the two keypresses with space. For example, Ctrl+K Ctrl+C.

The additional keybindings.json rules are omitted at runtime to the bottom of the default rules, therefore allowing them to overwrite the default rules. The keybindings.json file is observed by VS Code, so editing it while VS Code is running will upgrade the rules at runtime.

Accepted Keys

Command Arguments

The type command will receive {“text”: “Hello There”} as its first argument and add “Hello There” to the file instead of producing the default command.

Removing a Specific Key Binding Rule

You can script a key binding rule that targets the dismissal of a specific default key binding. With keybindings.json it was always acceptable to redefine all the key bindings of VS Code, but it can be challenging to make a small addition, especially around overloaded keys, such as Tab or Escape. In order to hide a specific key binding, add a - to the command and the rule will be a removal one.

Keyboard Layout-Independent Nindings

Using scan codes, it is manageable to define keybindings that do not change with the modification of the keyboard layout. For example: { “key”: “cmd+[Slash]”, “command”: “editor.action.commentLine”, and “when”: “editorTextFocus” }.

When Clause Contexts

VS Code gives you full control over when your key bindings are activated through the optional when clause. If some key bindings do not have a when clause, those key binding are globally available at all times. A when clause relates to either Boolean true or false for operating key bindings.

In addition, VS Code sets various context keys and specific values depending on what elements are available and active in the VS Code User Interface. For instance, the built-in Start Debugging command has the keyboard shortcut F5, which is only enabled when there is an appropriate debugger available (context debuggersAvailable is true) and the editor is not in debug mode (context inDebugMode is false).

Conditional Operators

Available Contexts

Programming Languages Supported

You can go to the Marketplace or check out the integrated Extensions view and search for your desired programming language to find snippets, code completion and IntelliSense providers, linters, debuggers, and more. If you want to change the display language of VS Code (for example, to some other available language), you can do that in the Display Language topic.

It is best to have some prior understanding of these programming languages and their language specific documentation supported by VS Code in advance.

Language Features in VS Code

Changing the Language for the Selected File

In VS Code, there is a default setting of the language support for a file based on its filename extension. Nevertheless, when you need to change a few language modes, you can do so by clicking on the language indicator, which is located on the right-hand side of the Status Bar. This will call up the Select Language Mode dropdown, where you can see and choose another language for the current file.

Additional Components and Tools

VS Code is quite minimal by design and only includes the limited number of components shared across most development platforms. Basic functionality such as the editor, file management, window management, and preference settings are included. A JavaScript and TypeScript language service and Node.js debugger are also part of the basic structure.

If you are used to working with bigger, more inclusive, and diverse development tools, you may be surprised that your scenarios are not always fully supported out of the box. For instance, there is not a File ➤ New Project dialog with preinstalled project templates. Most VS Code users will be required to look for and download additional components, depending on their specific projects.

Commonly Used Components

VS Code Extensions

Additional Tools

Please note that most of these tools require Node.js and the npm package manager to download and apply.

Settings Precedence

Values with primitive types and Array type are overridden, but those with Object type are merged. For example, workbench.colorCustomizations takes an Object that specifies a group of User Interface items and their desired colors. If there are conflicting values, the usual reaction would be to override behavior with workspace values taking precedence over user values.

Settings and Security

The first time you activate a workspace that determines any of these settings, VS Code is going to warn you once, and you may ignore the values after that.