Opinionated guide on tweaking VS Code for productivity
Tags: vscode, webdev, beginners, productivity
Published: 2021-10-06 04:03:32

1). __Be afraid of Windows__: If you are on Windows then on one beautiful day you would be presented with a blue screen and you may not see your good old Windows again and the data. So, for that sunny day sync up all the setting, extensions and themes with your account.

<img src="https://media.giphy.com/media/msyxup4rMcL77jSuRB/source.gif"> 

<br>
2). __Bid goodbye to the default theme__: The default theme is okay but the theme can be better. Most common ones are _Night Owl_ but I personally use _SynthWave '84_. To get a theme you need to download the individual themes from the extensions and then open _command palette_ using _ctrl + shift + p_ and then select the downloaded theme from there.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/UL0MD5l0W7j2tnXje2/source.gif">

<br>
3). __Knowing VS Code__: Many times it has happened with me that I needed to search for "VS Code shortcut to show/hide the pane in the left". The point it that let's just know what different panes are called.
<img width="100%" style="width:100%" src="https://media.giphy.com/media/xYfYVoSubpaQ9mFIc0/giphy.gif">

<br>
4). __Get focused__: Changing the position of the activity and the sidebar to the right side form the left. By doing this the editor doesn't shift on opening/closing(Ctrl + B) the sidebar as it does when they are in the left hence less annoyance.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/qB2K74UsqgsGmumIZl/source.gif">

<br>
5). __Cut the clutter__: If you see your _Task bar_, you would see a lot of junk there. Let's clear the clutter out by right clicking on the task bar and keeping the thing there that you really need there.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/ndmbpPu2h9nMsExUrd/source.gif">

<br>
6). __The minimap controversy__: Most people out there would tell you to turn it off and give the most obvious reason that __you don't need it__ but let me sell you an argument here. _You can travel through a large file a lot faster in fewer clicks without scrolling a million times_.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/nncwTjXUhNglKzbZXD/source.gif">

<br>
7). __Clone a repo__: Old days of cloning a repo and then opening it in the editor are gone. Clone a repo directly form command palette (ctrl + shift + p).

<img width="100%" style="width:100%" src="https://media.giphy.com/media/SO5qEcLDulE4WXkwLr/source.gif">

<br>
8). __Good fonts, bad ligatures__: Getting fancy with a better font is nice but enabling ligature(It basically means to combine different symbols into one eg. `===` turns into `≡`) to make code resembles with Math or English which I believe is absurd and takes away the uniqueness of programming. It is as absurd as writing '8' in place of 'B' or 'o' as '0' in English. 

If you want to enable it(why??) then download a font that support it, one of them it [Fira code](https://github.com/tonsky/FiraCode/wiki/Installing) and watch the video below to enable it. May require a reload.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/Ql0EEmnyy6ccF1XodU/source.gif">

<br>
9). __Extensions- VS code Samaritans__: Have all of 'em, miss none
 - Auto Close Tag
 - Auto Rename Tag
 - Better Comments
 - Code Spell Checker
 - Color Highlight
 - Git Lens
 - Image Preview
 - Live Server
 - Import Cost
 - Markdown Preview Enhanced
 - Prettier
 - Thunder Client
 - Git Graph

<br>
10). __2 cents on Git lens__: Get this extension and blame your colleagues with conviction as it shows the author's name on every line of the code. Putting it aside, we all once have felt the need to compare a file with a different version in a different commit or branch, here git lens really comes handy.
Press the previous revision button once to compare with the last commit, press it with "alt" to see all the commit of same branch or even compare with commits of different branch(first option).

<img width="100%" style="width:100%" src="https://media.giphy.com/media/q5UUBiP4n5BteFOXEb/source.gif">

<br>
11). __2 cents on Thunder Client__: While switching between Postman and the editor zillion times is great muscle exercise but having an extension that does the same thing in the editor can be relaxing.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/vjFWQ89btjnp5SBmiN/source.gif">

<br>
12). __Mighty Tabs__: Do you scroll to different files in the editor section and are frustrated? Not anymore, you can wrap all the tabs so that they all are visible altogether. I prefer to keep the tabs to 2 lines to avoid the clutter.

Also, you can close a tab using `ctrl + w` and reopen it using `ctrl + shift + t` same shortcuts as chromium based browsers which comes very handy.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/PkhBIKS6bZVWamKkQF/source.gif">

<br>
13). __AI powered settings search bar__: How many times have you given up changing a setting just because you don't know what it is called? Many times maybe the answer but maybe not anymore. VS Code setting's search bar is AI powered and can process natural language. For eg. searching for "setting to zoom into the editor" pops up the option of "Mouse Wheel Zoom", which is also the Segway to the next point.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/otTjWB0Fx7ekz1X7ku/source.gif">

<br>
14). __Zoom deep into the editor__: It is one of the most common setting yet very useful. It is very handy if you are moving the same VS Code window around among different sizes of monitors.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/Lv1y6gJsPJaA29iebj/source.gif">

<br>
15). __Snippets__: Now most of you have used snippets provided by the extensions that you have but we can have custom snippets that can be customizable for different languages. In JS you might have dealt with writing `console.log/info/error` entirely without snippets but this can be put into a snippet and called by a prefix.

<img width="200%" style="width:200%" src="https://media.giphy.com/media/TRIf3hBs7m9mfEvBa3/giphy.gif">

<br>
16). __Pain in the a** Preview__: There is a setting enabled by default called "Preview Editor" which makes you click _twice_ to open a file. __Turn it off!!__.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/Ec7SK5W6fMMoAGKmsY/source.gif">

<br>
17). __Useless Open Editors__: Another setting that comes by default enabled is "Open Editors", can you see a useless space taking pane in the top of your "Sidebar"? yes, that's it. _Turn it off_ and get yourself some space.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/WtbZX1rRGb1aj8Ak4r/source.gif">