# data[].attributes.body
- Opening files vs opening directories
- Workspaces and Live Server

# data[].attributes.attachment_link.readable_text
"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.

Prefer a video? You can watch a recent Microsoft Build talk Visual Studio Code tips and tricks, which describes 20 tips and tricks for working productively with VS Code.

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.

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.

Tip: Type ? to view commands suggestions.

Typing commands such as edt and term followed by a space will bring up dropdown lists.

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.

Open Recent

Displays a Quick Pick dropdown with the list from File > Open Recent with recently opened folders and workspaces followed by files.

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

Quickly jump to errors and warnings in the project.

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

Change language mode

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

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 > Keymaps to see the current list on the Marketplace. Some of the more popular ones:

Customize your keyboard shortcuts

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

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

Format on paste

Change the size of Tab characters

Spaces or Tabs

Render whitespace

Whitespace characters are rendered by default in text selection.

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

You can scope the settings that you only want for specific languages 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

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.

Files and folders

Integrated Terminal

Further reading:

Toggle Panel

Zen mode

Enter distraction free Zen mode.

Press Esc twice to exit Zen Mode.

Side by side editing

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

Switch between editors

Move to Explorer window

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

File associations

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: or

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

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.

Vertical rulers

You can add vertical column rulers to the editor with the editor.rulers setting, which takes an array of column character positions where you'd like vertical rulers.

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: or

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

Shrink / expand selection

You can learn more in the Basic Editing documentation.

Go to Symbol in File

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

Go to Symbol in Workspace

Outline view

The Outline view in the File Explorer (default collapsed at the bottom) shows you the symbols of the currently open file.

You can sort by symbol name, category, and position in the file and allows quick navigation to symbol locations.

Undo cursor position

Trim trailing whitespace

Transform text commands

You can change selected text to uppercase, lowercase, and title case with the Transform commands from the Command Palette.

Code formatting

Code folding

You can also fold/unfold all regions in the editor with Fold All (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) and Unfold All (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)).

You can fold all block comments with Fold All Block Comments (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)).

Select current line

Open Markdown preview

In a Markdown file, use

Side by side Markdown edit and preview

In a Markdown file, use

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

IntelliSense

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

Peek

Go to Definition

You can go back to your previous location with the Go > Back command or .

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

Go to References

Find All References view

Rename Symbol

Select a symbol then type . 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 () 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

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

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 a file to open the diff.

Alternatively, click the Open Changes button in the top right corner to diff the current open file.
Views
The default view for diffs is the side by side view.

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

If you prefer the inline view, you can set "diffEditor.renderSideBySide": false.
Review pane 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.

Staging
Stage file changes
Hover over the number of files and click the plus button.

Click the minus button to unstage changes.
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

Click the (...) button and then select Undo Last Commit to undo the previous commit. The changes are added to the Staged Changes section.

See Git output

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 () and select Git in the dropdown.

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.

You can resolve merge conflicts with the inline CodeLens which lets you Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes.

Set VS Code as default merge tool

Set VS Code as default diff 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 Run 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.

Logpoints

Logpoints act much like breakpoints but instead of halting the debugger when they are hit, they log a message to the console. Logpoints are especially useful for injecting logging while debugging production servers that cannot be modified or paused.

Add a logpoint with the Add Logpoint command in the left editor gutter and it will be displayed as a "diamond" shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces ('{}').

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.

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

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

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.

With the setting npm.enableRunFromFolder, you can enable to run npm scripts from the File Explorer's context menu for a folder. The setting enables the command Run NPM Script in Folder... when a folder is selected. The command shows a Quick Pick list of the npm scripts contained in this folder and you can select the script to be executed as a task.

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.

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.

# data[].attributes.attachment_link.description
"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.

# data[].attributes.body
- Finding shortcuts
- File navigation
- Editing documents

# data[].attributes.body
- Installing/Uninstalling
- Enabling/Disabling
- Handy Extensions
- Evaluating Extensions (i.e. HTML Hint)

# data[].attributes.body
- Creating by selection
- Creating above/below

