• Visual Studio Code Tips and Tricks
    • Basics
      • Getting Started
      • Command Palette
      • Default keyboard shortcuts
      • Keyboard Reference Sheets
      • Quick Open
      • Navigate between recently opened files
      • Open multiple files from Quick Open
    • Command line
      • .vscode folder
    • Status Bar
      • Errors and Warnings
      • Change language mode
    • Customization
      • Change your theme
      • Keymaps
      • Customize your keyboard shortcuts
      • Tune your settings
      • Language specific settings
      • Add JSON validation
    • Extensions
      • Find extensions
      • Install extensions
      • Extension recommendations
      • Creating my own extension
    • Files and Folders
      • Integrated Terminal
      • Auto Save
      • Toggle Sidebar
      • Zen Mode
      • Side by side editing
      • Switch between editors
      • Move to Explorer window
      • Create or open a file
      • Close the currently opened folder
      • Navigation history
      • Navigate to a file
      • File associations
    • Editing Hacks
      • Multi cursor selection
      • Join line
      • Copy line up / down
      • Shrink / expand selection
      • Go to Symbol in File
      • Go to Symbol in Workspace
      • Navigate to a specific line
      • Undo cursor position
      • Move line up and down
      • Trim trailing whitespace
      • Code formatting
      • Code folding
      • Select current line
      • Navigate to beginning and end of file
      • Open Markdown Preview
      • Side by Side Markdown Edit and Preview
    • IntelliSense
      • Peek
      • Go to Definition
      • Find All References
      • Rename Symbol
      • .eslintrc.json
      • package.json
      • Emmet syntax
    • Snippets
      • Create custom snippets
    • Git integration
      • Diffs
      • Branches
      • Staging
      • Undo last commit
      • See Git output
      • Gutter indicators
      • Resolve merge conflicts
      • Setup VS Code as default merge tool
    • Debugging
      • Configure debugger
      • Breakpoints and stepping through
      • Data inspection
      • Inline values
    • Task Runner
      • Auto detect tasks
      • Run tasks from the Tasks menu
    • Insiders builds

    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: kb(workbench.action.showCommands)

    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: kb(workbench.action.quickOpen)

    Quick Open

    Tip: Type kbstyle(?) 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).

    1. # open code with current directory
    2. code .
    3. # open the current directory in the most recently used code window
    4. code -r .
    5. # create a new window
    6. code -n
    7. # change the language
    8. code --locale=es
    9. # open diff editor
    10. code --diff <file1> <file2>
    11. # open file at specific line and column <file:line[:character]>
    12. code --goto package.json:10:5
    13. # see help options
    14. code --help
    15. # disable all extensions
    16. 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: kb(workbench.actions.view.problems)

    Quickly jump to errors and warnings in the project.

    Cycle through errors with kb(editor.action.marker.next) or kb(editor.action.marker.prev)

    errors and warnings

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

    Change language mode

    Keyboard Shortcut: kb(workbench.action.editor.changeLanguageMode)

    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: kb(workbench.action.selectTheme)

    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:

    • Vim
    • Sublime Text Keymap
    • Emacs Keymap
    • Atom Keymap

    Customize your keyboard shortcuts

    Keyboard Shortcut: kb(workbench.action.openGlobalKeybindings)

    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: kb(workbench.action.openGlobalSettings)

    Format on paste

    1. "editor.formatOnPaste": true

    Change the font size

    1. "editor.fontSize": 18

    Change the zoom level

    1. "window.zoomLevel": 5

    Font ligatures

    1. "editor.fontFamily": "Fira Code",
    2. "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

    1. "files.autoSave": "afterDelay"

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

    Format on save

    1. "editor.formatOnSave": true,

    Change the size of Tab characters

    1. "editor.tabSize": 4

    Spaces or Tabs

    1. "editor.insertSpaces": true

    Render whitespace

    1. "editor.renderWhitespace": "all"

    Ignore files / folders

    Removes these files / folders from your editor window.

    1. "files.exclude": {
    2. "somefolder/": true,
    3. "somefile": true
    4. }

    Remove these files / folders from search results.

    1. "search.exclude": {
    2. "someFolder/": true,
    3. "somefile": true
    4. }

    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.

    1. "[languageid]": {
    2. }

    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

    1. "json.schemas": [
    2. {
    3. "fileMatch": [
    4. "/bower.json"
    5. ],
    6. "url": "http://json.schemastore.org/bower"
    7. }
    8. ]

    or for a schema defined in your workspace

    1. "json.schemas": [
    2. {
    3. "fileMatch": [
    4. "/foo.json"
    5. ],
    6. "url": "./myschema.json"
    7. }
    8. ]

    or a custom schema

    1. "json.schemas": [
    2. {
    3. "fileMatch": [
    4. "/.myconfig"
    5. ],
    6. "schema": {
    7. "type": "object",
    8. "properties": {
    9. "name" : {
    10. "type": "string",
    11. "description": "The name of the entry"
    12. }
    13. }
    14. }
    15. },

    See more in the JSON documentation.

    Extensions

    Keyboard Shortcut: kb(workbench.view.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 (…) 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: kb(workbench.action.terminal.toggleTerminal)

    Integrated terminal

    Further reading:

    • Integrated Terminal documentation
    • Mastering VS Code’s Terminal article

    Auto Save

    Open User Settings settings.json with kb(workbench.action.openGlobalSettings)

    1. "files.autoSave": "afterDelay"

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

    Toggle Sidebar

    Keyboard Shortcut: kb(workbench.action.toggleSidebarVisibility)

    toggle side bar

    Zen Mode

    Keyboard Shortcut: kb(workbench.action.toggleZenMode)

    zen mode

    Enter distraction free Zen mode.

    Side by side editing

    Keyboard Shortcut: kb(workbench.action.splitEditor)

    You can also use kbstyle(Ctrl) then click a file from the File Explorer (kbstyle(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: kb(workbench.action.focusFirstEditorGroup), kb(workbench.action.focusSecondEditorGroup), kb(workbench.action.focusThirdEditorGroup)

    navigate editors

    Move to Explorer window

    Keyboard Shortcut: kb(workbench.view.explorer)

    Create or open a file

    Keyboard Shortcut: kbstyle(Ctrl+click) (kbstyle(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 kbstyle(Ctrl+click).

    create and open file

    Close the currently opened folder

    Keyboard Shortcut: kb(workbench.action.closeActiveEditor)

    Navigation history

    Navigate entire history: kb(workbench.action.openNextRecentlyUsedEditorInGroup)

    Navigate back: kb(workbench.action.navigateBack)

    Navigate forward: kb(workbench.action.navigateForward)

    navigate history

    Navigate to a file

    Keyboard Shortcut: kb(workbench.action.quickOpen)

    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.

    1. "files.associations": {
    2. ".database": "json"
    3. }

    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 kb(workbench.extensions.action.showRecommendedKeymapExtensions) which filters the search to @recommended:keymaps.

    Multi cursor selection

    Keyboard Shortcut: kb(editor.action.insertCursorAbove) or kb(editor.action.insertCursorBelow)

    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 kbstyle(Ctrl/Cmd) for applying multiple cursors with the editor.multiCursorModifier setting . See Multi-cursor Modifier for details.

    Join line

    Keyboard Shortcut: kb(editor.action.joinLines)

    Windows / Linux: Not bound by default. Open Keyboard Shortcuts (kb(workbench.action.openGlobalKeybindings)) and bind editor.action.joinLines to a shortcut of your choice.

    Join lines

    Copy line up / down

    Keyboard Shortcut: kb(editor.action.copyLinesUpAction) or kb(editor.action.copyLinesDownAction)

    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: kb(editor.action.smartSelect.shrink) or kb(editor.action.smartSelect.grow)

    shrink expand selection

    You can learn more in the Basic Editing documentation.

    Go to Symbol in File

    Keyboard Shortcut: kb(workbench.action.gotoSymbol)

    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: kb(workbench.action.showAllSymbols)

    go to symbol in workspace

    Navigate to a specific line

    Keyboard Shortcut: kb(workbench.action.gotoLine)

    navigate to line

    Undo cursor position

    Keyboard Shortcut: kb(cursorUndo)

    undo cursor position

    Move line up and down

    Keyboard Shortcut: kb(editor.action.moveLinesUpAction) or kb(editor.action.moveLinesDownAction)

    move line up and down

    Trim trailing whitespace

    Keyboard Shortcut: kb(editor.action.trimTrailingWhitespace)

    trailing whitespace

    Code formatting

    Currently selected source code: kb(editor.action.formatSelection)

    Whole document format: kb(editor.action.formatDocument)

    code formatting

    Code folding

    Keyboard Shortcut: kb(editor.fold) and kb(editor.unfold)

    code folding

    Select current line

    Keyboard Shortcut: kb(expandLineSelection)

    select current line

    Navigate to beginning and end of file

    Keyboard Shortcut: kb(cursorTop) and kb(cursorBottom)

    navigate to beginning and end of file

    Open Markdown Preview

    In a Markdown file, use

    Keyboard Shortcut: kb(markdown.showPreview)

    toggle readme preview

    Side by Side Markdown Edit and Preview

    In a Markdown file, use

    Keyboard Shortcut: kb(markdown.showPreviewToSide)

    Special bonus: The preview will now sync.

    markdown sync

    IntelliSense

    kb(editor.action.triggerSuggest) to trigger the Suggestions widget.

    intellisense

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

    Peek

    Select a symbol then type kb(editor.action.peekImplementation). Alternatively, you can use the context menu.

    peek

    Go to Definition

    Select a symbol then type kb(editor.action.goToDeclaration). Alternatively, you can use the context menu or kbstyle(Ctrl+click) (kbstyle(Cmd+click) on macOS).

    go to definition

    You can go back to your previous location with the Go > Back command or kb(workbench.action.navigateBack).

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

    Find All References

    Select a symbol then type kb(editor.action.referenceSearch.trigger). Alternatively, you can use the context menu.

    find all references

    Rename Symbol

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

    1. {
    2. "env": {
    3. "browser": true,
    4. "commonjs": true,
    5. "es6": true,
    6. "node": true
    7. },
    8. "parserOptions": {
    9. "ecmaVersion": 6,
    10. "sourceType": "module",
    11. "ecmaFeatures": {
    12. "jsx": true,
    13. "classes": true,
    14. "defaultParams": true
    15. }
    16. },
    17. "rules": {
    18. "no-const-assign": 1,
    19. "no-extra-semi": 0,
    20. "semi": 0,
    21. "no-fallthrough": 0,
    22. "no-empty": 0,
    23. "no-mixed-spaces-and-tabs": 0,
    24. "no-redeclare": 0,
    25. "no-this-before-super": 1,
    26. "no-undef": 1,
    27. "no-unreachable": 1,
    28. "no-use-before-define": 0,
    29. "constructor-super": 1,
    30. "curly": 0,
    31. "eqeqeq": 0,
    32. "func-names": 0,
    33. "valid-typeof": 1
    34. }
    35. }

    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.

    1. "create component": {
    2. "prefix": "component",
    3. "body": [
    4. "class $1 extends React.Component {",
    5. "",
    6. "\trender() {",
    7. "\t\treturn ($2);",
    8. "\t}",
    9. "",
    10. "}"
    11. ]
    12. },

    See more details in Creating your own Snippets.

    Git integration

    Keyboard Shortcut: kb(workbench.view.scm)

    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 kb(editor.action.diffReview.next) and kb(editor.action.diffReview.prev). This will present them in a unified patch format.
    Lines can be navigated with arrow keys and pressing kbstyle(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 (kb(workbench.action.output.toggleOutput)) 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 (kb(workbench.view.scm)) and make changes in the diff view.

    Setup VS Code as default merge tool

    1. git config --global merge.tool code

    Debugging

    Configure debugger

    From the Command Palette (kb(workbench.action.showCommands)) 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.

    1. {
    2. // See https://go.microsoft.com/fwlink/?LinkId=733558
    3. // for the documentation about the tasks.json format
    4. "version": "2.0.0",
    5. "tasks": [
    6. {
    7. "type": "npm",
    8. "script": "install",
    9. "group": {
    10. "kind": "build",
    11. "isDefault": true
    12. }
    13. }
    14. ]
    15. }

    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.