How I set up VSCode for productivity? [Checklist]

Here’s a list of shortcuts, configuration and extension that I use in VSCode

Few weeks ago, 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).

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)
Close unwanted panels and boost your focus

3. Handy shortcuts

Keyboard shortcuts are huge time-saver. I’ve explored some VSCode shortcuts and applied on 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:

source: code.visualstudiocode.com

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] If you love this article & feeling generous, send me a coffee? ☕

[2] Find me on Personal Site / Twitter / LinkedIn 🔥

[3] In case you miss out, I can send my upcoming resources to your inbox — Click here to join my newsletter ↗️

Women Make

Women Make is a community that supports women entrepreneurs and put them at the forefront

Zoe Chew 🇲🇾👩‍💻🎹📕

Written by

🚀Built “I Lazy To Read” Product Hunt #1, Lifehacker + tech blogs in 7 countries. Run Product/Community for tech co. 👉About me: whizzoe.com

Women Make

Women Make is a community that supports women entrepreneurs and put them at the forefront

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade