hansschenker/vscode-tips-and-tricks

Collection of helpful tips and tricks for VS Code.

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. Check on the Default Keyboard shortcuts file.

Basics

Open command palette

Easy access to all commands available in VS Code.

Mac: cmd+shift+p or f1

Windows / Linux: ctrl+shift+p or f1

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.

Quick open

Quickly open files and run commands (see below).

Mac: cmd+p

Windows / Linux: ctrl+p

Type "?" to view help suggestions.

Copy and paste commands into quick open

cmd+p then paste the command you want to run. This is especially useful with the extension marketplace.

Command line arguments

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

# create a new window
code -n

# change the language
code --locale=es

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

# see help options
code --help

.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

Update extensions

Badges will appear in the bottom left of the status bar.

Change language mode

Mac: cmd+k m

Windows / Linux: ctrl+k m

Customization

Lots of things you can do here. Check out the full documentation.

Customize editor

Open settings.json

Mac: cmd+,

Windows / Linux: File -> Preferences -> User Settings

Change the font size

"editor.fontSize": 18

Change the size of tab characters

"editor.tabSize": 4

Spaces or tabs

"editor.insertSpaces": true

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.

Preview themes

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

Contribution points

Documentation on contribution points.

• configuration
• commands
• keybindings
• languages
• debuggers
• grammars
• themes
• snippets
• jsonValidation

Find extensions

1. The official VS Code marketplace.
2. Search in product (see below)
3. View extension recommendations (see below)
4. Community curated extensions like awesome-vscode.

Install extensions

Mac: cmd+shift+p

Windows / Linux: ctrl+shift+p

then type "ext install". Select the extension you want and hit enter

Extension recommendations

Mac: cmd+shift+p

Windows / Linux: ctrl+shift+p

then type "ext", then select "Show Extension Recommendations"

Uninstall an extension

Mac: cmd+shift+p

Windows / Linux: ctrl+shift+p

then type "ext", then select "Show Installed Extensions". Click the "x" on the bottom right of the extension card.

File and folder management

OS X layout

Using mission control, put a terminal window on the same screen as VS Code. Wala! You now have an integrated terminal.

Autosave

Open settings.json with cmd+,

"files.autoSave": "afterDelay"

Toggle sidebar

Mac: cmd+b

Windows / Linux: ctrl+b

Side by side editing

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

Windows / Linux: ctrl+\

Linux: ctrl+2

Switch between editors

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

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

Move to Explorer window

Mac: cmd+shift+e

Windows / Linux: ctrl+shift+e

Close the currently opened folder

Linux: ctrl+k f

History

Navigate entire history with ctrl+tab

Navigate back.

Mac: ctrl+-

Windows / Linux: alt+left

Navigate Forward.

Mac: ctrl+shift+up

Windows / Linux: alt+right

Navigate to a file

Mac: cmd+e or cmd+p

Windows / Linux: ctrl+e or ctrl+p

File associations

Setup language associations for files that aren't detected accurately (i.e. many config files).

"file.associations": {
    ".eslintrc": "json"
}

Editing hacks

Bracket matching

More in documentation.

Mac: cmd+shift+\

Windows / Linux: ctrl+shift+\

Multi cursor selection

More in documentation.

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

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

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

Add more cursors to current selection.

Copy line

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

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

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

Find by symbol

Mac: cmd+shift+o

Windows / Linux: ctrl+shift+o

Navigate to a specific line

Mac: ctrl+g or cmd+p, :

Windows / Linux: ctrl+g

Undo cursor position

Mac: cmd+u

Windows / Linux: ctrl+u

Move line up and down

Mac: opt+up or opt+down

Windows / Linux: alt+up or alt+down

Trim trailing whitespace

Mac: cmd+shift+x

Windows / Linux: ctrl+shift+x

Code formatting

Mac: opt+shift+f

Windows / Linux: shift+alt+f

Code folding

Mac: shift+cmd+[ and shift+cmd+]

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

Select current line

Mac: cmd+i

Windows / Linux: ctrl+i

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

Toggle README preview

In a markdown file use

Mac: shift+cmd+v

Windows / Linux: ctrl+shift+v

Intellisense

Anytime, try ctrl+space to trigger the suggest widget. This might be the most important tip of them all.

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.

Go to definition

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

Find all references

Select a symbol then type shift+f12. Alternatively, you can use the context menu.

Rename symbol

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

jsconfig.json

Use ES6 by configuring jsconfig.json in the root of your javascript source files.

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }, "exclude": [
        "npm_modules"
    ]
}

.eslintrc.json

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

Install typings

Install typings to bring in the .d.ts files which power javascript intellisense.

npm install typings --global

# Search for definitions.
typings search tape

# Find an available definition (by name).
typings search --name react

# Install typings (DT is "ambient", make sure to enable the flag and persist the selection in `typings.json`).
typings install react --ambient --save

install will create a typings folder. VS Code will reference the .d.ts files for intellisense.

Emmet syntax

Support for 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 documentation.

Git Integration

Excellent integration for entire Git workflow.

Diffs

Click Git icon then select the file to diff.

Side by side

Default is side by side diff.

Inline view

Toggle inline view by clicking more button in the top right.

Branches

Easily switch between branches via the status bar.

Staging

Stage all

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

Stage selected

Stage a portion of a file by selecting that file (using the arrows) and then staging "selected lines" via the more button.

Undo last commit

See Git output

Sometimes I want to see what my tool is doing. Visual Studio Code makes it easy to see what git commands are 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 dropdown.

Gutter indicators

View diff decorations in editor. See documentation for more details.

Resolve merge conflicts

During a merge click the git icon and make changes in the diff view.

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 and other environments. May need some additional configuration for other languages. See 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 debug panels and in the console.

Task Runner

Auto detect tasks

f1, type "Configure Task", then select "Configure Task Runner". This will generate a task.json file with content like the following. See 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 command palette

f1, run the command "Run Task", and select the task you want to run. Terminate the running task by running the command "Terminate Running Task"

Other Resources

• vscode official docs
• react sample app
• vscode-tips