List of shortcuts, configuration, and extension that I use in VSCode
Note: This article is part of my toolkit newsletters↗️ where I shar...
For further actions, you may consider blocking this person and/or reporting abuse
cool, some extra tricks!
I prefer
cmd
/ctrl
+j
for 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:
swdotcom / swdc-vscode
Time-tracking plugin for Visual Studio Code
Code Time
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…
carbon-app / carbon
🎨 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
true
1
Highlighting 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
#ff0000
Language…
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 😁