# data[].attributes.body
- Running Debugger in Node
- Breakpoints
- Stepping over
- Stepping through

# data[].attributes.body
Pull
Stage/unstage changes
Commit
Managing branches in VS
Comparing and GitLens

# data[].attributes.attachment_link.readable_text
Visual Studio Code has a high productivity code editor which, when combined with programming language services, gives you the power of an IDE and the speed of a text editor. In this topic, we'll first describe VS Code's language intelligence features (suggestions, parameter hints, smart code navigation) and then show the power of the core text editor.

Tip: You can open any file by its name when you type ( Quick Open).

The Explorer is great for navigating between files when you are exploring a project. However, when you are working on a task, you will find yourself quickly jumping between the same set of files. VS Code provides two powerful commands to navigate in and across files with easy-to-use key bindings.

Hold Ctrl and press Tab to view a list of all files open in an editor group. To open one of these files, use Tab again to pick the file you want to navigate to, then release Ctrl to open it.

Alternatively, you can use and ⌃⇧- (Windows Alt+Right, Linux Ctrl+Shift+-) to navigate between files and edit locations. If you are jumping around between different lines of the same file, these shortcuts allow you to navigate between those locations easily.

The editor has a navigation bar above its contents called Breadcrumbs. It shows the current location and allows you to quickly navigate between folders, files, and symbols.

Breadcrumbs always show the file path and, with the help of language extensions, the symbol path up to the cursor position. The symbols shown are the same as in Outline view and Go to Symbol.

Selecting a breadcrumb in the path displays a dropdown with that level's siblings so you can quickly navigate to other folders and files.

If the current file type has language support for symbols, you will see the current symbol path and a dropdown of other symbols at the same level and below.

You can turn off breadcrumbs with the View > Show Breadcrumbs toggle or with the breadcrumbs.enabled setting.

Breadcrumb customization

The appearance of breadcrumbs can be customized. If you have very long paths or are only interested in either file paths or symbols paths, you can use the breadcrumbs.filePath and breadcrumbs.symbolPath settings. Both support on, off, and last and they define if or what part of the path you see. By default, breadcrumbs show file and symbol icons to the left of the breadcrumb but you can remove the icons by setting breadcrumbs.icons to false.

You can control how symbols are ordered in the Breadcrumbs dropdown with the breadcrumbs.symbolSortOrder settings.

Allowed values are:

position - position in the file (default)

name - alphabetical order

type - symbol type order

To interact with breadcrumbs, use the Focus Breadcrumbs command or press ⇧⌘. (Windows, Linux Ctrl+Shift+.). It will select that last element and open a dropdown that allows you to navigate to a sibling file or symbol. Use the and keyboard shortcuts to go to elements before or after the current element. When the dropdown appears, start typing - all matching elements will be highlighted and the best match will be selected for quick navigation.

You can also interact with breadcrumbs without the dropdown. Press ⇧⌘; (Windows, Linux Ctrl+Shift+;) to focus the last element, use and to navigate, and use to reveal the element in the editor.

Go to Definition

If a language supports it, you can go to the definition of a symbol by pressing .

If you press Ctrl and hover over a symbol, a preview of the declaration will appear:

Tip: You can jump to the definition with Ctrl+Click or open the definition to the side with Ctrl+Alt+Click.

Go to Type Definition

Some languages also support jumping to the type definition of a symbol by running the Go to Type Definition command from either the editor context menu or the Command Palette. This will take you to the definition of the type of a symbol. The command editor.action.goToTypeDefinition is not bound to a keyboard shortcut by default but you can add your own custom keybinding.

Go to Implementation

Languages can also support jumping to the implementation of a symbol by pressing ⌘F12 (Windows, Linux Ctrl+F12). For an interface, this shows all the implementors of that interface and for abstract methods, this shows all concrete implementations of that method.

Go to Symbol

You can navigate symbols inside a file with ⇧⌘O (Windows, Linux Ctrl+Shift+O). By typing : the symbols will be grouped by category. Press Up or Down and navigate to the place you want.

Open symbol by name

