Skip to content

flavioafa/vscode-tips-and-tricks

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 

Repository files navigation

VS Code Tips and Tricks

Table of Contents

  1. Basics
  2. Customization
  3. Extensions
  4. File and folder management
  5. Editing hacks
  6. IntelliSense
  7. Snippets
  8. Git integration
  9. Debugging
  10. Task runner
  11. Other Resources

The key bindings below may or may not be accurate with the latest build. See here for the latest keyboard shortcut reference.

Basics

Insider Version of VS Code

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

  • For Early Adopters - Insiders has the most recent code changes and may lead to the occasional broken build.
  • 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.

side by side install

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.

Mac: cmd+shift+p or f1

Windows / Linux: ctrl+shift+p or f1

command palette

Reference keybindings

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

keyboard references

Quick open

Quickly open files.

Mac: cmd+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.

CLI tool

Linux: Follow instructions here.

Windows: Follow instructions here.

Mac: see below.

Open the Command Palette (F1) and type "shell command". Hit enter to execute Shell Command: Install 'code' command in PATH.

shell command

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

# see help options
code --help

# disable all extensions
code --disable-extensions .

all cli commands

.vscode folder

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

Status Bar decorations

Errors and Warnings

Mac: shift+cmd+m

Windows / Linux: ctrl+shift+m

Quickly jump to errors and warnings in the project.

Cycle through errors with f8 or shift+f8

errors and warnings

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

Change language mode

Mac: cmd+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 documentation.

Change your theme

Open the Command Palette and type "themes". You can install more themes from the extension Marketplace.

Preview themes

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

File icon themes

Change your keyboard shortcuts

Keyboard Reference Sheets

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

Keyboard Reference Sheet

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

Open the Command Palette and type "keyboard shortcuts." You can now add your own keybindings in the file on the right.

customize keyboard shortcuts

See more in Key Bindings for Visual Studio Code.

Tune your settings

Open settings.json

Mac: cmd+,

Windows / Linux: File > Preferences > Settings

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

Language specific settings

For those settings you only want for specific languages.

"[languageid]": {

}

Tip: You can find the language ID by typing in the Command Palette "Configure language specific settings"

language based settings

Add JSON Validation

Enabled by default for many files. 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 documentation.

Extensions

Find extensions

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

Install extensions

Click the Extensions Activity Bar button. You can search via the search bar or click the More (...) button to filter and sort by install count.

install extensions

Extension recommendations

Click the Extensions Activity Bar button. Then 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

File and folder management

Integrated terminal

Windows / Linux / Mac: ctrl+`

Integrated terminal

Further reading:

Auto Save

Open settings.json with cmd+,

"files.autoSave": "afterDelay"

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

Toggle Sidebar

Mac: cmd+b

Windows / Linux: ctrl+b

toggle side bar

Zen Mode

Mac: cmd+k z

Windows / Linux: ctrl+k z

zen mode

Enter distraction free Zen mode.

Side by side editing

Mac: cmd+\ or cmd then click a file from the File Explorer.

Windows / Linux: ctrl+\

Linux: ctrl+2

split editors

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

Switch between editors

Mac: cmd+1, cmd+2, cmd+3

Windows / Linux: ctrl+1, ctrl+2, ctrl+3

navigate editors

Move to Explorer window

Mac: cmd+shift+e

Windows / Linux: ctrl+shift+e

Create and open a file

Mac: cmd+click

Windows / Linux: ctrl+click

create and open file

Close the currently opened folder

Mac: cmd+w

Windows / Linux: ctrl+k f

History

Navigate entire history with ctrl+tab

Navigate back.

Mac: ctrl+-

Windows / Linux: alt+left

Navigate Forward.

Mac: ctrl+shift+-

Windows / Linux: alt+right

navigate history

Navigate to a file

Mac: cmd+e or cmd+p

Windows / Linux: ctrl+e or ctrl+p

navigate to file

File associations

Create language associations for files that aren't detected accurately (for example, many config files are JSON).

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

Multi cursor selection

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

multi cursor

multi cursor second example

Add more cursors to current selection.

add cursor to all occurrences of current selection

Join line

Mac: ctrl+j

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

Join lines

Copy line up / down

Mac: opt+shift+up or opt+shift+down

Windows / Linux(Issue #5363): shift+alt+down or shift+alt+up

copy line down

Shrink / expand selection

More in documentation

Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right

Windows / Linux: shift+alt+left or shift+alt+right

shrink expand selection

Go to Symbol in File

Mac: cmd+shift+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

Mac: cmd+t

Windows / Linux: ctrl+t

go to symbol in workspace

Navigate to a specific line

Mac: ctrl+g or cmd+p, :

Windows / Linux: ctrl+g

navigate to line

Undo cursor position

Mac: cmd+u

Windows / Linux: ctrl+u

undo cursor position

Move line up and down

Mac: opt+up or opt+down

Windows / Linux: alt+up or alt+down

move line up and down

Trim trailing whitespace

Mac: cmd+k cmd+x

Windows / Linux: ctrl+k ctrl+x

trailing whitespace

Code formatting

Currently selected source code

Mac: cmd+k, cmd+f

Windows / Linux: ctrl+k, ctrl+f

Whole document format

Windows / Linux: shift+alt+f

code formatting

Code folding

Mac: alt+cmd+[ and alt+cmd+]

Windows / Linux: ctrl+shift+[ and ctrl+shift+]

code folding

Select current line

Mac: cmd+i

Windows / Linux: ctrl+i

select current line

Navigate to beginning and end of file

Mac: cmd+up and cmd+down

Windows: ctrl+up and ctrl+down

Linux: ctrl+home and ctrl+end

navigate to beginning and end of file

Open Markdown Preview

In a Markdown file, use

Mac: shift+cmd+v

Windows / Linux: ctrl+shift+v

toggle readme preview

Side by Side Markdown Edit and Preview

In a Markdown file, use

Mac: cmd+k v

Windows / Linux: ctrl+k v

Special bonus: The preview will now sync.

markdown sync

IntelliSense

Anytime, try ctrl+space to trigger the Suggestions widget.

intellisense

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

Peek

Select a symbol then type alt+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 alt+left (ctrl+- on macOS).

Find All References

Select a symbol then type 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. Specification is here.

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 {",
        "",
        "	render() {",
        "		return ($2);",
        " 	}",
        "",
        "}"
    ]
},

See more details in Creating your own Snippets.

Git Integration

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

Click the Source Control button in the Activity Bar then 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.

more git button

git inline

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

Review Pane

Navigate through diffs with F7 and 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.

git stage selected

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.

Mac: shift+cmd+u

Windows / Linux: ctrl+shift+u

to run toggleOutput. 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, click the Source Control button in the Activity Bar and make changes in the diff view. Select and accept current, incoming or both changes in just one click.

git icon resolve merge conflicts

Setup VS Code as default merge tool

git config --global merge.tool code

Debugging

Configure debugger

f1 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 http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "install",
            "args": ["install"]
        },
        {
            "taskName": "build",
            "args": ["run", "build"]
        }
    ]
}

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

Other Resources

About

Collection of helpful tips and tricks for VS Code.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published