How I set up VSCode for productivity? [Checklist]

????????????‍????????????BlockedUnblockFollowFollowingMay 22Few 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.


Get a nice themeCoding 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 theme2.

Configure for workflowI 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.


To edit this file, simply CTRL+SHIFT+P and type in search bar “Open Settings (JSON).


colorTheme": "Field Lights","window.

zoomLevel": 1,"workbench.


visible": false,"workbench.


visible": false,"[html]": { "editor.

defaultFormatter": "vscode.

html-language-features", "editor.

tabSize": 2},"breadcrumbs.

enabled": false,"window.

menuBarVisibility": "default","editor.


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

Handy shortcutsKeyboard 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+PCommand Palette CTRL+SHIFT+PShow/hide sidebar CTRL+BOpen Terminal CTRL+SHIFT+`Jump between file tabs CTRL+TABOpen files side-by-side CTRL+Switch between editors side-by-side CTRL+1 ; CTRL+2 ; CTRL+3Fast scrolling ALT+scrollSearch 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/DOWNClear extra whitespaces CTRL+K then CTRL+XEnable multi-cursor editing ALT+click+select textAdd or remove comment CTRL+/Write HTML tags with Emmet abbreviation type html:5+tabZoom In or Out CTRL+ ‘+’ / ‘-’You can also download the full VSCode shortcut from the official website:source: code.



Cool extensionsThe 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 meThanks 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.

[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⏳.. More details

Leave a Reply