From Vscode to Bae AF Code
I love Vscode, straight out of the figurative box you get an array of dev tools preparing you for pretty much anything. It’s intelli-sense, built in git, run and debug make this free-ware source code editor an ice cream sundae with all your favorite toppings. The cherry that tops this sundae off is Vscode’s personalization.
If you’ve never really taken the time to get to know vscode, you’re set up probably looks a little something like this. It’s the default theme “dark+ (default dark)” and default file icon theme “seti (visual code file)”. These are fine to use as is, but quickly get boring over time. Luckily for us we’ve got options.
Customizing Your Theme
Vscode actually comes with a few different versions of their default theme but those feel a little too similar for my taste. Luckily for us Vscode comes with a built in marketplace with plenty of free extensions for us to install, including new themes. We can narrow down our search results to return only themes by following the steps in the image to the left.
Once you find one that you like you just click install and it will automatically install and alter your theme. Some color themes also come with file icon themes. In this case Monokai Pro is one of those themes that does. Upon installation your themes can be changed and mixed up in your settings.
Changing your color theme and file icons can be great for your productivity or just if you need a change of scenery but there’s still plenty of other ways you can customize your Vscode.
Customizing your Font
There’s a couple of things we can change about the font but I’m only Going to focus on 2 things, the font style, and font size. To change the font style the first thing you have to do is find the font you like. I found that Google Fonts and Fonts Arena seem to have a good selection of fonts available to download for free. The font I’ll be downloading for this tutorial is Cascadia Code. After reading the information provided in the repo select the appropriate files from the downloaded zip folder and right click to install the fonts into your font library. For my mac I had to use the ttf files and install them to my Font Book app.
The final step necessary to use your new font is making the correct changes to your font settings. In the font tab of our text editor settings we have our ‘Font Family’, ‘Font Ligatures’, ‘Font Size’, and ‘Font Weight’. to use our new font just replace the existing text with the name of the font you installed. If your font supports ligatures and your into that sort of stuff like I am you can enable them by editing them in settings.json and setting “editor.fontLigatures”: true. The last 2 settings are all about preference, font size will effect your size, and weight will decide the thickness of your text.
When we’re all done our vscode will look like this. At this point we’ve altered everything we possibly can and there’s nothing else we can add. Is what I would say if there were if extensions didn’t exist, or if vscode’s settings weren’t so customizable.
Settings and Extensions
At this point everything moving forward all boils down to personal preference and you may not agree with my choices in customization. But I’m gonna run you through the settings I ended up changing and one useful extension that really brought this all together for me.
I’ll start with my settings. 4 of my settings simply had to do with my cursor so I won’t really go over those. The other 3 had some functional reasoning behind them so I will go over those. I decided to move my sidebar to the right because I’m frequently annoyed when I open or close it and my code moves it. when my sidebar is on the right it prevents that from happening. The next change was my window title. There wasn't much of a reason for me to change it, I just like being able to see the entire root path at the top of the page. Last but not least I added a ruler. I Just like that line there as a reminder of how long my code is.
I don’t know about you but I’ve been in a few situations where brackets have caused me a headache trying to decipher what needed to go where. This has been especially true now that I’m beginning to learn to code in JavaScript. This extension is going to be installed in the same exact way as Monokai Pro earlier. Once it’s installed the changes will be applied instantly and you’ll never have bracket problems again.
There’s definitely a lot more extensions that will help your productivity, but for now I’m satisfied with just this. There’s one last thing I’d like to show you, that not everyone who uses vscode knows.
Vscode’s Terminal
I know somewhere out there, there’s someone who hasn’t been using vscode’s terminal to its full advantage. The people that open their computer’s built in terminals to run servers while they code in vscode. When it comes to situations where you need to run a server and execute code through your terminal it would be really annoying if you had to constantly toggle those tasks. At least that’s what I experienced when I first began learning to code.
Some people may not be aware of this but you can actually run multiple servers through vscode at once. In your terminal you simply have to click the (+) sign and poof that vscode magic conjures a new terminal for you in a drop down list. Now you can use either or when necessary!
What’s that? That’s too much of an inconvenience? You’d rather look at both terminals at the same time? Vscode has you covered! you can run both of your terminals at once and display both of them at the same time with vscode’s split terminal feature! The sky really is the limit in this case because vscode will allow you an ungodly amount of terminals if you really need the. and the best part is they’re resizable!
There’s plenty of other great features and options that I didn't touch on, but I think I’ve illustrated my point. With the knowledge I’ve bestowed upon you, you may now go forth and personalize your vscode to your hearts content. So that you can become a little more productive or just make it your own.
