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.
Latest comments (13)
Very helpful article. Thank you for sharing!
Our team is building Stepsize VS Code extension for managing technical debt, I'd be happy to hear your feedback on it!
Nice work you got there, Neeraj!
Will you be interested to write some tutorials for our companies? We'd love to collaborate with you and we will gladly pay. You can either DM me on twitter at twitter.com/AndrewPierno or fill out this little airtable form airtable.com/shrN6S3NMZ7oxRXTt.
A few of these extensions are outdated or redundant:
In addition I'd recommend installing Edge devtools to get that sweet realtime css editing, if you do webdev.
As for ligatures I think they are great for more easily recognizing certain pieces of code. It does not have anything to do with mathematics, it is simply tokenizing common code expressions like fat/thin arrows, equals and strict equals, gte/lte and so on. To me these expressions become much less ambiguous with ligatures.
Thanks for the input. And I recently discovered that auto closing/renaming are now getting shipped with the latest version of the VS Code by default.
Awesome article! Thanks for sharing!
My two cents here on #16, you can just middle click a file. And it will open it! 😬
Better yet CMD+p (or CTRL+p) and just start typing any part of the filename and there it is!!
I used to do double click on every file 😑
Also in these many files you don't want to find in large project architecture you can simply press Ctrl T and start write filename
Hey Sharky! Thanks for the input. I guess
ctrl + pis the shortcut to find the files in a project whereas, withctrl + tyou can find classes, functions and variables inside a file.One of the most useful articles I've read in a long time!
Nice breakdown. One thing I've seen the minimap used for is commenting large text to make finding sections easier. Something like this:
manytools.org/hacker-tools/ascii-b...
(I won't drop one in here, but have used it before in a project)
Daaang good ones.
I would like to mention the theme that I made, Serendipity
Oficial site:
wvsc.dev
Marketplace :
marketplace.visualstudio.com/items...
It will feel great on the eyes because is crafted for retina displays, so the colors are not too harsh.
The theme is available for many UIs, dark, bright, low contrast and Italics.
hope you like it
Man, the 4 is simple but just blow my mind 🤯
Thanks for sharing this!
Thanks for sharing! Some great points here for sure.
Some comments have been hidden by the post's author - find out more