VS Code Tips and Tricks for 2021

and tricks i open js i just got everything ready i'm gonna present to you the best tips and tricks that you hopefully can add to your day-to-day of coding to have more fun be more productive and efficient and show off to your friends what else do you tip some tricks and maybe they learn something new too i work on vs code so tips and tricks talks are a ton of fun for me as well because i can blend in my personal favorites that i show off to everybody who cares to listen and i can go back to the recent release notes and get all the amazing work that the team has done in front of you so you can start using them and i can go all the way back kind of beneath the surface obvious code where a lot of amazing features linger that users haven't discovered yet so i am happy this is my happy place to show these tips and tricks to you to get things started i mentioned you can show these tips and tricks to others so how can you best show that often there's keyboard shortcuts involved and commands and all these little ui pieces one has to uncover and explain how to get there so the best way to give tips and tricks is a remember the command and b if you know the command and use it more often learn the shortcut let's start with that so when you want to demo something you can enable screencast mode you did that so now everything i do in vs code is highlighted by vs code itself if i go back to what i just did type in screencast hitting command shift p to open the command palette first or f1 screencast is already recently used so it's already now would be off i want to switch it on again here we go so now if you show all your crazy shortcuts you customize and learn the new commands that you have memorized this will help to explain it much better this is how obvious code comes out of the box so part one is we're looking at what are kind of the customizations that you can do to make vs code adapt better to your workflow to get the tools you most use most right in front of you and to get just different styles that everybody has in the development into the tool we use most outer box vs code comes with a lot of amazing tools already there's extensions for everything you need under the moon and it's a highly adaptable ui so the first part already showed with a screencast mode let's check that first so we know it's on and i can present what i'm doing first off i love autosave mode because i keep trying to perfect my code and don't save enough and if i have autosave mode on i make sure to save often even though i don't hit command s or hit go into the menu and then my build pipelines are from setup to give me an instant preview so i can actually work on my code and keep coding away and see instantly what i'm doing so let's enable that we open settings move that to the right and split pane get a little bit more room and autosave is actually the first option right on top to show you how to search you hit up autosave within the command and it actually shows you two options so if i go from off to after delay it will now save my file every every one second so going to this file which isn't edited yet if i comment something out now i have it marked modified after a second if i edit edit again wait a second it's now saved on focus change does the same when you switch between taps so if you finish it work in one file switch to another now the file is saved as well if i move to on window change now if i focus out of this code and back in things are being saved and back in so now we have deletions and modifications all saved let's revert that switch back and it's saved what i recommend is after delay it's the easiest keeps your work saved you never lose it and you keep seeing your changes as you work which is makes me feel productive at least next one up is how we actually use the ui this code has this left activity bar and it's great you have search you have source control you have debugging and you can find your extensions what i don't like i often especially on a smaller screen when i work on my laptop i want to hide and show the sidebar as needed because if i have the files open i don't need to go in there but that means probably one of you who doesn't like that the windows and everything moves around so there's two cams sidebar on the left and sidebar no right now when you close it my code stays put which is good so you can move it anytime back and there's a command going with that toggle sidebar you already see cyber visibility with i have been using command b and you can see toggle sidebar position so let's move it back so you can confuse you can follow along on your own vs code can do a lot more customizations in the ui very commonly is dragging these icons around where you need them so you can move extensions up or down but let's get a little more interesting so let's open the terminal and what i find a really good way to bring things together where i look at them at the same time is moving for example the debug console into the run and debug activity bar view now they're in the same spot i can start debugging i can see my break points i can see the debug log output i might even be able to close this so i have more room for my code that's one way get away um is search search is really amazing in this small sidebar for some quick quick searches um you look around you find your lines you're looking for but i also like it down here now if i go into search i actually do have a lot more room and can see the longer lines as well so that's another way so bring a search back i can also bring for example the problems view over here so now as i go through my problems i can again maximize the space i need so make the best of the room you have on a small screen on a large screen adapt it to whatever you need but if you get into a weird spot you can reset the view locations and bring everything back where it was what i like to do to extend that i showed off search and the panel below another way to use search is using it within the editor so we're looking for search mode in your search mode and we switch that to reuse editor which means it will only open in the other always using the same window if you already have search open now if we hit search command shift f it opens over here so we can actually reduce it remove it here we don't need anymore we can always access it with the command if we need to or a shortcut if you search now you'll find that it's okay you keep losing your search results so now i just go back my search go there over here so the other setting i recommend with that is search double click behavior in this case it's go to location which is default and open location to the side is what brings the magic so now they give to search some space i can now actually browse through my search results which gave a lot of space in the editor with all lines presented and they open on the right side to let me use the code so this is my favorite style of searching and it gives me this really nice overview of the code so let's look at word wrap because you can see there's a lot of things missing if you use vs code in a small space or with many split editors going back to settings word wrap is default of envious code if you switch it on that's the first option or the easiest this code will break lines whenever they hit the borders of the editor which is really nice for smaller screens just to make things fit especially if you if you used to be writing longer lines like in documentation or markdown the other way is word rep column which then uses the word rep column setting which is set to 80 and it will just break on that so the editor window doesn't do anything anymore but it's just breaking on the 80 characters limit the last option is bounded which is a combination of both it still uses the 80 limit 80 character limit to set the limit for each line but you can also go in and now we'll pick up the editor so really useful to have it's my default user to have it on so i can see all the code without scrolling left and right next up what's really typical in my flow is creating a lot of files to like to create markdown files so when you open a vs code onto a file there's not much there and then you have to pick the language mode down here let's click mark down and now i can take my notes the other way to do this is picking up the default default language mode let's go up here default formatter default language that's it so default language mode is assigned to every new file you create that's untitled so reset that to markdown now each file we create will automatically be a markdown file which is great for taking notes or just scribbling down your to-do the other option is setting it to active ad editor language which will pick up the latest the last file you have in index.js create a new file will create an index.js file open the function and everything is already set to javascript and i can save it wherever i need if i am in an html file i can continue creating more html files really useful and feels just right next up you see i already created a lot of different files i'm working on my project pin tabs was one of the most requested features that we had in our backlog and it finally landed in the recent releases let me show you how it works in this case i'm working on app.js as my main project and i keep clicking around in other parts of the project but i keep i don't want to lose app.js i can just hit pin on that file on a tab and now you see a little pin appearing and it's it will not not go away it will always stay around can't just close it similar to in the browser these tabs are made to stay pin tabs has some really cool customizations as well pin tabs tabs you can make them a little bit more compact because this file is taking a lot of space in my tab bar all the time now compact allows you to just limit it to the file icon and shrink will still show you the first characters so as you pin more files you have still an idea of what's behind them i like this part especially this works well for me now so what else can i do to actually make use of all these tabs i have opened to see them we just recently as well added wrap tabs if you enable it finally all the files i have open and the tabs i keep hoarding are at my fingertips so i can close them i can clean them up maybe i want to get my space back but this really allows you to remove just need to scroll and go left and right to refine things so that plus pin tabs allows you to really get on top of your tab hoarding so we customize the ui we customized tabs we really improved our productivity and now i really don't want to lose those changes the way to do that to not just back your changes up but also bring them on all the other bs code machines like your personal one and you work one and your vms you can use settings sync it's built into vs code so nothing else to install just go into the menu here turn on settings sync it will ask you which pieces of your customizations you want to bring in i want to bring everything you sign in you pick the channel i'm on insiders so i'm not gonna pick that you can have both installed site by site and sync differently i'm gonna pick my github account you can also pick your microsoft login and now this code uploads everything that i customized onto my account and it's turned on any changes that i made like the settings everything else is now securely backed up and i can bring into the next vs code instance this is a fresh vs code installation that has nothing set up look at the settings it's empty nothing happened here i want to get my changes in so in this instance as well turn on settings sync select everything pick insiders github accounts save to my system now it will get oop everything in it's already there what happened so now if i customize further here let's pick a color theme maybe in today i'm in the mood for some more red and let's keep working over here settings extensions everything will be synchronized across uvs code and it's always one type away next up let's look at intellisense and javascript debugging one of the most useful things on a day-to-day while using vs code and how we can make it even easier with the right shortcuts and the right settings first off expand and shrink selection this shortcut and you're in screencast mode is one of the most powerful to navigate your elements quickly pressing ctrl shift left and right allows you to go from your current selection expanding it and shrinking it back to the next expression up and down this works great in html to get the whole tag or just a part of the attribute the whole tag the parent parent element and then going up to the whole document and all the way back in javascript it works the same way you can select the current word the current object the current function call and all the way up and down one special trick it works in markdown expanding here we'll select the current code block then going up to the next header this way you can quickly navigate even within markdown giving the that vs code knows a lot about your code the next trick we have powered up is intellisense the insert mode if i go for example in the router intellisense command space is what powers this autocomplete i go back on a router i will see all the methods on the express router if i now go in and hit delete it will insert the value going into settings searching for suggest insert such as insert mode you have the editor suggest insert mode let's switch it to replace by default which i feel more intuitive it does delete the text which is why insert is the default so you don't lose any of your text now if i start with the old get i can now go back pick this what about just post now this function is replaced we can do the same in other elements get element by id i could replace it with get elements by tag name and the whole thing so you can go back and forth and expand and reduce what you're looking for if it's just a simple rename select it how do you find out that this exists does the other suggest status bar which is a neat addition to the suggestion box that's popping up now vs code will tell you how to do replace which is the default and how to toggle over to an insert now if i have the get root note i press command enter it will actually do the old way of the insert which i switched off you can also show more it's especially useful for web functionality control space you can see the very rich documentation for css html and javascript that comes baked in but for all the rich typescript annotations that your code has you can also resize those if you need more space or less space on a small screen i love to have those it's a little bigger the next feature area i'd like to share some tips and tricks for is the javascript debugger that comes built in with vs code last year the team launched a new version and has a few tricks up its sleeves that make it really easy to set up without doing the whole launch to adjacent dance and getting the team on boarded the first way to debug any script that you already have defined in your package or json is this code lens that gets added to the file hit debug start this will launch a javascript debug terminal for you with the script executing now the script is running and my server is up i can open a browser that shows the output my beautiful app now the debugging is running i can go into my server side code set breakpoints refresh and debug everything i like to know about if i step over this now the image path set i can edit things which is the amazing part of debugging and continue now when at the button the cat is replaced by a dog which is how it should be refishing again without the break point we have the old cat back this is one way the other way is launching a javascript debug terminal on your own if you kill this terminal go into the command palette search for javascript debug terminal and get this it's opens up in the terminal panel but now every node script you execute from here will be launched in debug mode even just a simple file and script like this that doesn't even have a package or json i can now launch set a breakpoint in hit note hello dot js and start debugging while you debug everything that happens will be printed to the debug console so now continue i will see the world output here so you get logging and debugging all in one combined within vs code so no context switching the other way to launch let's use the same let's use the same debug terminal for our app we knew we had a breakpoint here before if we just hit npm start now same thing will happen all the node processes are launched are being inspected and running in the debugger if we now reload the app or again pause we can now again just like in the browser go to debug console and inspect the state of the app now it's undefined stepping one back in it's again defined we can poke around at all the little things that are running within the app we can expand the objects and everything else happening within the debug console the best trick what i find that really connects it all it's not just going from the server side but also going to the client side as well now that the app is running it prints out where it's running so if i launch this link it will open chrome with the debugger connected i'm going to remove this breakpoint so you have loads now we have the app running in the browser and [Music] this file which is running in the browser is running in debug mode if i set a breakpoint here i can now inspect the state of everything of the world with envious code again go to debug console see what is power toggled i can change power toggled really screw up the state of the world move the breakpoint continue now oh yeah no i want it but makes the point let's fix it again set the breakpoint hit the button so reset for toggled and continue the other way to go about it and this bridges the gap to console logging is adding log points paw is toggled now hit enter this is a log point and every time again the browser when this code runs it will not break and pause but actually just print the statement and the expression i added i find a new javascript debugger amazing any app i run i run it through vs code so anytime i run into an issue i have something i need to clarify within the code i can just add a lock point or a breakpoint and do whatever i need to do to get to the root cause of it for me that's a lot easier than sprinkling in console logs and occasionally forgetting one when i commit it so try it out hopefully you like it too now that our app is running and the debugger attached i can show you the last and probably most amazing part of the new infrastructure it's really important to make things fast for your app not just in the back end where you serve the data and serve the pages but also in the front end where things have to be responsive for the user to actually click on looking at my app i created this slash data endpoint that takes a while to serve this really important business data looking at the app there's the code let's find out why is it slow to start profiling we have to look at the call stack within the run and debug menu and then see the take performance profile button on the left little circle with a dot inside take performance profile is also the command that you can look up and may be assigned to a hotkey let's start profiling this one the node.js process for about 10 seconds go back to server hit it with requests refresh a few times as soon as the 10 seconds are over vs code will serve us with the profile profiles by default sorted by self time which shows you the function first that does the most computing in this case it's merge.js the other aggregate is total time which also includes all the leaf nodes of that function and everything it calls into so going to merge we can actually go in this is called by merge sort and the novice function and doing some more processing so let's look at the function itself within vs code you will get a code lens that shows the profiling layer we collected in the context of the function for app.js this also shows forget data with self time and total time showing here that this function itself was really fast but overall in total it called some really expensive functions the other way to monitor is using the real-time performance let's give it some room and we can see this real-time performance graph which is provided by an extension install the vs code.js profile flame extension which adds this panel to the run and debug panel now we see cpu and heap let's give it something to do we can see the cpu usage is going up to 100 percent and the heap because of gc is also going up and that you see it's happening and things are lower again the same works on the front end now if we go into the call stack and select the browser we'll get even more data now we can monitor going back to our original page we can monitor dom nodes and layouts and style recalculations on an ongoing basis monitoring how fast or front-end is and what potentially could cause issues i'm excited for how easy this makes it to work on performance as you do your day-to-day coding not just for your back end but also your front end and all in one interface that was it thanks so much for watching i hope you have a blast adding these tips and tricks to your daily routine with vs code follow us on twitter and techtalk for even more tips and tricks and keep checking out the release notes that we put out on a monthly basis for any new additions that might help you i'm herald kirchner thanks so much from the vs co team bye

Channel: Coding Tech

Views: 25,433

Keywords: vs code, visual studio code, tips and tricks, 2021

Id: fyg9Uw3CLUU

Length: 32min 18sec (1938 seconds)

Published: Fri Jul 02 2021