Super Clean Visual Studio Code Setup (Clutter Free Output)

hey welcome everybody it's caleb in this video i'm going to be talking about a really simple and clean setup for visual studio code to have a nice output now my inspiration to do this was basically when i was creating these videos i wanted to have as little clutter on the screen as possible this was made very simple with sublime it was my editor of choice for a lot of videos but my personal preference in editor was visual studio code so i was thinking maybe i can get that same experience in visual studio code with a few key extensions so that's what we're going to talk about in this video i'm going to show you what extensions what themes and what settings i enabled or disabled so we have the default visual studio code set up right here and even right now i can't even run this python file so let's just go through the extensions the very first one is python which i'm coding in python it might be a little bit different for you most likely if you save a file with whatever extension it'll give you a suggestion to install the correct extension i haven't changed any settings with that basically i just wanted to be able to run python and when i do this it does work i get the output testing however it's fairly cluttered and it's fairly difficult to see that actual output not really ideal for video content or for really focusing on the output there so the extension you're going to want to get is called code runner so you can search this it's called code runner run c c plus plus java and so forth we'll hit install and now what we can do is from our python file we can run this and we have two options run code or run python file in terminal all right now when i run code it'll show up in the output which you can tell is a lot cleaner now i configured some settings to get it to look this way as well as a shortcut so what we can do is we can go back to our extensions and you can copy my configuration for this so extension settings and i'll try to give a little bit more space here the main ones of interest is i check this first thing which will clear the previous output if this is not enabled basically what will happen is it will list numerous outputs and you'll have to scroll through them if you choose to go this route you can click this lock and unlock it and that will enable auto scroll so now when i run this it'll automatically scroll to the most recent output but my personal taste i just prefer to clear out that output and it makes it a lot better as well as getting that visual refresh so you can see that it's a new execution so that was the first setting and you can scroll through here see what else nothing too crazy there's a couple of other ones but i'm just scrolling through so you can copy exactly what i have this one run in terminal you can choose to select that basically what that'll do is it'll cause it to run in the terminal instead of the output which is important if you're taking user input however if you're just doing output focused stuff then you can just use the output one and additionally even if this is unchecked you still have the option to select this run python file in terminal and that'll work just the same next up in the settings i have it to save all the files show execution messages i have this unchecked so when this is checked what will happen is it'll give a little bit extra information when we run this which can be nice if you're doing some testing or you want to see extra details but again it's a setting i chose to disable we'll scroll through here more and everything else looks good so that is how you can get it to look exactly like this the next thing i want to do though is actually assign a shortcut key now i believe by default you can just do control option n but it's a little obnoxious because you can't really do it easily with one hand so i decided i just want to do a custom shortcut and you can set it to whatever you like so let's learn how to do custom shortcuts in visual studio code we can go to view command palette and type in shortcut and then under preferences open keyboard shortcuts and here you can search code runner and the one we're looking for is run code so you can see i set it to alt and the left arrow key so basically that's the option button on mac so i can just do that really easily with my right hand two fingers so you can edit that here and just type in whatever command you want now most likely you're going to think of some good commands and they're already going to be taken by some other extensions or capabilities so be a little bit creative so having that shortcut key will allow me to easily run my file and get that output down here next up briefly want to talk a little bit about the theme now i'm not super picky when it comes to themes i just want something that looks good and i don't tend to like the default theme for visual studio code i like to switch it up just a little bit so the theme i like is the github theme so i'll show you how to get that you can go to extensions just search github second on here github theme we can hit install and it defaults to light default which i don't really like so you could try dark default which looks like this pretty nice and this is what the code looks like and you can change it by set color theme it is the github dark or even the github dark dimmed where the primary difference is the dimmed one the terminal is a little bit gray and then if you go for the dark the terminal is white and it's a little bit brighter so that is the theme i am going with so those are just a few simple steps you can do just to affect the visual output of visual studio code and this doesn't really go into any details on how to effectively work in python or anything like that might do a dedicated video on that content later but for now i'm pretty satisfied with the way this looks that's all the bare minimum i'm sure there are a lot of other things i could do so if you have any suggestions drop a comment in the comment section below there's a couple other notes i wanted to mention as an extra section in this video for those of you who are interested the first tip is that this output doesn't take input so what that means is if you grab input this isn't going to work out too well so when i run this it doesn't give me the option to type anything if that's the case you'll want to run this in the terminal and when that's the case you can then type so that's probably going to bite you in the butt if you're not paying attention and you're trying to input some data the next thing is that whenever you change settings you might want to save this configuration and there's an experimental feature with visual studio code so if you go to the extensions and open up any of the extension settings that's actually not an extension that's a theme so let's go back and we can open up extension settings there's a button here to turn on settings sync and it gives you the option to read the documentation it's actually pretty involved so there's a lot of different details on how to get the syncing working and how to deal with merge conflicts or anything like that but basically this will allow you to sync using your github account or microsoft account so you can go ahead and choose what you want to sync including keyboard shortcuts which is very nice and the extensions so sign in and turn on sign in with github and then you'll authorize access once that's done you should be good to go and now my settings are synced now when i go to a new laptop or some new environment i should be able to sync again and get all those settings locally so very convenient so you have to reset all this up every single time that's all i have for this video thank you so much for watching if you enjoyed this content please be sure to subscribe got a lot of cool content coming and i'll see you in the next one peace out peace out

Channel: Caleb Curry

Views: 72,299

Keywords: python, tutorial series, tutorial, programming, code, coding, caleb, curry, intermediate python, intermediate, how to

Id: XKR7t0oagUk

Length: 7min 40sec (460 seconds)

Published: Tue Jul 20 2021