Visual Studio Code Tips, Tricks, Keyboard Shortcuts and Features Tutorial (VS Code)

hey welcome back to the channel so about four years ago i made a video about vs code and at the time i was brand new to the text editor and i was sort of just sharing my first impressions well four years later i'm still using vs code and so now i want to share a lot of the tips and tricks and you know keyboard shortcuts and time savers that i've learned along the way and nothing i show in the video will require any extensions so these are all just built-in default features of vs code the first five minutes or so is just me optimizing the keyboard shortcuts for switching between your open tabs or files if you're not interested in that use the time stamps to switch to new topics finally before we jump into the action this video is sponsored by me in the description you'll find a link that has heavily discounted coupons for each and every one of my premium web development courses my newest course is about my sql databases but i also have courses about javascript node express react wordpress css so on and so forth having said all of that let's jump into some vs code action okay let's start with different shortcuts for opening different files or switching through your different open tabs so for example i have these three different files these three different tabs open instead of clicking on them you can use on windows it's the alt key and the number of the tab on mac it's control and then the number so if i want to go to the second tab that's number two so it's ctrl two on windows that's alt two but control three control one you get the idea what if you didn't already have all of your files opened and you wanted to jump into a file based on its name well you can just press command p or on windows control p just search for the name so if i start to search for main.css press enter cool let me get all three files opened up again because i want to draw a comparison to your web browser so you know in a web browser if you want to jump between really quick all of your tabs you can press control tab well you can do that in vs code you can see i'm holding down the control key and then if you press tab you can switch between them however vs code has a really weird default way of ordering the tab options here so it doesn't use the order that you have them open in currently instead it orders them by the most recent tab that you visited so for example i'm in this html file and then i jump into scripts and i go back into index but notice my second tab open is my css file but if i press ctrl tab it doesn't list them in that order it's based on recency and maybe it's just me but that's super unintuitive it confuses me every time i try to use this feature so really quick i want to show you how to change this default ordering so that it actually uses the order that you have them in so to change that keyboard shortcut let's open up our command palette so command shift p or control shift p on windows and then start to type in shortcuts json and we don't want the one that says default we want the one that just says open keyboard shortcuts json if you've never changed any of these key bindings before this file will be empty except for just an array so opening and closing square brackets but the code that i want to draw your attention to is this area so i'll uncomment that you won't already have this code here to uncomment but just a keyboard shortcut tip in vs code doesn't matter which language you're currently working with you can press command forward slash or control forward slash to comment out the current line or you can highlight a bunch of lines and again control forward slash command forward slash to toggle commenting or uncommenting that entire selection so inside your empty array you would just type in the selected code on the screen right now you could pause this or maybe i'll include a link to this in the description essentially we're just customizing the control tab and control shift tab just like you would in a web browser so that you can cycle through your tabs in the expected order right the order that you actually have them open in up here not whichever one you've jumped to the most recently so if we save those changes and close that now when i press control tab awesome it doesn't even bring up that weird little menu it just cycles through them in the exact order that you would expect i like this before we change topics while we're still on this topic of switching between your different tabs you might be thinking to yourself hey well how come in a web browser if i want to jump to my third tab i can just press ctrl 3 on windows or command 3 on mac but in vs code we have to use these other weird keys so on windows it's alt 3 on a mac it's control 3. why can't we use the same modifier key as you would in a web browser on your operating system well it's because by default vs code uses those keyboard shortcuts for switching between your different split windows so for example i'm on a mac so i would press command 1 or command 2 command 3 command four you would press control on a pc right but the idea is you're creating these different splits but to jump to this third split it would be command three or control three and then to jump back to the first one it's command one or control one i don't know about you but personally i never ever use this split editor feature now i'm sure a lot of people love the ability if you have a really large monitor to be able to split different files like this you can obviously keep this feature where you split your files but if you don't actively use those keyboard shortcuts of you know command 2 or control 2 what i want to show you right now is how to be able to use those prime real estate keyboard shortcuts for actually switching between your tabs just like you would in a web browser right so if i want to go to main.css and i'm on a mac instead of control 2 i want to be able to press command 2 right that's what you do in google chrome why can't i do that in vs code so to set that up just open up your command palette ctrl shift or command shift p and then just visit the same one that we already visited open keyboard shortcuts json and then you can see i've already manually typed these out so let me just uncomment these but essentially i'm just manually spelling out because i'm on a mac so it's command if you were on windows you could make this control plus the number but it's just going to switch to that open editor or tab instead of having anything to do with the split screen feature so if i save that cool now i can use the exact you know google chrome shortcuts for switching between my tabs that's enough talking about tabs and files but let's keep talking about keyboard shortcuts so if you need a bit more screen real estate you can hide your sidebar by pressing ctrl or command b as in the bar of sidebar b cool also if you wanted the sidebar to be on the right hand side of the screen you can just go into your settings so that's control comma or command comma and then let's just open up the json file so click this icon right about here and if you just start typing in a new property the auto suggestion is great so if you just start typing in sidebar you can see the first suggestion workbench sidebar location you can just use that and then it even lets you know the values are left or right so if i set that to right and save this settings json file cool personally i like it on the left so i'll remove that but i just wanted to let you know that that is an option okay so command b control b toggles your sidebar if you want to toggle your terminal or command line it's controller command j the keyboard shortcut that vs code suggests if you look in the view menu is control tilde but personally that's sort of awkward for me to move my hands to hit so i really like the controller command j also if you want to bump up the font size of your command line in your settings file if you just start typing font size there should be an option yep terminal integrated font size so you can just bump that up a bit if you want oops i need a comma here cool all right now let's really change gears so did you know that vs code has a built-in markdown live preview feature until just about a month or two ago i had no idea this existed so check this out we don't need any extensions whatsoever so if i just create a new markdown file there are about 30 different ways to create a new file in vs code one way that i like where you don't have to take your hands off the keyboard or open up any sort of os level save dialog if you just open up your command palette and type in new file we can use that command you can see now my cursor is blinking on the left-hand explorer sidebar so i'll just create example.md for a markdown file and now in this file check this out if we add a heading level one hello there and then maybe a paragraph of text and then a heading level two hey hi another paragraph now if i want to preview what this looks like in markdown right with my headings and my paragraphs well this preview icon this is not usually here if you're working with you know an html css or javascript file but with a markdown file this icon will appear you can click it cool and there you see that's our heading level one here's our heading level two now here's the really cool part if you scroll on one of them it scrolls both so they're perfectly in sync as far as i know this has full markdown support so if i want to add a bulleted list here cool yep there's the bulleted list so yeah until about a month ago i had no idea this existed it's a really cool feature okay now a totally unrelated topic but another feature that i had no idea existed until about a month ago check this out so maybe you already know that vs code has multi-cursor editing support and maybe you already know that vs code has regular expression support but did you know that you can combine the power of these two things for example i can click here to place my cursor and then hold down the alt or option key and then click somewhere else i can click here notice i have three cursors now all blinking so i can press enter that happens for all three cursors you know i could add on a property cool and then just press the escape key when you're ready to go back to single cursor mode so you might have already been aware of that multi-cursor feature and you might also be aware that vs code has regular expression support when searching let me show you an example so in this file imagine i wanted to write a regular expression that matched the word function and then a space and then however many characters and then an opening parenthesis like that so you would press control or command f to bring up your find option here do make sure that you enable this icon right here that's how you enable regular expressions so now imagine if i searched for function space a dot for a wild card plus symbol to match multiple and then the opening parenthesis you can't just type opening parentheses you would want to escape it so backslash and then opening parentheses cool so that regular expression matches all of these that's exactly what we wanted but now to combine this with the power of multi-cursor editing you can press alt or option on mac alt and enter and now i have cursors for all of those regular expression matches so i can press the right arrow once and you can see then i can press it back left again now if i wanted to add a word at the end i could just type it once right so i added a word at the end of all of those names you can use your arrow keys but if you wanted to get to the very beginning of the line for all of the lines you can see for example on this line my cursor is at the start of the word but then down here it's still three letters away from the beginning of the word on mac you could press command and the left arrow on windows you could just press the home key on your keyboard to get to the far edge and then you could use the right arrow key to go in a bit so now i could add you know a word to the beginning of the function names you get the idea anyways though point is is you can combine the power of regular expressions and multi-cursor editing before we change topics i want to mention a feature that i use all the time and this has nothing to do with regular expressions it's just a multi-cursor tip so let me close this out but the tip is that if you select a certain phrase that you're interested in so if i select the word function you can just press ctrl d or command d to select the next instance of that and that's creating multi-cursors for each one so if i press it one more time you can see now all four functions and you can replace them all at once i didn't actually want to do that so let me commander ctrl z let's move on let's change gears and talk about tab triggers so back in my html file it's completely empty but you can just type doc doc and then hit tab so depending on the language you're working with vs code has all sorts of built-in snippets like that now even beyond those snippets vs code also has something called emmet installed and enabled by default emit is specifically for html and css so for example if i wanted an unordered list you just type ul hit tab inside there if i want a list item you just hit li hit tab but better yet we can do this all at once so let me get a clean slate again what if i wanted an unordered list with five list items and i wanted each one to have a link inside it you could just type ul greater than symbol to go inside that we want a list item but we want five of them so list item you know multiply or asterisk by five and then inside of each one of those we want an a element you hit tab not only does it set that up for you but now we can tab trigger through the different input locations so you know you set up the actual url hit tab first link hit tab again you enter the address you know second link so you can just tab through all of those super quickly there's a lot more to emmett than that but i won't bore you by going too in depth right now if you're interested in that be sure to look up a separate emmet tutorial having said that though a lot of people know about emmett in html but not everyone seems to know that emmett exists in css as well for example in this declaration if i just say m10 and then hit tab it knows that i meant margin 10. or you know if you want to remove the underline on a link you would say text decoration none if you just type tdn and hit tab it knows what you mean or you know text align center just t a c hit tab cool so it's surprisingly good at guessing what you mean big picture whether it's emmet like this or just tab triggers in general i'm a huge fan of the tab completion behavior so anytime there's something that i do frequently if vs code doesn't already have a built-in default tab trigger for it i'll go manually create my own new custom one to give you a real world example let's talk about react js so let's imagine i was going to create a new component so over here new file or better yet let's use the command palette command shift p new file let's name it just uh test component dot js okay so every time you create a new component file in react there's a lot of boilerplate right you create a function you export that function you return a bit of jsx up at the top you need to import react so i actually have a tab trigger i don't currently have it installed because i want to install it or set it up with you but i created my own custom tab trigger snippet where if you just type rc for react component i can just hit tab on that and it will fill in everything for me but for this video i've sort of wiped my vs code clean uh so let me show you how i would set that up well first of all and this doesn't have anything to do with tab snippets uh but it's just a react js note so vs code has built-in support for jsx and react but because this file ends in dot js instead of dot jsx vs code doesn't know to treat it as a react file so you can see in the bottom right corner the language is just set to javascript instead of javascript react so you could manually click on that in the bottom right corner and start to type in javascript react and click on that cool so this is what we want but you don't want to have to do that manually each time you open up a js file so to fix this i could rename my file to be jsx but there are valid reasons to want to have your react component just end in js so let me show you what i do it might seem a little bit hacky but i've actually found zero downsides so if you just go into your settings so controller command comma go into your json file and let me add a new line so comma start to type in files dot association so it's this first one files associations curly brackets in that object let's just set up a new line quotes asterisk dot js colon give it a value of quotes javascript react so i'm just setting any and all javascript files to use javascript react now i have not found a single downside to this for example when working with non-react javascript projects like server side express js files i don't notice any downsides so again it seems hacky but i've had really good luck with this the point is though is now if i reopen up my test component awesome vs code knows to treat it as a javascript react file okay now the main reason i wanted to make sure that i was using the language or syntax that i really want like that is because when you create your own tab trigger snippets you'll usually create them for a specific language so for example let's create a react snippet so you would open up your command palette control or command shift p and then start to type in snippets and you should see this option called preferences configure user snippets let's go ahead and press enter on that and now it's going to ask you which language so because the current file i had opened was react it knows that that's probably what i want but you can scroll through the giant list of every different program in language but we obviously want javascript react cool so that's going to open up this new file it's just an object and then everything inside here is commented out so this is where you include your own custom snippets now creating your own snippets like this can be sort of awkward unintuitive time consuming because you have to spell out each line of code inside an array and each line needs to be in quotes so typing this out is really unintuitive so what i like to do i create all my snippets using this website this web app called snippet dash generator dot app you can see by default it's set to vs code so you just make up a name then you pick what tab you would want so like if i want to just be able to type rc tab that's what goes there and then your actual code and it can be multi-lines goes here and then down here it even says if you want to add a placeholder it shows you the keyboard shortcut so for example if i want to place one here and then if i wanted to place another one here i would change that to two so now if you were going to copy that into your vs code file you can just type rc tab and then you could tab through these different locations now i'm not going to walk through in detail you know creating my react component snippet but i will share a link to this it's my github or just link and this has if you click raw right here several of the react js snippets that i've set up so you can just copy this entire thing into your clipboard this link will be in the description back in vs code you can get rid of everything in this file including the overall curly brackets and just paste in your clipboard give that a save cool so now back in my test component file if i just hit rc for react component hit tab awesome now even better yet i can name this component so if i wanted it to be called featured banner notice i typed that in once and it also named it down here on the export line also if i hit tab on my keyboard it automatically takes me to the next logical spot right where you can start typing in jsx and because we're in the right syntax you can use emit tab triggers just like it was real html so i could say you know give me a heading level three hello give me an unordered list with list items give me five of them give me a link inside there hit tab you get the idea that's enough about react and tab trigger snippets let's change topics so let's talk about how to navigate through a file efficiently so if i go back into this regular javascript file and imagine you have a really long file with all sorts of different function names and variables and you want sort of a bird's eye view to quickly see what the functions and variables are well you can just press ctrl or command shift o and that's going to give you this menu that's going to show you just at a bird's eye view of the different variables and functions and you can jump right to one so if i want to go to this one just press enter takes you right there and you can do this for just about any language so i can try it in css as well command shift o cool and it works in html as well the cool thing about html is it even supports css like selectors so let's see if i have two different elements that have the same class and then i press command shift o and if i start to search for div dot banner right a div with a class of banner it is smart enough to understand this css like selector press enter it takes you right to that piece of code cool so that's enough for the command shift o tip let's move on to something different and that is and i didn't even realize this until fairly recently if you wanted to cut a line or copy a line into your clipboard you actually don't need to select or highlight the entire line so just if your cursor is anywhere on that line you can just press ctrl or command x to cut it and then you can paste it in wherever you want and that works for both cut and copy right so if my cursor is anywhere on this line i want to copy it just controller command c you can paste it anywhere if you want to duplicate a line you can have your cursor anywhere on the line and really instead of copying and pasting you can also just press alt or option so alt shift and then if i press down it duplicates it and my cursor jumps to the line below let me undo that if you press alt shift up it duplicates it but it keeps your cursor on the top copy so if you need to duplicate a line that's a good bit faster than copying and pasting if you want to move a line up or down so let's use this title line as a quick example you just place your cursor anywhere on that line you don't need to select anything and you can just press alt and up or down so alt up moves it up cool this does work with multiple lines as well so if i select you know these two lines now i can use alt up or down to move them wherever i want if you want a quick way to select multiple lines like that and you don't want to have to use you know the down arrow while holding the shift key and then you know press either the end key or command right to get to the end of the line so if you want a quick way to select multiple lines just press controller command l so you press it once it selects the current line you can press it again and again and now you can do whatever you want with those three lines you can use the alt up or down to move them copy and paste whatever okay at this point i just have two more tips for you so the first has to do with indenting or formatting let me show you what i mean so let me empty out my body area and imagine you want to copy and paste a bit of html or you know any programming language from some other source but the indentation is all messed up like you can see in this example so if i copy that paste it right here clearly this indentation is not perfect now if you open up your command palette so command shift p yes you could just type in format and then you know you can either format the selected area or just format the entire document so let me try that well i don't really agree with these empty spaces here and here but that did fix the indentation for that html so you can do that but you probably don't want to have to run that command what's nice is if you just tell vs code to automatically format your document anytime you save or anytime you paste in a bit of code this is definitely personal preference but if you like this sort of thing this is a really cool feature so to do this we just press command or control comma go into your settings json and just set up a new line and start to type in or search for format on and you can see there's format on save format on paste let's just turn both of them on so just set them to true so format on save let's do format on paste set that to true give that a save so now back in my index.html file let me start all over again right so if i wanted to paste in this code that has broken indentation you just copy it paste it right here i didn't have to run a command or do anything vs code just automatically used its default formatting engine for me now vs codes default opinions of how you should format each language they're not perfect and really that's an opinionated personal preference type of thing anyways however there is a really cool extension called prettier we're not going to set it up in this video but the idea is now you can use an extension that does have really you know good opinions on how to format or indent on default and then it will use that engine anytime you save your document or paste into it prettier is a bit controversial not everyone agrees with their stylistic opinions or way to structure code but for javascript i actually really like it cool let's move on to the final tip or the final little feature for this video and that has to do with ligatures in your fonts so for example let me go into my javascript file so down here i have an arrow function right and this arrow symbol the equal greater than certain fonts have built-in symbols specifically for these symbols in programming so for example there's a really popular font called jetbrains mono it's free and open source if you want to download it cool it has all sorts of different shapes and symbols really optimized for programming so here you can see i was referring to the arrow symbol in javascript so on and so forth so i have this font installed so how do i use it in vs code you just go into your settings your json file set up a new line let's say font if you start to search for font family it's editor dot font family i'll set it to jet brains mono give that a save you can see the font changed however if i go back into that javascript file we don't see the cool symbol for the arrow symbol this is because you need to explicitly enable ligatures in vs code so in your settings file comma and you need to say if you just search for ligatures yep editor.font ligatures you need to enable it it's false by default so just turn it on give that a save back in this file cool now you can see you have that custom symbol for the arrow function and that's actually going to bring this video to a close we've only scratched the surface of you know like one or two percent of what you can do with vs code but these were just my personal favorite tips and tricks that i've found throughout the years thank you so much for watching until the end of the video i hope you feel like you learned something and stay tuned for more web development tutorials [Music] you

Channel: LearnWebCode

Views: 103,229

Keywords:

Id: zwyHmFxeJtg

Length: 28min 56sec (1736 seconds)

Published: Mon Dec 20 2021