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

How I set up VSCode for productivity? [Checklist]

whizzzoe profile image Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“• Originally published at whizzoe.com ใƒป3 min read

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:

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)

panels

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:

vscode shortcut

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)

Where to find me? ๐Ÿ‘‹

[1] Find me on Personal Site / Twitter / LinkedIn ๐Ÿ”ฅ

[2] In case you miss out, I can send my upcoming toolkit to your inbox โ€” Click here to join my newsletter ๐Ÿ’Œ

[3] If youโ€™re feeling generous today, you can buy me a coffee โ˜•

Posted on by:

whizzzoe profile

Zoe Chew ๐Ÿ‡ฒ๐Ÿ‡พ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ“•

@whizzzoe

Product Builder. On Product Hunt #1 & Lifehacker (I Lazy to Read). Python & django. Nocode prototype & MVP.

Discussion

pic
Editor guide
 

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

 

๐Ÿ‘‹ 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:

  • 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โ€ฆ

 

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

 

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.

 

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

 

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 :)

 

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! ๐Ÿ‘

 
 

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

 
 

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!

 

cool list! do you usually search for files using the search pallete or click through the file finder?

 

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

 

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!