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. 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.

welcome page

Includes the Interactive Playground.

interactive playground

Command Palette

Access all available commands based on your current context.

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

command palette

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 references

Keyboard Reference Sheets

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

Keyboard Reference Sheet

Quick Open

Quickly open files.

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

Quick Open

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) to help you customize the editor launch your specific 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).

# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions .

.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)

errors and warnings

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

Change language mode

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

change syntax

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

Check out the full Settings documentation.

Change your theme

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

You can install more themes from the extension Marketplace.

Preview themes

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

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)

keyboard shortcuts

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

customize keyboard shortcuts

See more in Key Bindings for Visual Studio Code.

Tune your settings

Open User Settings settings.json

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

Format on paste

"editor.formatOnPaste": true

Change the font size

"editor.fontSize": 18

Change the zoom level

"window.zoomLevel": 5

Font ligatures

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

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

font ligatures

Auto Save

"files.autoSave": "afterDelay"

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

Format on save

"editor.formatOnSave": true,

Change the size of Tab characters

"editor.tabSize": 4

Spaces or Tabs

"editor.insertSpaces": true

Render whitespace

"editor.renderWhitespace": "all"

Ignore files / folders

Removes these files / folders from your editor window.

"files.exclude": {
        "somefolder/": true,
        "somefile": true
}

Remove these files / folders from search results.

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

And many, many other customizations.

Language specific settings

For those settings 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.

"[languageid]": {

}

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

language based settings

Add JSON validation

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

"json.schemas": [
    {
        "fileMatch": [
            "/bower.json"
        ],
        "url": "http://json.schemastore.org/bower"
    }
]

or for a schema defined in your workspace

"json.schemas": [
    {
        "fileMatch": [
            "/foo.json"
        ],
        "url": "./myschema.json"
    }
]

or a custom schema

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    },

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 (...) button to filter and sort by install count.

install extensions

Extension recommendations

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

show recommended extensions

Creating my own extension

Are you interested in creating your own extension? You can learn how to do this in the 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+`)

Integrated terminal

Further reading:

Auto Save

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

"files.autoSave": "afterDelay"

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)

toggle side bar

Zen Mode

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

zen mode

Enter distraction free Zen mode.

Side by side editing

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

You can also use Ctrl then click a file from the File Explorer (Cmd+click on macOS).

split editors

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

Switch between editors

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

navigate editors

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.

create and open file

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+-)

navigate history

Navigate to a file

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

navigate to file

File associations

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

"files.associations": {
    ".database": "json"
}

Editing Hacks

Here are 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

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

multi cursor

multi cursor second example

Add more cursors to current selection.

add cursor to all occurrences of current selection

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.

Join line

Keyboard Shortcut: ⌃J (Windows, Linux )

Windows / Linux: Not bound by default. Open Keyboard Shortcuts (⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S)) and bind editor.action.joinLines to a shortcut of your choice.

Join lines

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.copyLinesUpAction to your own preferred keyboard shortcuts.

copy line down

Shrink / expand selection

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

shrink expand selection

You can learn more in the Basic Editing documentation.

Go to Symbol in File

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

Find by symbol

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

group symbols by kind

Go to Symbol in Workspace

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

go to symbol in workspace

Navigate to a specific line

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

navigate to line

Undo cursor position

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

undo cursor position

Move line up and down

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

move line up and down

Trim trailing whitespace

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

trailing whitespace

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 formatting

Code folding

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

code folding

Select current line

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

select current line

Navigate to beginning and end of file

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

navigate to beginning and end of file

Open Markdown Preview

In a Markdown file, use

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

toggle readme preview

Side by Side Markdown Edit and Preview

In a Markdown file, use

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

Special bonus: The preview will now sync.

markdown sync

IntelliSense

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

intellisense

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

Peek

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

peek

Go to Definition

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

go to definition

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.

Find All References

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

find all references

Rename Symbol

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

rename symbol

.eslintrc.json

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

Here is configuration to use ES6.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "classes": true,
            "defaultParams": true
        }
    },
    "rules": {
        "no-const-assign": 1,
        "no-extra-semi": 0,
        "semi": 0,
        "no-fallthrough": 0,
        "no-empty": 0,
        "no-mixed-spaces-and-tabs": 0,
        "no-redeclare": 0,
        "no-this-before-super": 1,
        "no-undef": 1,
        "no-unreachable": 1,
        "no-use-before-define": 0,
        "constructor-super": 1,
        "curly": 0,
        "eqeqeq": 0,
        "func-names": 0,
        "valid-typeof": 1
    }
}

package.json

See IntelliSense for your package.json file.

package json intellisense

Emmet syntax

Support for Emmet syntax.

emmet syntax

Snippets

Create custom snippets

File > Preferences > User Snippets, select the language, and create a snippet.

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "\trender() {",
        "\t\treturn ($2);",
        "\t}",
        "",
        "}"
    ]
},

See more details in Creating your own Snippets.

Git integration

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

Git integration comes with VS Code "in-the-box". You can install other SCM provider 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.

git icon

Side by side

Default is side by side diff.

git diff side by side

Inline view

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

git inline

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.

diff_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.

switch branches

Staging

Stage all

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

git stage all

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

undo last commit

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 (⇧⌘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.

git gutter indicators

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.

Setup VS Code as default merge tool

git config --global merge.tool code

Debugging

Configure debugger

From the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) and select Debug: Open launch.json, select the environment. This will generate a launch.json file. Works out of the box as expected for Node.js and other environments. May need some additional configuration for other languages. See documentation for more details.

configure debugging

Breakpoints and stepping through

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

debug

Data inspection

Inspect variables in the Debug panels and in the console.

data inspection

Inline values

You can set "debug.inlineValues": true to see variable values inline in the debugger. This feature is experimental and disabled by default.

Task Runner

Auto detect tasks

Select Tasks 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 task.json file with content like the following. See the Tasks documentation for more details.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "install",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

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

Run tasks from the Tasks menu

Select Tasks 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...

task runner

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 here.

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