DEV Community

loading...
Cover image for How I set up VSCode for productivity? [Checklist]

How I set up VSCode for productivity? [Checklist]

Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• on March 01, 2020

List of shortcuts, configuration, and extension that I use in VSCode Note: This article is part of my toolkit newslettersโ†—๏ธ where I shar...
Collapse
riencoertjens profile image
Rien Coertjens

cool, some extra tricks!
I prefer cmd/ctrl + j for opening terminal, it doesn't stop any of the processes, it just hides the panel
and another useful multi-select shortcut is cmd/ctrl + i, which puts a cursor on every selected line

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

๐Ÿ‘‹ Hey Rien! Thanks so much for your generous share! I'm adding cmd+j on my list soon!

Collapse
metruzanca profile image
Samuele Zanca

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.

Collapse
chachan profile image
Cherny

Love the theme, I've been looking for one like this for ages. For productivity I'm also using these:

  • Code Time

    GitHub logo 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


    Marketplace Installs Rating Live Share enabled


    Getting started

    1. Create your web account

    Code Time for VS Code login prompt

    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

    Code Time for VS Code status bar

    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-now-sh

    GitHub logo carbon-app / carbon

    ๐ŸŽจ Create and share beautiful images of your source code

    maintained with Ranger All Contributors MIT License FOSSA Status

    Open Collective sponsors Open Collective backers Open Collective sponsors

    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.

    Carbon example

    Features

    • Customization. Customize things like your image's syntax theme, window style, and more
    • Share quickly. Save your image or a link with one click
    • Import from GitHub gist. Simply append a GitHub gist id to the url

    Usage

    Import

    There are a few different ways to import code into Carbon:

    • Drop a file onto the editor
    • Append a GitHub gist id to the url (e.g. carbon.now.sh/GIST_ID_HERE)
    • Paste your code directly

    Customization

    Once you've gotโ€ฆ



  • GitLens



    GitHub logo
    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





    GitLens Logo

    GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to 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

    Sponsored by


    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

    • Adds all-new iconography to better match VS Code's new visual style
    • Adds an all-newโ€ฆ
  • Indenticator



    GitHub logo
    SirTori / indenticator



    VS Code Extension: Highlights the current indent depth of the cursor




    Build Status

    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

    Indenticator demonstration
    Example using default settings

    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

      Indenticator demonstration
      Example has indenticator.hover.peekBack & indenticator.hover.peekForward set to 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

      Indenticator demonstration
      Example has indenticator.inner.color.dark set to #ff0000
    • Languageโ€ฆ

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

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! ๐Ÿ˜Š

Collapse
amirthananth profile image
Amirthananth

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.

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

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!

Collapse
amirthananth profile image
Collapse
sitelifer profile image
Karen Grau

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.

Collapse
dsctopher profile image
dsc-topher

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...

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

Awesome share, thanks so much! I haven't but am adding it to my list!

Collapse
yokotobe profile image
yokotobe

Do you use Git on VS Code?

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

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

Collapse
lt0mm profile image
Tom

gitlens is a really nice extension with file, line history views, gitblame and bunch of other cool stuff

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

Great share, Tom! Thanks a lot for recommending :)

Collapse
fabiorosado profile image
Fabio Rosado

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 {

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

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!

Collapse
fabiorosado profile image
Fabio Rosado

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 ๐Ÿ˜„

Thread Thread
whizzzoe profile image
Collapse
peacefullatom profile image
Yuriy Markov

Check out this article for more shortcuts:
dev.to/peacefullatom/productivity-...

HappyCoding!

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

And thank you so much for the awesome share of shortcuts!!

Collapse
peacefullatom profile image
Yuriy Markov

You are welcome! ๐Ÿ‘

Collapse
whizzzoe profile image
Collapse
shjordan profile image
Jordan Humberto de Souza

Couldn't find the Inline HTML extension, could you provide a link?

Collapse
whizzzoe profile image
Collapse
shjordan profile image
Jordan Humberto de Souza

Seems it is not available anymore:
"This extension is now unpublished from Marketplace. You can choose to uninstall it."

Thread Thread
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

Ah great catch :) Thanks for the info, appreciate it!

Collapse
julienverkest profile image
Julien Verkest

Fast scrolling ALT+scroll

Thank you just for this trick!

Collapse
whizzzoe profile image
Collapse
gaelthomas profile image
Gaรซl Thomas

Another great article made by you Zoe! ๐Ÿ˜€
Thank you, I discovered a new theme, and I love it!

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

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

Collapse
salmacoder profile image
Salma

Great Article, Thank you for the share

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

Thanks Salma! Glad you find value in this article :)

Collapse
myjanala profile image
Mezbaur Rahman

Great article, thanks!

Collapse
whizzzoe profile image
Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Author

hey thanks for taking the time to read! I find myself using the file finder a lot ๐Ÿ˜

Forem Open with the Forem app