VS Code Tips and Tricks
- Basics
- Customization
- Extensions
- File and folder management
- Editing hacks
- Intellisense
- Snippets
- Git integration
- Debugging
- Task runner
- Other Resources
The key bindings below may or may not be accurate with the latest build. See here for the latest keyboard shortcut reference.
The VS 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.
Open the welcome page to get started with the basics of VS Code. Help -> Welcome.
Includes the interactive playground.
Access all available commands based on your current context.
Mac: cmd+shift+p or f1
Windows / Linux: ctrl+shift+p or f1
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.
Quickly open files.
Mac: cmd+p
Windows / Linux: ctrl+p
Tip: Type "?" to view help suggestions.
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".
# 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 .
Workspace specific files are in .vscode
. For example, tasks.json
for the Task Runner and launch.json
for the debugger.
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
Change language mode
Mac: cmd+k m
Windows / Linux: ctrl+k m
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.
Open the command palatte and type "themes". You can install more themes from the extension Marketplace.
Additionally, you can install and change your file icon themes.
Download the keyboard shortcut reference sheet for your platform (macOS, Windows, Linux).
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:
Open the command palatte and type "Keyboard Shortcuts." You can now add your own keybindings in the file on the right.
See more in the Official Documentation.
Open settings.json
Mac: cmd+,
Windows / Linux: File -> Preferences -> User 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.
Auto Save
"files.autoSave": true
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": 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.
For those settings you only want for specific languages.
"[languageid]": {
}
Tip: You can find the language ID by typing in the command palatte "Configure language specific settings"
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.
- In the VS Code marketplace.
- Search inside VS Code
- View extension recommendations
- Community curated extension lists, such as awesome-vscode.
Click the extension activity bar button. You can search via the search bar or click the more button to filter and sort by install count.
Click the extension activity bar button. Then click "Show Recommended Extensions" in the more button menu.
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
Windows / Linux / Mac: ctrl+`
Further reading:
Open settings.json
with cmd+,
"files.autoSave": "afterDelay"
Mac: cmd+b
Windows / Linux: ctrl+b
Mac: cmd+k z
Windows / Linux: ctrl+k z
Enter distraction free mode.
Mac: cmd+\ or cmd then click a file from the file browser.
Windows / Linux: ctrl+\
Linux: ctrl+2
Mac: cmd+1, cmd+2, cmd+3
Windows / Linux: ctrl+1, ctrl+2, ctrl+3
Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e
Mac: cmd+click
Windows / Linux: ctrl+click
Mac: cmd+w
Linux: ctrl+k f
Navigate entire history with ctrl+tab
Navigate back.
Mac: ctrl+-
Windows / Linux: alt+left
Navigate Forward.
Mac: ctrl+shift+-
Windows / Linux: alt+right
Mac: cmd+e or cmd+p
Windows / Linux: ctrl+e or ctrl+p
Setup language associations for files that aren't detected accurately (i.e. many config files).
"file.associations": {
".database": "json"
}
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.
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.
Mac: ctrl+j
Windows / Linux: Not bound by default. Open Keyboard shortcuts and bind
editor.action.joinLines
to a shortcut of your choice.
Mac: opt+shift+up or opt+shift+down
Windows / Linux(Issue #5363): shift+alt+down or shift+alt+up
More in documentation
Mac: ctrl+shift+cmd+left or ctrl+shift+cmd+right
Windows / Linux: shift+alt+left or shift+alt+right
Mac: cmd+shift+o
Windows / Linux: ctrl+shift+o
Mac: ctrl+g or cmd+p, :
Windows / Linux: ctrl+g
Mac: cmd+u
Windows / Linux: ctrl+u
Mac: opt+up or opt+down
Windows / Linux: alt+up or alt+down
Mac: cmd+shift+x
Windows / Linux: ctrl+k ctrl+x
Mac: cmd+k, cmd+f
Windows / Linux: ctrl+k, ctrl+f
Windows / Linux: shift+alt+f
Mac: shift+cmd+[ and shift+cmd+]
Windows / Linux: ctrl+shift+[ and ctrl+shift+]
Mac: cmd+i
Windows / Linux: ctrl+i
Mac: cmd+up and cmd+down
Windows: ctrl+up and ctrl+down
Linux: ctrl+home and ctrl+end
In a markdown file use
Mac: shift+cmd+v
Windows / Linux: ctrl+shift+v
In a markdown file use
Linux: ctrl+k v
Special bonus: The preview will now sync.
Anytime, try ctrl+space to trigger the suggest widget.
You can view available methods, parameter hints, short documentation, etc.
Select a symbol then type alt+f12. Alternatively, you can use the context menu.
Select a symbol then type f12. Alternatively, you can use the context menu.
Select a symbol then type shift+f12. Alternatively, you can use the context menu.
Select a symbol then type f2. Alternatively, you can use the context menu.
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
}
}
See intellisense for your package.json file.
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.
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.
Easily switch between branches via the status bar.
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 choosing "Stage Selected Ranges" from the command palette.
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.
View diff decorations in editor. See documentation for more details.
During a merge click the git icon and make changes in the diff view.
git config --global merge.tool code
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.
Place breakpoints next to the line number. Navigate forward with the debug widget.
Inspect variables in the debug panels and in the console.
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.
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"