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.

👉In case you miss out, I can send my upcoming toolkit/resources to your inbox —Click here for Zoe’s Build & Launch newsletter!

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]": {   
"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 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.

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)

👋Say hi to me

Thanks for dropping by, my friend! If you love what I write here, please feel free to 👉share this article.

Note: My name is Zoe Chew. I code in Python and django and in the process of transitioning into tech from marketer background. I also started a prototype accelerator to help people build startup prototype in 24 hours. Currently, I build and launch products till I found product-market-fit.

👉In case you miss out, I can send my upcoming toolkit/resources to your inbox —Click here for Zoe’s Build & Launch newsletter!

[1] I have a personal website that I built in 1 hour. Check it out! 😋

[2] I’m active on Twitter you can follow me there! 🔥

[3] I publicly shared my portfolio tracking where you can access⏳