Unleash the full power of VS Code with these top tips, tricks, and extensions. Learn how to boost your productivity, streamline your workflow, and write better code.
In this session Sonny Sangha aka PAPAREACT, runs through his top Extensions, shortcuts and pro tips in VS Code that every developer should know in order to supercharge their developer workflow!
"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.
The best way of exploring VS Code hands-on is to open the Get Started page. You will get an overview of VS Code's customizations and features. Help > Get Started.
Pick a Walkthrough for a self-guided tour through the setup steps, features, and deeper customizations that VS Code offers. As you discover and learn, the walkthroughs track your progress.
If you are looking to improve your code editing skills open the Interactive Editor Playground. Try out VS Code's code editing features, like multi-cursor editing, IntelliSense, Snippets, Emmet, and many more. Help > Editor Playground.
Access all available commands based on your current context.
Keyboard Shortcut: Ctrl+Shift+P
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.
Download the keyboard shortcut reference sheet for your platform (macOS, Windows, Linux).
Quickly open files.
Keyboard Shortcut: Ctrl+P
Tip: Type ? to view commands suggestions.
Typing commands such as edt
and term
followed by a space will bring up dropdown lists.
Repeat the Quick Open keyboard shortcut to cycle quickly between recently opened files.
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.
Open Recent
Keyboard Shortcut: Ctrl+R
Displays a Quick Pick dropdown with the list from File > Open Recent with recently opened folders and workspaces followed by files.
VS Code has a powerful command line interface (CLI) which allows you to customize how the editor is launched to support various 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
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.
Keyboard Shortcut: Ctrl+Shift+M
Quickly jump to errors and warnings in the project.
Cycle through errors with F8 or Shift+F8
You can filter problems either by type ('errors', 'warnings') or text matching.
Keyboard Shortcut: Ctrl+K M
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.
There are many things you can do to customize VS Code.
Keyboard Shortcut: Ctrl+K Ctrl+T
You can install more themes from the VS Code extension Marketplace.
Additionally, you can install and change your File Icon themes.
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 > Migrate Keyboard Shortcuts from... to see the current list on the Marketplace. Some of the more popular ones:
Keyboard Shortcut: Ctrl+K Ctrl+S
You can search for shortcuts and add your own keybindings to the keybindings.json
file.
See more in Key Bindings for Visual Studio Code.
By default VS Code shows the Settings editor, you can find settings listed below in a search bar, but you can still edit the underlying settings.json
file by using the Open User Settings (JSON) command or by changing your default settings editor with the workbench.settings.editor
setting.
Open User Settings settings.json
Keyboard Shortcut: Ctrl+,
Change the font size of various UI elements
// Main editor
"editor.fontSize": 18,
// Terminal panel
"terminal.integrated.fontSize": 14,
// Output panel
"[Log]": {
"editor.fontSize": 15
}
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": "afterDelay"
You can also toggle Auto Save from the top-level menu with the File > Auto Save.
Format on save
"editor.formatOnSave": true
Format on paste
"editor.formatOnPaste": true
Change the size of Tab characters
"editor.tabSize": 4
Spaces or Tabs
"editor.insertSpaces": true
Render whitespace
"editor.renderWhitespace": "all"
Whitespace characters are rendered by default in text selection.
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.
You can scope the settings that you only want for specific languages 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.
Enabled by default for many file types. Create your own schema and validation in settings.json
"json.schemas": [
{
"fileMatch": [
"/bower.json"
],
"url": "https://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.
Keyboard Shortcut: Ctrl+Shift+X
In the Extensions view, you can search via the search bar or click the More Actions (...) button to filter and sort by install count.
In the Extensions view, click Show Recommended Extensions in the More Actions (...) button menu.
Are you interested in creating your own extension? You can learn how to do this in the Extension API documentation, specifically check out the documentation on contribution points.
Keyboard Shortcut: Ctrl+`
Further reading:
Keyboard Shortcut: Ctrl+B
Keyboard Shortcut: Ctrl+J
Keyboard Shortcut: Ctrl+K Z
Enter distraction free Zen mode.
Press Esc twice to exit Zen Mode.
Keyboard Shortcut: Ctrl+\
You can also drag and drop editors to create new editor groups and move editors between groups.
Keyboard Shortcut: Ctrl+1, Ctrl+2, Ctrl+3
Keyboard Shortcut: Ctrl+Shift+E
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.
Keyboard Shortcut: Ctrl+K F
Navigate entire history: Ctrl+Tab
Navigate back: Alt+Left
Navigate forward: Alt+Right
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"
}
VS Code will show you an error message when you try to save a file that cannot be saved because it has changed on disk. VS Code blocks saving the file to prevent overwriting changes that have been made outside of the editor.
In order to resolve the save conflict, click the Compare action in the error message to open a diff editor that will show you the contents of the file on disk (to the left) compared to the contents in VS Code (on the right):
Use the actions in the editor toolbar to resolve the save conflict. You can either Accept your changes and thereby overwriting any changes on disk, or Revert to the version on disk. Reverting means that your changes will be lost.
Note: The file will remain dirty and cannot be saved until you pick one of the two actions to resolve the conflict.
Here is 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 by filtering the search to @recommended:keymaps
.
To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click (Option+Click on macOS).
To set cursors above or below the current position use:
Keyboard Shortcut: Ctrl+Alt+Up or Ctrl+Alt+Down
You can add additional cursors to all occurrences of the current selection with Ctrl+Shift+L.
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.
If you do not want to add all occurrences of the current selection, you can use Ctrl+D instead. This only selects the next occurrence after the one you selected so you can add selections one by one.
You can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line.
You can also use keyboard shortcuts to trigger column selection.
You can add vertical column rulers to the editor with the editor.rulers
setting, which takes an array of column character positions where you'd like vertical rulers.
{
"editor.rulers": [20, 40, 60]
}
Pressing the Alt key enables fast scrolling in the editor and Explorers. By default, fast scrolling uses a 5X speed multiplier but you can control the multiplier with the Editor: Fast Scroll Sensitivity (editor.fastScrollSensitivity
) setting.
Keyboard Shortcut: Shift+Alt+Up or 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
andeditor.action.copyLinesDownAction
to your own preferred keyboard shortcuts.
Keyboard Shortcut: Alt+Up or Alt+Down
Keyboard Shortcut: Shift+Alt+Left or Shift+Alt+Right
You can learn more in the Basic Editing documentation.
Keyboard Shortcut: Ctrl+Shift+O
You can group the symbols by kind by adding a colon, @:
.
Keyboard Shortcut: Ctrl+T
The Outline view in the File Explorer (default collapsed at the bottom) shows you the symbols of the currently open file.
You can sort by symbol name, category, and position in the file and allows quick navigation to symbol locations.
Keyboard Shortcut: Ctrl+G
Keyboard Shortcut: Ctrl+U
Keyboard Shortcut: Ctrl+K Ctrl+X
You can change selected text to uppercase, lowercase, and title case with the Transform commands from the Command Palette.
Currently selected source code: Ctrl+K Ctrl+F
Whole document format: Shift+Alt+F
Keyboard Shortcut: Ctrl+Shift+[ and Ctrl+Shift+]
You can also fold/unfold all regions in the editor with Fold All (Ctrl+K Ctrl+0) and Unfold All (Ctrl+K Ctrl+J).
You can fold all block comments with Fold All Block Comments (Ctrl+K Ctrl+/).
Keyboard Shortcut: Ctrl+L
Keyboard Shortcut: Ctrl+Home and Ctrl+End
In a Markdown file, use
Keyboard Shortcut: Ctrl+Shift+V
In a Markdown file, use
Keyboard Shortcut: Ctrl+K V
The preview and editor will synchronize with your scrolling in either view.
Ctrl+Space to trigger the Suggestions 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 or Ctrl+click (Cmd+click on macOS).
You can go back to your previous location with the Go > Back command or Alt+Left.
You can also see the type definition if you press Ctrl (Cmd on macOS) when you are hovering over the type.
Select a symbol then type Shift+F12. Alternatively, you can use the context menu.
Select a symbol then type Shift+Alt+F12 to open the References view showing all your file's symbols in a dedicated view.
Select a symbol then type F2. Alternatively, you can use the context menu.
Besides searching and replacing expressions, you can also search and reuse parts of what was matched, using regular expressions with capturing groups. Enable regular expressions in the search box by clicking the Use Regular Expression .*
button (Alt+R) and then write a regular expression and use parenthesis to define groups. You can then reuse the content matched in each group by using $1
, $2
, etc. in the Replace field.
Install the ESLint extension. Configure your linter however you'd like. Consult the ESLint specification for details on its 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
}
}
See IntelliSense for your package.json
file.
Support for Emmet syntax.
File > Preferences > Configure 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.
Keyboard Shortcut: Ctrl+Shift+G
Git integration comes with VS Code "out-of-the-box". You can install other SCM providers from the Extension Marketplace. This section describes the Git integration but much of the UI and gestures are shared by other SCM providers.
From the Source Control view, select a file to open the diff.
Alternatively, click the Open Changes button in the top right corner to diff the current open file.
Views
The default view for diffs is the side by side view.
Toggle inline view by clicking the More Actions (...) button in the top right and selecting Toggle Inline View.
If you prefer the inline view, you can set "diffEditor.renderSideBySide": false
.
Accessible Diff Viewer
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.
Edit pending changes
You can make edits directly in the pending changes of the diff view.
Easily switch between Git branches via the Status Bar.
Stage file changes
Hover over the number of files and click the plus button.
Click the minus button to unstage changes.
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.
Click the (...) button and then select Undo Last Commit to undo the previous commit. The changes are added to the Staged Changes section.
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 (Ctrl+Shift+U) and select Git in the dropdown.
View diff decorations in editor. See documentation for more details.
During a merge, go to the Source Control view (Ctrl+Shift+G) and make changes in the diff view.
You can resolve merge conflicts with the inline CodeLens which lets you Accept Current Change, Accept Incoming Change, Accept Both Changes, and Compare Changes.
git config --global merge.tool vscode
git config --global mergetool.vscode.cmd 'code --wait $MERGED'
git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'
From the Run and Debug view (Ctrl+Shift+D), select create a launch.json file, which will prompt you to select the environment that matches your project (Node.js, Python, C++, etc). This will generate a launch.json
file. Node.js support is built-in and other environments require installing the appropriate language extensions. See the debugging documentation for more details.
Place breakpoints next to the line number. Navigate forward with the Debug widget.
Inspect variables in the Run panels and in the console.
Logpoints act much like breakpoints but instead of halting the debugger when they are hit, they log a message to the console. Logpoints are especially useful for injecting logging while debugging production servers that cannot be modified or paused.
Add a logpoint with the Add Logpoint command in the left editor gutter and it will be displayed as a "diamond" shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces ('{}').
Select Terminal 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 tasks.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.
Select Terminal 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
You can define a keyboard shortcut for any task. From the Command Palette (Ctrl+Shift+P), select Preferences: Open Keyboard Shortcuts File, bind the desired shortcut to the workbench.action.tasks.runTask
command, and define the Task as args
.
For example, to bind Ctrl+H to the Run tests
task, add the following:
{
"key": "ctrl+h",
"command": "workbench.action.tasks.runTask",
"args": "Run tests"
}
From the explorer you can open a script in the editor, run it as a task, and launch it with the node debugger (when the script defines a debug option like --inspect-brk
). The default action on click is to open the script. To run a script on a single click, set npm.scriptExplorerAction
to "run". Use the setting npm.exclude
to exclude scripts in package.json
files contained in particular folders.
With the setting npm.enableRunFromFolder
, you can enable to run npm scripts from the File Explorer's context menu for a folder. The setting enables the command Run NPM Script in Folder... when a folder is selected. The command shows a Quick Pick list of the npm scripts contained in this folder and you can select the script to be executed as a task.
VS Code has a Portable mode which lets you keep settings and data in the same location as your installation, for example, on a USB drive.
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 it here.
Extensions to your IDE are invaluable to speed up your work without reducing the quality of your output. Considering Visual Studio Code is the most popular IDE, here are 20 VSCode extensions that will make you a more productive developer. These extensions mostly apply to web developers, but there are some general-purpose extensions that will benefit everyone else too.
Here are the VSCode extensions we'll cover:
Settings Sync saves you a lot of time installing extensions across devices
Before you start installing extensions left and right, it's good to know of the existence of Settings Sync. It allows you to sync to GitHub almost everything you customize on VSCode, from settings to keyboard shortcuts to other VSCode extensions.
This way, you'll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again.
Immediately see code changes reflected in the browser
This is the favorite VSCode extension of many software developers. Live Server launches a local development server with a live reload feature both for static and dynamic pages.
Every time you save your code, you'll instantly see the changes reflected in the browser. You'll be much faster at spotting errors and it's much easier to do some quick experiments with your code.
Use any remote machine with an SSH server
The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment. This makes it much easier to develop and/or troubleshoot in a wide variety of scenarios.
You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine.
Spend less time formatting your code
Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style.
You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.
AI is here to do the work for you
Some would call GitHub Copilot a revolution in computer programming, others would call it a useful tool. Whatever you think of it, the autocomplete AI is worth integrating into your workflow.
Trained on GPT-3, GitHub Copilot gives code suggestions, auto-completes code, and can even help write code when you provide a natural language comment.
Rename tags automatically
While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change.
The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.
Edit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care.
Supercharge your Git capabilities
GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).
GitLens is a highly customizable extension. If you don’t like a particular setting, you can easily turn it off in settings.
Get a nice visual of the git log
Similar to GitLens, Git History is a VSCode extension that gives a visual of the git log. No longer should you look through git log in the terminal.
The extension is quite comprehensive. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.
Extend your HTML file to see your CSS code
This extension is invaluable for front-end developers. Inspired by a similar feature in the IDE Brackets, CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code.
It also allows you to quickly jump to the right CSS code if you know the class or ID name.
More JS functionality
While VSCode includes built-in JS IntelliSense, JS Code Snippets enhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.
The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available.
Change the color of your VSCode instance
Here’s a cute one. Peacock allows you to change the color of your Visual Studio Code environment, so you can quickly identify which instance you’ve just switched to.
See which colors you're using in your style guides
Sticking with colors, Colorize instantly visualizes CSS colors in your CSS/SASS/Less/... files. This makes it very easy to see at a glance which colors you’re using where.
More colors! indent-rainbow colorizes the indentation of your code, alternating colors at every step t make for a really nice rainbow. Especially helpful when writing code in Python, Nim, Yaml, and perhaps even filetypes that aren't very indentation-dependent.
No more spelling mistakes
Although it isn't life-threateningly important, I prefer my code to have no spelling errors. Code Spell Checker underlines words that it doesn't recognize in its dictionary files.
The extension is available in many different languages and supports jargon such as medical terms.
Use icons!
Icon Fonts offers snippets for a variety of icon fonts, including the popular Font Awesome v5 icon pack.
For those of you not using VSCode, this package is also available for Atom and Sublime Text.
Automatically create a meaningful log message
The Turbo Console Log extension automates the process of creating a meaningful log message. It makes debugging much easier, because you’ll have some useful console output to figure out what went wrong.
Immediately spot the TODOs in your code
I confess. I've been guilty of writing TODOs in my comments to then totally forget about them. TODO Highlight makes them stand out much more.
You can toggle the highlights and can also list all the highlighted annotations and reveal them from the corresponding file.
Wait, doesn't everyone love icons?
You wouldn't think icons make a big difference, but they really do (for me, at least). VSCode-icons adds a splash of color and cute little icons to your IDE that I've come to love.
Create previews of your regular expressions
Regular expressions can be quite the puzzle to get right. Regex Previewer gives you a side document that matches your regex.
The extension gives multiple examples to match, so it becomes much easier to quickly and accurately write a regex for a variety of use cases.
Add bookmarks to your code
Although VSCode has line numbers, Bookmarks allows you to add bookmarks to your code, helping you quickly navigate and easily jump back and forth.
Additionally, it allows you to select regions of code between bookmarked code, which is quite useful for something like log file analysis.
#vscode #visualstudiocode