How I setup and customize my vscode
Over the past few years, VSCode has become my favorite IDE. I used to use Sublime and Visual Studio before, but these days I almost exclusively use VSCode. Setting up your IDE properly is an often overlooked, but quite effective way at improving your coding productivity. So, today I wanted to show you how I setup and customize my VSCode to get the best out of it. I'll start off with some useful extensions, explain how they improve my coding workflow and also talk about some essential settings that can make your life better as a software engineer.
If you are into videos, check out my video on the same topic here.
Let's start off with extensions.
Live Share
Live Share The first extension that I use is Live Share. For almost every project I work on, whether it is for work or just a side project, I collaborate with one ore more software engineers. Live share is an amazing extension that allows you to easily collaborate, pair program, code review or debug with another software engineer at real time. All you need to do is sign in with your Github or Microsoft Account and you will be able to share your editor with another person. You can choose whether you want the session to be read-write where both parties can edit simultaneously, or be read-only where you drive then editing and they observe and give feedback. I've seen a lot of people advice against pair programming because they believe that it shows the project down by 50%, since two programmers are working on a single project instead of working independently on two different projects. However, studies have shown that two programmers working on the same project is only about 15% slower, but with the massive benefit of also producing 15% lesser bugs. Therefore, on the long run, the benefits of collaborate or pair programming outweighs the little slow down in speed. And if you use VSCode as your main IDE, the Live Share extension is your tool to effectively collaborate with other engineers.
Tabnine
Keeping with the idea of coding faster and with lesser mistakes, the next extension that I've recently fallen in love with is Tabnine, which is also the sponsor of this video. Tabnine is the world's leading AI code completion tool, trusted by over a million developers worldwide. Tabnine helps you code faster, reduce mistakes and discover best coding practices using Machine Learning. It is fast, effective and accurate. Just take a look at this example. While this video is about VSCode, Tabnine supports over 30 languages and 15 different IDEs. Tabnine's machine learning code completion models constantly learn from public code repositories and suggest the right code completion for you at the right time so that you don't need to type full lines of code, memorize syntax or worry about typos. Tabnine's local completion model runs on your machine without sending any of your code anywhere - you can even work offline. I've been using this extension for a few months now and it is a game changer. I highly recommend it.
GitLens
Git Lens VsCode already have built in git functionalities. GitLens basically supercharges that. It helps you to visualize code authorship at a glance helps you seamlessly navigate and explore Git repositories and gain valuable insights. GitLens helps you understand that code you are working with better. You can quickly glance into whom, why, and when a line or code block was changed, jump back through history to gain further insights into what files were checked in or modified or how the code evolved overtime.
Import Cost
Import Cost Import Cost is an extension helps you estimate the size of an imported package. Important a lot of packages, especially large ones can quickly grow your project side and negatively impact user experience. And this is a great way to keep track of the packages you import and their dependencies.
Emmet
Emmet This used to be an extension in Sublime, but is built in to VSCode. And it surprises me that a lot of people still don't know about this. Emmet basically lets you write HTML code much faster. For example, you can pull in an entire boilerplate code for a page with the exclamation. You can also create nested tags very quickly.
Themes, Icons and Fonts
I want to mention a few more extensions, that are mainly there to improve the aesthetics of your code. I'm not much of a theme person, so I just use the default dark theme. However, I have heard great things about Cobalt2, Night Owl, and Winter is Coming.
There is also a an extension called prettier that helps you format your code automatically on save or file close. It is a great extension to use if you like auto formatting, but a lot of projects I work on have very specific formatting rules, so I don't use prettier that often. And the final one I want to mention here is bracket pair colorizer. It basically colors pairs of brackets, as the name suggests. It not only makes the code look more visually pleasing, but also helps quickly find the closing end of your brackets.
So, if you are into themes, do check them out. I may not care much about the themes, but I do care about the font typography, ligature and icons. I think they make the code look less monotonous and adds a bit of personality. For that, I use the icon pack for VSCode. And I also use the cascadia font from Microsoft and enable ligatures in settings.
Now that we are in settings, I'll show you some settings that I use that make my life easier
Side bar
Side bar on right, replicates Visual studio by keeping the sidebar on the right. And I also like that it does not make the code move when I open can close the sidebar, unlike when it is placed on the left. I find that very distracting.
Window Title
Window title I also always add the rootPath to the files, esp. on my mac because I seem to never know where my files are on my mac. This makes is very useful on very large projects.
Ruler
Ruler at 120 lines I set mine at 120, but you can set it at whatever your project's formatting rules are. This prevents you from writing lines that go too far on to the right.
Settings Sync
Sync settings Allows you to sync all your customization across different computers.
