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

{
"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)
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โ€ + featured on Lifehacker.๐Ÿ”ฅ Finding Product Market Fit๐ŸŽญ 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