Best VS Code extensions to use, settings to customize, shortcuts you should know, & more
Visual Studio Code is one of the most popular code editors in the development world. Developed at Microsoft as an open source alternative to Atom and Sublime, Visual Studio Code quickly became a powerful and feature-rich tool.
According to the 2019 Stack Overflow Developer Survey, nearly 51% of the roughly 90k developers surveyed said that they use Visual Studio Code.
If you are just getting started with VS Code or are looking for a few tips to become a VS Code power user, we’ve created a guide to some of the most important things to know about VS Code.
In this guide, you will find:
Let’s get started.
Top 15 VS Code extensions
VS Code is a highly extensible editor with plenty of powerful extensions to add functionality to your code editor. The Visual Studio Code Marketplace offers more than 15k extensions.
To install an extension in VS Code, you can visit the online marketplace and click Install on the information page of any extension. To install an extension from your editor, simply click the Extensions shortcut in the Activity Bar or search for the command Extensions: Install Extensions.
You can browse through thousands of extensions and learn more about what features they add to VS Code.
To get you started, we’ve compiled a list of some of the most useful VS Code extensions that any developer can use.
1. GitLens (3.8M)
GitLens supercharges your Git integration, helping you to quickly visualize changes to your code and manage your team’s code repositories.
GitLens adds Git information right inside VS Code. A few noteworthy features of GitLens:
- Current line blame that lets you hover over a line of code to see who made recent edits and information about any relevant commits
- Authorship code lens that shows the most recent commit and author at the top of code blocks
- Powerful Side Bar views that let you navigate repositories, file history, line history, commits, and more
- Gutter blame annotations and gutter heatmaps to show how recently lines were changed
2. Prettier (4.4M)
Prettier is an opinionated code formatter. Prettier enforces a consistent style across your entire codebase by parsing your code and reprinting it according to its set of styling rules.
To format a document, you can right use the command: CMD/CTRL + Shift + P -> Format Document. You can also enable formatting on save by adding "editor.formatOnSave": true to your VS Code settings JSON.
If you use Prettier, you should also set it as your default code formatter by editing the VS Code settings JSON file:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Prettier recommends adding a Prettier configuration file to all of your projects. You can ensure that any developer that accesses your project—through GitHub or elsewhere—can use the same styling rules. Consistent styling creates a cleaner codebase that is easier for everyone to navigate and understand.
3. EditorConfig (1.6M)
EditorConfig is a must-have for developers who are working on a team or typically make use of a few different editors or IDEs in their daily workflow. EditorConfig helps maintain consistent coding styles across developer tools by defining properties such as indent style, indent size, tab width, end of line characters, and trimming whitespace.
Edit the .editorconfig file to your liking, store in a git repo, and make it accessible to your entire team.
4. Project Manager (780k)
Project Manager helps keep track of projects in VS Code so that you can quickly open, find, and organize your favorite projects. It’s tree view in the Side Bar compiles a list of your favorite projects—either set manually or autodetected—for easy access. With your most important projects right at your fingertips, you’ll spend less time fumbling through directories trying to find your work.
5. Todo Tree (316k)
Todo Tree will help you keep track of all your TODO and FIXME comments in your code.
Todo Tree compiles a navigable tree view containing your workspace’s TODO comments. If you click on an item in the tree view, Todo Tree automatically opens the file and put the cursor on the line containing the TODO. Todo Tree also highlights all of your TODO and FIXME comments in your code.
If you want a simpler extension that only highlights TODO, FIXME, and other annotations, try TODO Highlight (777k installs).
6. Bookmarks (630k)
Bookmarks helps you navigate complex code quickly by marking important locations that you can reference later. A panel in the Side Bar creates a list of all your bookmarks in a project. Click on the bookmark item will bring you to that part of your code.
7. Visual Studio IntelliCode (3.4M)
IntelliCode brings AI-assisted code suggestions to VS Code. If you are a Python, TypeScript/JavaScript or Java developer, IntelliCode promises to provide you with context-aware code recommendations that understand your code.
IntelliCode is trained on thousands of high quality, open-source projects on GitHub with high star ratings. With IntelliCode’s smart suggestions, you can write code faster and more efficiently.
8. Code Spell Checker (945k)
Code Spell Checker provides automatic corrections for common spelling errors. Lightweight and sleek, Code Spell Checker saves time by catching spelling errors in your code and documentation.
9. Live Share (1.5M)
Live Share is a powerful tool that enables teams to collaboratively edit and debug code in real time. Team members can view and edit your code, but still use the extensions, settings, and customizations of their own personal text editor. Live Share is incredibly useful for pair programming, debugging, training, and workshops, especially for remote teams.
If you want to add audio and chat to your Live Share sessions, you can download the Live Share Extension Pack, which includes Live Share Audio, Live Share Chat, and Peacock.
10. Settings Sync (1.2M)
Settings Sync lets you synchronize your VS Code settings to make sure you can access your VS Code setup from any machine. Settings Sync will store your settings, snippets, themes, file icons, launch settings, keybindings, workspaces, and extensions.
All your settings are stored using GitHub Gist, so you will be able to access them from any environment or VS Code instance that you can link to your GitHub account.
11. Markdown All in One (1M)
Markdown All in One makes it easier and faster to write documentation, blog posts, or README files by supercharging the Markdown experience inside VS Code. This extension includes helpful keyboard shortcuts, automatic previews, and the ability to autogenerate a table of contents. Markdown All in One also enables better autocomplete and list creation.
12. Pomodoro (2K)
Pomodoro is a lightweight extension that puts a small tomato in your Status Bar so that you can quickly start and manage Pomodoro sessions.
The Pomodoro technique is a popular method to enhance focus and boost productivity. It works by breaking down your working sessions into more manageable blocks of time followed by breaks. The default technique uses 25 minute working sessions separated by short breaks of 5 minutes. After four sets of working sessions and breaks, you take a longer breaks of 15 minutes. You can repeat the process as many times as you need during your working session.
13. Peacock (411k)
Peacock subtly changes the color of your VS Code workspaces. If you open a new window, Peacock will change the color of that workspace. Peacock is a great extension for developers that often need to navigate many different projects at once and want an easy way to identify them.
14. vscode-icons (4.2M)
As the most popular icon pack for VS Code, vscode-icons adds new icons to your workflow to make navigation easier and more intuitive. If you’re tired of the text-heavy file explorer, vscode-icons provides simple visual cues so you can quickly find different file types.
15. Code Time (40k)
Code Time is our automatic time-tracking extension for VS Code. The in-editor dashboard shows you daily and weekly reports of your programming activity right in your code editor. In the VS Code Status Bar, our Code Time extension displays real time metrics—like hours coded per day and daily average—so you can see how you’re tracking.
Visiting the web app gives you access to even more interesting data visualizations. See your 90-day coding heatmap, code start times, work-life balance, top projects, and more.
10 VS Code settings to customize
VS Code includes many built-in options and settings that can be customized to better tailor your coding experience to your preferences.
You can find all of your VS Code settings in a JSON file called settings.json. Open the Command Palette with CMD/CTRL + SHIFT + P and search for Open Settings (JSON).
You can also edit your settings through a more traditional user interface with checkboxes and text boxes. Simply search for the command Open Settings (UI).
You can find a full list of all settings that can be customized in the VS Code documentation.
1. Format on paste
Whenever you copy and paste code from tutorials, documentation, or Stack Overflow, you can quickly format it to match the style of your code. Set the formatOnPaste option to true.
"editor.formatOnPaste": true
2. Format on save
You can also choose to format your code every time you save.
"editor.formatOnSave": true
3. Trim new lines and whitespace
Clean up your files by removing extra newlines and whitespace whenever you save your files.
"files.trimFinalNewlines": true
"files.trimTrailingWhitespace": false
4. Highlight modified tabs
Make it easier to find modified files by adding a top border to the tabs of unsaved files.
"workbench.editor.highlightModifiedTabs": true
5. Enable autosave
Automatically save files:
- afterDelay: dirty files are saved after a preset amount of time
- onFocusChange: dirty files are saved when the editor loses focus
- onWindowChange: dirty files are saved when the window loses focus
"files.autoSave": "onFocusChange"
6. Customize your cursor
You can change the cursor shape to be block, block-outline, line, line-thin, underline, or underline-thin by editing your VS Code settings:
"editor.cursorStyle": "line"
The blinking animation of the cursor can also be changed between: blink, smooth, phase, expand, or solid. Edit in your settings file:
"editor.cursorBlinking": "smooth"
7. Fine-tune Zen Mode
Zen Mode in VS Code changes the layout of your code editor to help you focus and eliminate distractions. You can turn Zen Mode on or off by searching for the command View: Toggle Zen Mode in the command palette.
"zenMode.fullScreen": true,
"zenMode.hideActivityBar": true,
"zenMode.hideLineNumbers": true,
"zenMode.hideStatusBar": true,
"zenMode.hideTabs": true
8. Enable or disable minimap
VS Code’s built-in minimap is great for finding code quickly in large files. If, however, it takes up too much space in your editor, you can turn it off or change its default width.
"editor.minimap.enabled": false,
"editor.minimap.maxColumn": 120
9. Sort explorer by type or recent changes
VS Code’s explorer, by default, sorts files and folders by their names, in alphabetical order, with folders displaying before files. You can also sort the explorer:
- Alphabetically, mixing files and folders (mixed)
- Alphabetically, placing files above folders (filesFirst)
- By type, according to file extension (type)
- By modified, according to the last modified date (modified)
"explorer.sortOrder": "type"
10. Add font ligatures
Ligatures combine multiple characters into a single character. For example, writing >= will create a single greater than or equal operator. You will need a font that supports ligatures. FiraCode is a popular font, with instructions in its GitHub repository.
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": false
15 VS Code shortcuts to memorize
Shortcuts make it easier to navigate around VS Code without needing to leave your keyboard. VS Code includes dozens of powerful shortcuts, but memorizing just a few key shortcuts can dramatically boost your productivity.
1. Open Command Palette
CMD + SHIFT + P or CTRL + SHIFT + P: Opens a search bar for you to find and run any command.
2. Find in current file
CMD + F or CTRL + F: Locates a search term in the currently opened file.
3. Toggle Side Bar
CMD + B or CTRL + B: Show or hide the Side Bar.
4. Toggle Panel
CDM + J or CTRL + J: Show or hide the panel, including the terminal, output, debug console, and problems.
5. Find and open a file
CMD + P or CTRL + P: Opens a search bar at the top to quickly find files.
6. Focus Explorer
SHIFT + CMD + E or SHIFT + CTRL + E: Focus on the explorer pane. Once focused, you can navigate your files using your keyboard.
7. Focus Find
SHIFT + CMD + F or SHIFT +CMD + F`: Focus on the global find pane to search for anything across your entire codebase.
8. Focus Debugger
SHIFT + CMD + D or SHIFT + CMD + D: Focus on the debugger pane.
9. Focus Source Control
SHIFT + CTRL + G: Focus on the source control pane. Automatically focuses on a text box to enter a commit message.
10. Toggle Zen Mode
CMD + K Z or CTRL + K Z: Enter Zen Mode. Hit Esc Esc to exit Zen Mode.
11. Split editor
CMD + \ or CTRL + \: Open a new editor. You can focus on different editors by using the shortcut CMD + [1-9] or CTRL + [1-9] with the number of the editor you want to bring into focus.
12. Cycle tabs
SHIFT + CMD + [ and SHIFT + CMD + ] or CTRL + TAB: Cycle through tabs in the current editor.
13. Comment selection
CMD + / or CTRL + /: Comment or uncomment the current selection or line.
14. Trigger suggeston
CTRL + SPACE: Force VS Code to suggest a code snippet or autocompletion.
15. Open shortcuts
CMD + K, CMD + S or CTRL + K, CTRL + S: Open a list of all VS Code shortcuts for reference.
For a full list of shortcuts, check out these cheat sheets:
What’s next?
Now that you know your way around VS Code, you are one step closer to becoming a VS Code power user.
As you become more familiar with your code editor, we suggest looking for other VS Code extensions and shortcuts that work best for your development workflows. And with new extensions being released everyday and monthly updates to VS Code, you should always be ready to learn something new!
Not using VS Code? Check out our guides to Sublime Text and Atom.
