![Cover image for How I set up VSCode for productivity? [Checklist]](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fki84kujnzem5phvkpqky.png)
List of shortcuts, configuration, and extension that I use in VSCode
Note: This article is part of my toolkit newsletters↗️ where I share resources about building things. Join me :)
I made a code editor switch from Sublime Text to Visual Studio Code (VSCode). Like many developers, I couldn’t be happier.
As a newcomer to VSCode, I realized I needed to get the best out of it and explore what it has to offer.
In this post, I will share a list of configuration that I use, and how you can set them up to boost your productivity.
1. Get a nice theme
Coding is a long-hour and creative task. Therefore, I prefer a code editor theme that I feel comfortable and inspired to use.
I used to love Dracula theme. But recently, I’ve become a fan of Field Lights theme:
2. Configure for workflow
I prefer a clean and minimalist view in VSCode. This allows me to focus on writing codes without seeing those extra panels.
Some of my settings in “View” > “Appearances”:
- Status Bar (disable)
- Activity Bar (disable)
- Toggle Panel (disable)
- Zoom In (to your comfortable level)
- Minimap (disable)
- Wordwrap (enable)
Fine-tune settings.json using Open Settings (JSON) editor:
I’ve enabled auto-save and wordWrap by adding few lines of code in the settings.json.
To edit this file, simply CTRL+SHIFT+P and type in search bar “Open Settings (JSON).
{
"workbench.colorTheme": "Field Lights",
"window.zoomLevel": 1,
"workbench.activityBar.visible": false,
"workbench.statusBar.visible": false,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.tabSize": 2
},
"breadcrumbs.enabled": false,
"window.menuBarVisibility": "default",
"editor.minimap.enabled": false,
"editor.renderControlCharacters": false
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 5000,
"editor.wordWrap": "on",
}
I keep these panels open for day-to-day navigation:
- Terminal (built-in terminal without having to open externally)
- Explorer (browse through files or create new ones)
3. Handy shortcuts
Keyboard shortcuts are a huge time-saver. I’ve explored some VSCode shortcuts and applied on a daily basis.
Here are some of my favorites:
- Quickly search any project files in the folder CTRL+P
- Command Palette CTRL+SHIFT+P
- Show/hide sidebar CTRL+B
- Open Terminal CTRL+SHIFT+`
- Jump between file tabs CTRL+TAB
- Open files side-by-side *CTRL+*
- Switch between editors side-by-side CTRL+1 ; CTRL+2 ; CTRL+3
- Fast scrolling ALT+scroll
- Search by file name CTRL+P
- Multi-occurrence editing current selection+CTRL+SHIFT+L
- Duplicate a line Up or Down SHIFT+ALT+UP/DOWN
- Move a line of code Up or Down ALT+UP/DOWN
- Clear extra whitespaces CTRL+K then CTRL+X
- Enable multi-cursor editing ALT+click+select text
- Add or remove comment CTRL+/
- Write HTML tags with Emmet abbreviation type html:5+tab
- Zoom In or Out CTRL+ ‘+’ / ‘-’
You can also download the full VSCode shortcut from the official website:
4. Cool extensions
The awesome thing about VSCode is that it comes with a library of free extensions that can improve your workflow.
Some extensions that I use:
- Python extension (support your python programming)
- Prettier — Code formatter (easily format your JavaScript / TypeScript / CSS)
- Inline HTML (syntax Highlighting for html/css)
- Indent 4-to-2 (convert indentation from tab or 4 spaces into 2 spaces)
- IntelliSense for CSS class names in HTML (CSS class name autocomplete)
Top comments (35)
cool, some extra tricks!
I prefer
cmd/ctrl+jfor opening terminal, it doesn't stop any of the processes, it just hides the paneland another useful multi-select shortcut is
cmd/ctrl+i, which puts a cursor on every selected line👋 Hey Rien! Thanks so much for your generous share! I'm adding cmd+j on my list soon!
A shortcut i recently discovered is
ctrl + enter, which just gives you a new line without creating a mess regardless of where you were in the line.I used to just ctrl + right arrow as I could never remember where my end key is on my many laptop keyboards (3: work, gaming, toaster-level pc) but this new trick is super handy.
Also surprised you didn't mention all the multi cursor tricks.
This is such a nice article for a Beginners to VSCode. I've spent a lot of time searching for many of these options when I switched to VSCode.
Nice Work Zoe :)
PS: Check out "Material Icon Them". I love having a vibrant icon choice when i work with multiple files/rechnologies.
Hey Amirthananth! Thanks a lot for reading & glad to hear your feedback :)
Material Icon Theme is such a cool recommendation! Love it & just installed. Thanks for sharing it!
Glad to hear :)
Love the theme, I've been looking for one like this for ages. For productivity I'm also using these:
Time-tracking plugin for Visual Studio Code
Code Time is an open source plugin for automatic programming metrics and time-tracking
Getting started
1. Create your web account
The Code Time web app has data visualizations and settings you can customize, such as your work hours and rates per project for advanced time tracking. You can also connect Google Calendar to visualize your Code Time vs. meetings in a single calendar.
You can connect multiple code editors on multiple devices using the same email account.
2. Track your progress during the day
Your status bar shows you in real-time how many hours and minutes you code each day. A rocket will appear if your code time exceeds your daily average on this day of the week.
3. Check out your coding activity
To see an overview of your coding activity and project metrics, open the Code Time panel by clicking on the Code Time icon in…
🎨 Create and share beautiful images of your source code
Translations
Introduction
You know all of those code screenshots you see on Twitter? Though the code's usually impressive, we saw room for improvement in the aesthetic department. Carbon makes it easy to create and share beautiful images of your source code. So what are you waiting for? Go impress all of your followers with your newfound design prowess.
Features
Usage
Import
There are a few different ways to import code into Carbon:
carbon.now.sh/GIST_ID_HERE)Customization
Once you've got…
eamodio / vscode-gitlens
Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
Support GitLens
Discuss, review, and share code with your team in VS Code. Links discussions about code to your code. Integrates w/ Slack, Jira, Trello, and Live Share. Try it free
While GitLens is generously offered to everyone free of charge, if you find it useful, please consider supporting it.
Also please write a review, star me on GitHub, and follow me on Twitter
What's new in GitLens 10
SirTori / indenticator
VS Code Extension: Highlights the current indent depth of the cursor
Indenticator
Visually highlights the current indent depth.
This extension can be used by itself, but it's recommended to use it alongside the builtin indent guides.
Changes in Visual Studio Code 1.23.0:
With Version 1.23.0 VS Code introduced a new builtin active indent guide. For an explanation of differences and tips regarding the new feature and this extension please see remarks section
Feature Highlights
Peeking around the current indent block: Optionally a hover can be added on the current indent marker to peek before and/or after the current indent block.
To activate set indenticator.showHover to
true1Highlighting the the indent guide for the contained block: Optionally a second indent highlight can be configured to highlight the block contained by the current cursor position
To activate set indenticator.inner.showHighlight to
true#ff0000Language…
Hey 👋 Cherny! Thanks so much for your generous share! All of them are really helpful and I can't wait to try 'em. Happy coding! 😊
Have you tried using Git Graph? Just a bit of easy in the eyes git log and easier access to git diffs or check changes
marketplace.visualstudio.com/items...
Awesome share, thanks so much! I haven't but am adding it to my list!
This is a great list of tips Zoe I need to add the auto-save one on my end.
Another extension I’d recommend is Brackets. It helps a lot when you have to deal with lots of ( and {
Thanks so much for recommending, Fabio! I just looked it up, I assume it's the "Bracket Pair Colorizer" hehe :D Going to try this extension soon!
Yeah that’s the one it’s great if you code on a language that uses a lot of brackets and such but still good for python helped me a few times 😄
That's great to hear! 😁
Couldn't find the Inline HTML extension, could you provide a link?
Hey 😊Jordan, yeah sure and here you go: marketplace.visualstudio.com/items...
Seems it is not available anymore:
"This extension is now unpublished from Marketplace. You can choose to uninstall it."
Ah great catch :) Thanks for the info, appreciate it!
Fast scrolling ALT+scroll
Thank you just for this trick!
Hey Julien, so happy to hear you find it useful!
Check out this article for more shortcuts:
dev.to/peacefullatom/productivity-...
HappyCoding!
And thank you so much for the awesome share of shortcuts!!
You are welcome! 👍
Thanks Yuriy! Happy coding too!
Do you use Git on VS Code?
hey thanks for leaving a comment :) I haven't yet for my new MBP, but in my old Windows laptop I've Git installed + VS Code
gitlens is a really nice extension with file, line history views, gitblame and bunch of other cool stuff
Great share, Tom! Thanks a lot for recommending :)
Zoe, great tips. I am a beginner and can't open vscode terminal. I was doing fine with it and now I am getting this error message.
The terminal process "/bin/zsh '-l', 'zsh'" failed to launch (exit code: 127).
Will buy many coffees for help.
Another great article made by you Zoe! 😀
Thank you, I discovered a new theme, and I love it!
Thanks so much, Gaël! I'm glad to hear you find this article useful! Yeah, love the theme super comfortable for my eyes haha
Great Article, Thank you for the share
Thanks Salma! Glad you find value in this article :)
Great article, thanks!
hey thanks for taking the time to read! I find myself using the file finder a lot 😁