Opinionated guide on tweaking VS Code for productivity

Neeraj Sewani - Oct 6 '21 - - Dev Community

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.



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.



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.



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.



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.



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.



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



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 and watch the video below to enable it. May require a reload.



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



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



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.



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.



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.



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.



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.



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



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.

. . . .