OpenJS Foundation OpenJS World 2021 - General, 2 Jun 2021

Previous Meeting

⏯

youtube image

►

From YouTube: VS Code Tips and Tricks - Harald Kirschner, Microsoft

Description

VS Code Tips and Tricks new for 2021

A

And tricks I open js. I just got everything ready, I'm going to 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.

A

What else do you tip some tricks and maybe they learn something new too?

A

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.

A

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.

A

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.

A

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.

A

This will help to explain it much better.

A

This is how obvious code comes out of the box.

A

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.

A

Let's check that first, so we know it's on and I can present what I'm doing.

A

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 often set up to give me an instant preview.

A

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 auto, save within the command, and it actually shows you two options.

A

So if I go from off to after delay, it will now save my file every every one. Second, so go into this file which isn't edited. Yet. If I comment something out now, I have it marked modified after a second.

A

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.

A

If I move to on window change now, if I focus out of vs 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 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.

A

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.

A

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 anytime back and there's a command going with that toggle sidebar.

A

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 and 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 bit more interesting.

A

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.

A

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.

A

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.

A

I can also bring, for example, the problems view over here.

A

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.

A

What I like to do to extend that I showed off search in the panel below another way to search is using it within the editor, so we're looking for search mode.

A

It's 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 any more.

A

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.

A

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.

A

I can now actually browse through my search results, which get a lot of space in the editor with all lines presented and they open on the right side to let me use the code.

A

So this is my favorite style of searching, and it gives me this really nice overview of the code.

A

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 back to settings, word wrap is default of envious code.

A

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 augmentation or markdown.

A

The other way is word web 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.

A

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 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 so like to create markdown files.

A

So when you open up vs code onto a file, there's not much there, and then you have to pick the language mode down here, that's like markdown, and now I can take my notes.

A

The other way to do this is picking up the default default language mode.

A

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.

A

Which is great for taking notes or just scribbling down your to-do.

A

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.

A

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.

A

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.

A

I can just hit pin on that file on the 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.

A

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.

A

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.

A

To 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.

A

So we customize the ui we customized tabs, we really improved our productivity and now I really don't want to lose those changes.

A

The way to do that, to not just back your changes up, but also bring them in 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.

A

You pick the channel I'm on insiders, so I'm not going to pick that you can have both installed site by site and sync differently. I'm going to 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.

A

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.

A

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 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.

A

Everything will be synchronized across your vs code and always one tap away.

A

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.

A

This shortcut and during screencast mode is one of the most powerful to navigate your elements quickly.

A

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.

A

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.

A

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.

A

If I go, for example, in the router intellisense command, space is what powers this autocomplete I go back on the router. I will see all the methods on the express runner. If I now go in and hit delete, it will insert the value going into settings searching for suggest.

A

Insert 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.

A

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.

A

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.

A

Now, if I have the get rid 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.

A

You can see the very rich documentation for css, html and javascript that comes baked in all the rich typescript annotations that your code has.

A

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.

A

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 to find in a 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.

A

I can open a browser.

A

That shows the output, my beautiful app now the debugging is running. I can go into my server side code set breakpoints.

A

Refresh and debug everything I like to know about, if I step over this and now the image path set, I can edit things, which is the amazing part of debugging.

A

And continue now, when, at the button the cat is replaced by a dog which is how it should be.

A

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.

A

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 of json. I can now launch set a breakpoint in hit note hello, dot, js.

A

And start debugging, while you debug everything that happens will be printed to the debug console. So I 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.

A

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.

A

If we now reload the app we're again paused, 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 it really connects it all: it's not just going from the server side, but also going to the client side as well.

A

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.

A

I'm going to remove this breakpoint, so you have loads.

A

Now we have the app running in the browser and 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 within vs code.

A

Again go to debug console see what is power toggled.

A

I can change power, toggled really screw up the state of the world move the breakpoint continue now, oh yeah.

A

Now 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 bridge is the gap to console. Logging is adding log points. Paw is toggled now that enter.

A

This is a log point and every time again in 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 the 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.

A

For me, that's a lot easier than sprinkling in console logs and occasionally forgetting one when I committed 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.

A

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.

A

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?

A

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 maybe assign to a hotkey.

A

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.

A

In this case, it's merge.js. The other aggregate is total time, which also includes all the leave 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.

A

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.

A

The other way to monitor is using the real-time performance.

A

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.

A

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 gcn is also going up and that you see it's happening and things are lower again. The same works on the front end.

A

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.

A

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.

A

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.

A

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 kirschner thanks so much from the vs code team, bye,.