Some languages support jumping to a symbol across files with . Type the first letter of a type you want to navigate to, regardless of which file contains it, and press Enter.

Peek

We think there's nothing worse than a big context switch when all you want is to quickly check something. That's why we support peeked editors. When you execute a Go to References search (via ⇧F12 (Windows, Linux Shift+F12)), or a Peek Definition (via ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)), we embed the result inline:

You can navigate between different references in the peeked editor and make quick edits right there. Clicking on the peeked editor filename or double-clicking in the result list will open the reference in the outer editor.

Tip: Additionally, the peek window is closed if you press Escape or double-click in the peek editor region. You can disable this behavior with the editor.stablePeek setting.

Bracket matching

Matching brackets will be highlighted as soon as the cursor is near one of them.

Tip: You can jump to the matching bracket with ⇧⌘\ (Windows, Linux Ctrl+Shift+\)

Reference information

Some languages like C# support inline reference information, that is updated live. This allows you to quickly analyze the impact of your edit or the popularity of your specific method or property throughout your project:

Tip: Directly invoke the Peek References action by clicking on these annotations.

Tip: Reference information shown in CodeLens can be turned on or off through the editor.codeLens setting.

Rename symbol

Some languages support rename symbol across files. Press and then type the new desired name and press Enter. All usages of the symbol will be renamed, across files.

Errors & warnings

Warnings or Errors can be generated either via configured tasks, by rich language services, or by linters, that constantly analyze your code in the background. Since we love bug-free code, warnings and errors show up in multiple places:

In the Status Bar, there is a summary of all errors and warnings counts.

You can click on the summary or press ⇧⌘M (Windows, Linux Ctrl+Shift+M) to display the PROBLEMS panel with a list of all current errors.

If you open a file that has errors or warnings, they will be rendered inline with the text and in the overview ruler.

Tip: To loop through errors or warnings in the current file, you can press or ⇧F8 (Windows, Linux Shift+F8) which will show an inline zone detailing the problem and possible Code Actions (if available):

Code Action

Warnings and Errors can provide Code Actions (also known as Quick Fixes) to help fix issues. These will be displayed in the editor in the left margin as a lightbulb. Clicking on the lightbulb will either display the Code Action options or perform the action.

For your protection, VS Code displays a prompt before opening an outgoing website link from the editor.

You can proceed to the external website in your browser or have the options to copy the link or cancel the request. If you choose Configure Trusted Domains, a dropdown lets you trust the exact URL, trust the URL domain and subdomains, or trust all domains to disable outgoing link protection.

The option to Manage Trusted Domains, also available at any time from the Command Palette, brings up the Trusted Domains JSON file, where you can add, remove, or modify trusted domains.

// You can use the "Manage Trusted Domains" command to open this file. // Save this file to apply the trusted domains rules. [ "*.twitter.com" ]

The Trusted Domains JSON file also has comments with examples of the supported domain formats and a list of the domains trusted by default, such as https://*.visualstudio.com and https://*.microsoft.com.

Next steps

Now that you know how the editor works, time to try a few other things...

Common questions

How can I automatically select the second entry in Quick Open instead of the first?

With the command workbench.action.quickOpenPreviousEditor, you can have the second entry automatically selected in Quick Open. This can be useful if you want to select the previous entry from the list without having to invoke another keybinding:

By default, Ctrl+Tab navigates between editors of the same editor group. If you want to navigate across all opened editors in all groups, you can create keyboard shortcuts for the workbench.action.quickOpenPreviousRecentlyUsedEditor and workbench.action.quickOpenLeastRecentlyUsedEditor commands:

Here is a list of commands you can use to navigate in editors without opening a picker:

# data[].attributes.attachment_link.description
Visual Studio Code has a high productivity code editor which, when combined with programming language services, gives you the power of an IDE and the speed of a text editor. In this topic, we'll first describe VS Code's language intelligence features (suggestions, parameter hints, smart code navigation) and then show the power of the core text editor.

# data[].attributes.body
- Creating blank HTML Documents
- Auto-completing HTML tags