????????????????????????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.
1.
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.
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 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.
visualstudiocode.
com4.
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